如何发挥在网站上的通知声音？ [英] How to play a notification sound on websites?
问题描述
当某个事件发生时，我希望我的网站上播放一个简短通知声音给用户。
声音应的不可以自动启动（瞬间）当网站被打开。
相反，应该根据需求通过JavaScript（当某些事件发生时）播放。
这是很重要的，这也适用于旧的浏览器（IE6等等）。
所以，基本上有两个问题：
- C $ CC我应该使用什么$？
- 什么是嵌入音频文件的最佳做法？ （
＆LT;嵌入＆GT;与＆LT;对象＆gt;与闪存与＆LT;音频＆GT;）
我发现了一个很优雅的解决方案，在pretty多所有的浏览器（即使没有安装的Flash）。
工作我在Chrome，Safari，Firefox，Opera和IE6的测试。
这是HTML5的混合＆LT;音频＆GT; 标记为新的浏览器和＆LT;嵌入＆GT; 标签回退的旧的浏览器：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-strict.dtd＆GT;＆LT; HTML和GT; ＆LT; HEAD＆GT;
＆LT;标题＆gt;音频测试＆LT; /标题＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
/ **
* @参数{string}里的文件名文件的名称没有结束
* /
功能playSound（文件名）{
的document.getElementById（声音）的innerHTML ='＆LT;音响自动播放=自动播放＆GT;＆lt;信源SRC =+文件名+.MP3TYPE =音频/ MPEG/＆GT;＆lt;信源SRC =+文件名+'.OGGTYPE =音频/ OGG/＆GT;＆LT;嵌入隐藏=真的自动启动=真循环=假SRC =+文件名+MP3/ ＆GT;＆LT; /音频＆GT;';
} ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;身体GT; ＆LT;！ - 将尝试播放bing.mp3或bing.ogg（取决于浏览器的兼容性） - GT;
＆LT;按钮的onclick =playSound（'兵'）;＆GT;播放＆LT; /按钮＆GT;
＆LT; DIV ID =声音＆GT;＆LT; / DIV＆GT; ＆LT; /身体GT;
＆LT; / HTML＆GT;
由于codeCS我用MP3为Chrome，Safari和IE浏览器。
对于Firefox和Opera我用OGG。
When a certain event occurs, I want my website to play a short notification sound to the user.
The sound should not auto-start (instantly) when the website is opened. Instead, it should be played on demand via JavaScript (when that certain event occurs).
It is important that this also works on older browsers (IE6 and such).
So, basically there are two questions:
- What codec should I use?
- What's best practice to embed the audio file? (
<embed>vs.<object>vs. Flash vs.<audio>)
I found a very elegant solution that works on pretty much all browsers (even without Flash installed).
I tested on Chrome, Safari, Firefox, Opera and IE6.
It's a mix of HTML5 <audio> tag for newer browsers and <embed> tag Fallback for older browsers:
<!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>
As codecs I use MP3 for Chrome, Safari and IE. For Firefox and Opera I used OGG.
这篇关于如何发挥在网站上的通知声音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
