如何在网站上播放通知声音？
当某个事件发生时，我希望我的网站向用户播放短暂的通知声音。
当网站打开时，声音不应该自动启动（即时）。 相反，它应该通过JavaScript（当发生某些事件时）按需播放。
重要的是，这也适用于旧的浏览器（IE6等）。
所以，基本上有两个问题：
- 我应该使用什么编解码器？
- embeddedaudio文件的最佳做法是什么？ （
<embed>vs<object>vs. Flash vs.<audio>）
我发现了一个非常优雅的解决scheme，可以在几乎所有的浏览器上工作（即使没有安装Flash）。
我在Chrome，Safari，Firefox，Opera和IE6上testing过。
它是新型浏览器的HTML5 <audio>标签和旧版浏览器的<embed>标签的后备：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Audio test</title> <script type="text/javascript"> /** * @param {string} filename The name of the file WITHOUT ending */ function playSound(filename){ document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></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和IE。 对于Firefox和Opera，我使用了OGG。
到2016年，以下就足够了（你甚至不需要embedded）：
var audio = new Audio('/path/to/audio/file.mp3'); audio.play();
在这里看到更多。
还有一个插件，在网站上播放通知声音： Ion.Sound
- 基本演示
- 高级演示
- Ion.Sound GitHub页面
优点：
- JavaScript插件，用于播放基于Web Audio API的声音并回退到HTML5 Audio。
- 插件正在处理大多数stream行的桌面和移动浏览器，可以在任何地方使用，从常见的网站到浏览器游戏。
- 包括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");
雅虎的媒体播放器如何embedded雅虎的图书馆
<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从这篇文章中提出的，请检查Howler.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();
希望有助于某人。
将<audio>标签的audio.js用作填充 ，并使用fallback进行闪光。
一般来说，请查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills，了解polyfill的HTML 5 API（ 包括更多<audio> polyfills ）
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
