Как воспроизводить звуки уведомлений на веб-сайтах?

Когда происходит определенное событие, я хочу, чтобы мой сайт воспроизводил короткий звук уведомления пользователю.

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

Важно, что это также работает в старых браузерах (IE6 и т.д.).

Итак, в основном есть два вопроса:

  • Какой кодек следует использовать?
  • Какая лучшая практика для встраивания аудиофайла? (<embed> против <object> против Flash vs. <audio>)

ОТВЕТЫ

Ответ 1

Это решение работает практически во всех браузерах (даже без установленной Flash):

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      function playSound(filename){
        var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
        var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
        var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
        document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

Поддержка браузера

  • <audio> (современные браузеры)
  • <embed > (запасной вариант)

Используемые коды

  • MP3 для Chrome, Safari и Internet Explorer.
  • OGG для Firefox и Opera.

Ответ 2

По состоянию на 2016 год будет достаточно следующего (вам даже не нужно вставлять):

let audio = new Audio('/path/to/audio/file.mp3');
audio.play();

Подробнее здесь.

Ответ 3

Еще один плагин для воспроизведения звуков уведомлений на веб-сайтах: Ion.Sound

Преимущества:

  • JavaScript-плагин для воспроизведения звуков на основе API веб-аудио с возвратом в HTML5 Audio.
  • Плагин работает с большинством популярных настольных и мобильных браузеров и может использоваться повсеместно, от обычных веб-сайтов до браузеров.
  • Поддержка аудио-спрайтов.
  • Никаких зависимостей (jQuery не требуется).
  • Включено 25 бесплатных звуков.

Настроить плагин:

// set up config
ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

// And play sound!
ion.sound.play("my_cool_sound");

Ответ 4

Как насчет медиа-плеера yahoo Просто вставьте библиотеку yahoo

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

И используйте его как

<a id="beep" href="song.mp3">Play Song</a>

Чтобы автозапуск

$(function() { $("#beep").click(); });

Ответ 5

Воспроизвести кросс-браузерные уведомления

Как советовал @Tim Tisdall из this post, Check Howler.js Плагин.

Браузеры, такие как хром, отключает выполнение javascript при минимизации или неактивности для производительности. Но это звучит как звуковое оповещение, даже если браузер неактивен или минимизирован пользователем.

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

Надежда помогает кому-то.

Ответ 7

var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

этот код из talkerscode. Для полного руководства посетите http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

Ответ 8

Мы можем просто использовать Audio и объект вместе, например:

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

и даже добавление addEventListener для play и ended

Ответ 9

Я написал чистый функциональный метод воспроизведения звуков:

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}