javascript - 如何在网站上播放通知声音？

Question

当某个事件发生时，我希望我的网站向用户播放一个简短的通知声音。

当网站打开时，声音应该不会自动启动(立即)。相反，它应该通过 JavaScript 按需播放(当特定事件发生时)。

重要的是，这也适用于旧版浏览器(IE6 等)。

所以，基本上有两个问题:

1. 我应该使用什么编解码器？
2. 嵌入音频文件的最佳做法是什么？ ( <embed> 对比 <object> 对比 Flash 对比 <audio> )

Answer 1

2021 解决方案

function playSound(url) {
  const audio = new Audio(url);
  audio.play();
}

<button onclick="playSound('https://your-file.mp3');">Play</button>  

浏览器支持

Edge 12+、Firefox 20+、Internet Explorer 9+、Opera 15+、Safari 4+、Chrome

编解码器支持

只用MP3

---

旧解

(对于旧版浏览器)

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>';
}

<button onclick="playSound('bing');">Play</button>  
<div id="sound"></div>

浏览器支持

• <audio> (现代浏览器)
• <embed > (后备)

使用的代码

• 适用于 Chrome、Safari 和 Internet Explorer 的 MP3。
• 适用于 Firefox 和 Opera 的 OGG。