/ Регистрация

А кто работал с звуком в HTML5?

Тема в разделе "WEB-ресурсы", создана пользователем E13, 04.05.13.

  1. 04.05.13 #1
    E13

    E13 Активный участник

    10.610
    1.540
    Подумал сделать себе на сайте няшненьких кнопок с тоновым набором - чтобы при нажатии на них звуки как на телефоне были, и в зависимости от набранной комбинации происходили разные занимательные события. Вспомнив, что у нас на дворе HTML5, побрёл читать про тэг audio, а затем попробовал свою нехитрую задумку с ним осуществить.

    Трабл получился в том, что найденные звуки были длительностью в секунду и жутко пилили уши. Впрочем, решить это более чем просто - взять, да и остановить звук через полсекунды где-то. Тем более что даже ивент предусмотрен на эту тему - а там .pause(), и прошедшее время сбросить.

    Но блин не сработала пауза. Я её и так, и эдак - и через родной ивент, и через setTimeout - любые другие инструкции в обработчике события работают, только не остановка звука. Запустил код в Хроме (до этого был Фуррифокс) - внезапно всё прозвучало как надо. Снова вернулся к Фуррифоксу - опять без остановки играет. Запустил код в ИЕ - тот просто деликатно промолчал, не воспроизведя вообще ничего.

    Нашёл инфу про библиотеку audio.js, которая вроде бы кроссбраузерная, но подключать к страничке ещё один файлик только для развлекалочки как-то не оно показалось.

    Соответственно, вопрос: никто не делал чего-то подобное, чтобы оно работало как надо и везде?
     
  2. 04.05.13 #2
    muhon

    muhon Активный участник

    1.647
    79
    Найденые звуки, это что? Код в студию:-) и зачем пауза? Может просто взять звуки нужной длительности.

    ---------- Сообщение добавлено 04.05.2013 09:28 ----------

    http://habrahabr.ru/post/148368/
     
  3. 04.05.13 #3
    E13

    E13 Активный участник

    10.610
    1.540
    muhon, звуки взял отсюда

    Код тривиальный -
    ============
    <html>
    <head>
    <script>
    function playsound()
    {
    document.getElementById('sound').play();
    document.getElementById('sound').addEventListener('timeupdate', function(){ console.log(document.getElementById('sound').currentTime); document.getElementById('sound').pause(); document.getElementById('sound').currentTime = 0;});
    }
    function playsound2()
    {
    document.getElementById('sound').play();
    window.setTimeout(function(){ console.log('500'); document.getElementById('sound').pause()}, 500);
    }
    </script>
    </head>
    <body>
    <audio id="sound" src="dtmf6.ogg" /> </audio>
    <input type="button" onClick="playsound();" value="Запуск с timeUpdate"/>
    <input type="button" onClick="playsound2();" value="Запуск с setTimeout"/>
    </body>
    </html>
    ============

    За статью спасибо! В частности, там говорится, что IE не поддерживает OGG. Вероятно, причина молчания в этом.
     
  4. 04.05.13 #4
    The Last Winged

    The Last Winged Активный участник

    12.536
    376
    Через флеш сейчас это делают :)
    Даже если графика на canvas.
     
  5. 04.05.13 #5
    E13

    E13 Активный участник

    10.610
    1.540
    The Last Winged, флеш не хотеть ^_^.
     
  6. 04.05.13 #6
    muhon

    muhon Активный участник

    1.647
    79
    IE не поддерживает ogg
    <audio>
    <source src="play.mp3" type='audio/mpeg; codecs="mp3"'>
    <source src="play.oga" type='audio/ogg; codecs="vorbis"'>
    <!-- здесь - добавить запасные варианты тегов -->
    </audio>
    http://www.audiocheck.net/audiocheck_dtmf.php
    генератор нормальных dtmf, выплевывает вавку, конвертится за пять сек;)
     
  7. 04.05.13 #7
    E13

    E13 Активный участник

    10.610
    1.540
    muhon, аааааа, спасибо огромное! :)

    А с паузой что за прикол всё-таки, не знаете?
     
  8. 04.05.13 #8
    The Last Winged

    The Last Winged Активный участник

    12.536
    376
    E13, определись, тебе для результата, или для обучения.
    Если первое, то бросай нахрен html для таких задач.
     
  9. 04.05.13 #9
    E13

    E13 Активный участник

    10.610
    1.540
    The Last Winged, мне для лулзов :). Обучение и результат - это не более чем инструменты и методы.

    Флеш, с учётом вот таких вещей -

    [ame]www.youtube.com/watch?v=VUOIS3jtD8Y[/ame]

    - может вскоре стать достоянием истории. Поэтому имхо перспективнее с новыми технологиями разбираться.
     
m8124cidn | 5 июля агутин казань цена | Сушилка для рук BAHD-1000AS Chrome Ballu | подставка для цветов | угловой диван раскладной купить