Как воспроизвести звук уведомления на веб-сайтах?
когда происходит определенное событие, я хочу, чтобы мой сайт, чтобы играть короткий звук уведомления для пользователя.
звук не автоматический запуск (мгновенно) при открытии веб-сайта. Вместо этого он должен воспроизводиться по требованию через JavaScript (когда происходит это определенное событие).
важно, что это также работает в старых браузерах (IE6 и такие).
Так, в основном есть два вопроса:
- какой кодек я должен использовать?
- что лучше всего использовать для встраивания аудиофайла? (
<embed>
и<object>
и Флеш и<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>
поддержка браузеров
коды
- MP3 для Chrome, Safari и Internet Explorer.
- OGG для Firefox и Opera.
по состоянию на 2016 год, следующее будет достаточно (вам даже не нужно вставлять):
var audio = new Audio('/path/to/audio/file.mp3'); audio.play();
Посмотреть подробнее здесь.
еще один плагин, чтобы воспроизводить звуки уведомлений на сайтах: Иона.Звук
плюсы:
- 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");
как насчет медиа-плеер от компании 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(); });
играть кросс-браузер совместимый уведомления
как советовал @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();
надеюсь кому-нибудь поможет.
использовать аудио.js который является полифилл для
<audio>
тег с резервной флешки.В общем, посмотри на https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills для полифилов в HTML 5 API-интерфейсы.. (он включает в себя больше
<audio>
полифиллы)
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