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

Question

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

这个声音不应该在网站打开时就自动开始播放。相反，它应该通过JavaScript（在特定事件发生时）按需播放。

这对于旧版浏览器（如IE6）也很重要。

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

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

- Timo Ernst

---

你可以尝试使用 https://github.com/VJAI/musquito - VJAI

@John 这个问题要求手动解决方案。除此之外，浏览器现在不允许自动自播放，所以作为开发人员，你无论如何也无法支持这一点。 - Timo Ernst

Answer 1

2023解决方案

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。

- Timo Ernst

---

@DavidLarsson 因为有一些浏览器无法读取某些编解码器。 - Timo Ernst

如果你想让声音无限循环播放，在 audio 中添加一个属性，像这样：loop="true"，并将 embed 中的 loop 设置为 true。 - joppiesaus

我无法让它在我的Internet Explorer 8版本上运行。 - Md. Arafat Al Mahmud

@ShaijuT 谢谢！ - mozgras

在Firefox中它可行，但在Chrome中我在控制台中得到了这个错误：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first。翻译：此代码在Firefox浏览器中运行正常，但在Chrome浏览器中则会在控制台显示以下错误信息：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first。该错误提示播放音频失败，因为用户未与文档进行交互。 - Joseph Ali

Answer 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();

查看更多 这里。

- Dennis Hackethal

---

这是一个很棒的答案，非常简单且完美地运行。 - Polaris

不再起作用，我收到了“Uncaught (in promise) DOMException”错误提示。 - jack blank

我刚在最新版的Chrome（版本74.0.3729.169）上尝试了一下，对我来说可以工作。 - Dennis Hackethal

它在Chrome、FF和Opera上正常工作，是比被接受的答案更好的方法，因为那个答案会将音频标签附加到您的body标签上，而通知脚本很可能会在间隔中被调用。 - Muhammad Omer Aslam

这应该是被接受的答案，因为它更简单，不会进行不必要的昂贵的DOM操作。 - Maxie Berkmann

Answer 3

还有一个插件，可以在网站上播放通知声音：Ion.Sound

• 基本演示
• 高级演示
• Ion.Sound GitHub 页面

优点：

• 基于Web Audio API的JavaScript插件，具有回退到HTML5 Audio的功能。
• 该插件可在大多数流行的桌面和移动浏览器上工作，并可用于从普通网站到浏览器游戏的任何地方。
• 支持Audio-sprites。
• 无依赖项（不需要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");

- Cassio Landim

---

顺便问一下，如何导入JS文件？！ - Joseph Ali

请阅读 https://github.com/IonDen/ion.sound 文档中的“使用”部分。@joseph-ali - Cassio Landim

Answer 4

如果您想通过JS自动化该过程：

在html中的某个地方包含以下内容：

<button onclick="playSound();" id="soundBtn">Play</button>  

并通过 js 隐藏它：

<script type="text/javascript">

document.getElementById('soundBtn').style.visibility='hidden';

function performSound(){
var soundButton = document.getElementById("soundBtn");
soundButton.click();
}

function playSound() {
      const audio = new Audio("alarm.mp3");
      audio.play();
    }

</script>

如果你想播放声音，只需在某个地方调用performSound()！

- Phill Alexakis

Answer 5

如何使用雅虎媒体播放器？ 只需嵌入雅虎库即可。

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 

使用方法如下：

<a id="beep" href="song.mp3">Play Song</a>

自启动

$(function() { $("#beep").click(); });

- Starx

---

这也是一个不错的解决方案，但是否可能隐藏那个链接呢？我认为如果你将其设置为 display: none，它就不会再播放声音了。此外，雅虎媒体库在链接左侧显示了一个小的“播放”图标。 - Timo Ernst

@valmar：visibility: hidden; 是你的答案。 - Starx

Answer 6

播放跨浏览器兼容的通知

根据this文章中@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();

希望能帮到某些人。

- Shaiju T

---

“This plays notification sounds even if browser is inactive or minimized”是如何实现的？如果在页面休眠时调用，声音可能会播放，但是首先调用sound.play()的代码是如何运行的？howler是否将所有的setTimeouts都放在一个包装器中？ - poshest

@poshest ，我不知道它是如何工作的，也许查看源代码或联系插件作者可以帮助你。 - Shaiju T

好的，谢谢。只是你提到了这个功能并链接了另一个Stackoverflow答案，但它在Howler文档中没有被提及作为一个功能，所以我认为你知道一些特别的东西。 - poshest

Answer 7

如果您想在代码中调用事件，最好的方法是创建触发器，因为如果用户不在页面上，浏览器将不会响应。

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

现在你可以在想要播放声音时触发按钮

$('#playSoundBtn').trigger('click');

- Sfwan Essam

Answer 8

使用audio.js，它是一个为<audio>标签提供回退到flash的Polyfill。

总体而言，请参考https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills以获得HTML 5 API的Polyfills。（其中包括更多的<audio> Polyfills）

- Gabriele Petrioli

Answer 9

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。

- ramancha

Answer 10

我编写了一个干净的功能性方法来播放声音：

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}

- Jack