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

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

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

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

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

  1. какой кодек я должен использовать?
  2. что лучше всего использовать для встраивания аудиофайла? (<embed> и <object> и Флеш и <audio>)
8 81
javascript html notifications audio html5-audio

8 ответов:

Это решение работает практически на всех браузерах (даже без установленной 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.
79

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

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

Посмотреть подробнее здесь.

42

еще один плагин, чтобы воспроизводить звуки уведомлений на сайтах: Иона.Звук

плюсы:

  • JavaScript-плагин для воспроизведения звуков на основе Web Audio 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");
14

как насчет медиа-плеер от компании 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(); });
4

играть кросс-браузер совместимый уведомления

как советовал @Tim Tisdall от этой пост , Проверьте Ревун.js плагин.

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

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

               sound.play();

надеюсь кому-нибудь поможет.

3

использовать аудио.js который является полифилл для <audio> тег с резервной флешки.

В общем, посмотри на https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills для полифилов в HTML 5 API-интерфейсы.. (он включает в себя больше <audio> полифиллы)

2
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

0

мы можем просто использовать аудио-и объект вместе, как:

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

и даже addEventListener на play и ended

0