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

javascript html html5-audio notifications audio

2022-08-30 04:33:18

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

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

重要的是，这也适用于较旧的浏览器（IE6等）。

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

我应该使用什么编解码器？
嵌入音频文件的最佳做法是什么？（与. 与闪存与<embed><object><audio>)

答案 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>

浏览器支持

<音频>（现代浏览器）
<嵌入>（后备）

使用的代码

适用于Chrome，Safari和Internet Explorer的MP3。
OGG for Firefox and Opera.

答案 2

截至2016年，以下内容就足够了（您甚至不需要嵌入）：

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

在此处查看更多内容。