1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.

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

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

  1. E13

    E13 Модератор

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

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

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

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

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

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

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

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

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

    E13 Модератор

    6.150
    33
    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. The Last Winged

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

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

    E13 Модератор

    6.150
    33
    The Last Winged, флеш не хотеть ^_^.
     
  6. muhon

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

    1.374
    2
    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. E13

    E13 Модератор

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

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

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

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

    E13 Модератор

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

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

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

    - может вскоре стать достоянием истории. Поэтому имхо перспективнее с новыми технологиями разбираться.