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

【问题标题】：How to play a notification sound on websites?如何在网站上播放通知声音？
【发布时间】：2012-04-23 16:57:09
【问题描述】：

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

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

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

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

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

【问题讨论】：

你可以试试github.com/VJAI/musquito

标签： javascript html audio notifications html5-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>

浏览器支持

<audio>（现代浏览器）
<embed>（后备）

使用的代码

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

【讨论】：

不错的答案。在这种情况下，虽然声音确实会在页面打开时立即播放 - 但我假设您展示了如何，只是为了演示目的。
@Stefan 这是正确的，但可能会造成混淆。我会从我的答案中删除它。感谢您的提示。
非常感谢@valmar 的解决方案
我的 Internet Explorer 版本 8 无法使用它。
@ShaijuT 谢谢！

【解决方案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();

查看更多here。

【讨论】：

在执行此操作之前还可以检查是否定义了音频。
这是一个很好的答案，非常简单而且效果很好。
不工作了我得到Uncaught (in promise) DOMException
刚刚在最新的 Chrome（版本 74.0.3729.169）上试了一下，对我有用。
这应该是公认的答案，因为它更简单并且不会进行不必要的昂贵的 DOM 操作。

【解决方案3】：

另一个插件，在网站上播放通知声音：Ion.Sound

优点：

JavaScript 插件，用于播放基于 Web 音频 API 并回退到 HTML5 音频的声音。
插件适用于最流行的桌面和移动浏览器，可以在任何地方使用，从常见的网站到浏览器游戏。
包括音频精灵支持。
没有依赖项（不需要 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");

【讨论】：

【解决方案4】：

雅虎的媒体播放器怎么样只需嵌入 yahoo 的库

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

并像使用它

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

自动启动

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

【讨论】：

也是一个不错的解决方案，但是否可以隐藏该链接？我想如果你为它设置display: none，它就不会再播放声音了。此外，Yahoo 媒体库会在链接左侧显示一个小的“播放”图标。
@valmar: visiblity: hidden; 是你的答案

【解决方案5】：

播放跨浏览器兼容通知

根据@Tim Tisdall 来自this post 的建议，检查Howler.js Plugin。

chrome 之类的浏览器在最小化或不活动时禁用javascript 执行以改进performance。但是即使浏览器处于非活动状态或被用户最小化，这也会播放通知声音。

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

希望能帮助别人。

【讨论】：

“即使浏览器处于非活动状态或最小化，此播放通知的声音”如何？如果在页面休眠时调用声音可能会播放，但调用sound.play() 的代码首先是如何运行的？ howler 是否将您所有的 setTimeouts 都放在一个包装器中？
@poshest，不知道怎么玩，可能在查源码或者联系插件作者可能对你有帮助。
好的，谢谢。只是您提到了此功能并链接了其他 Stackoverflow 答案，但在 Howler documentation 中并未将其作为功能提及，所以我认为您对此有所了解。

【解决方案6】：

使用audio.js，它是<audio> 标记的polyfill，可回退到flash。

一般来说，请查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills 以获取 HTML 5 API 的 polyfills。（它包括更多 <audio> polyfills）

【讨论】：

【解决方案7】：

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

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

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

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

【讨论】：

【解决方案8】：

如果您想通过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()！

【讨论】：

【解决方案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

【讨论】：

【解决方案10】：

我们可以只使用 Audio 和一个对象，比如：

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

甚至为play和ended添加addEventListener

【讨论】：

【解决方案11】：

我写了一个干净的函数式播放声音方法：

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

【讨论】：