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

108

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

声音应该不自动启动（瞬间）的网站打开时。而是应通过JavaScript按需播放（当发生特定事件时）。

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

因此，基本上有两个问题：

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

— 蒂莫
source

您可以尝试github.com/VJAI/musquito

— VJAI '18

98

该解决方案几乎可以在所有浏览器上运行（即使未安装Flash）：

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      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>';
      }
    </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>

浏览器支持

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

使用的代码

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

— 蒂莫
source

好答案。在这种情况下，虽然打开页面时声音确实会立即播放-但我假设您只是为了演示而演示了如何。

— Stefan 2012年

@Stefan是的，但可能会造成混淆。我将从答案中删除它。感谢您的提示。

— Timo '04

非常感谢您提供的解决方案@valmar

— Jagdeep Singh

@DavidLarsson因为某些浏览器无法读取某些编解码器。

— Timo

2

我没能使其正常工作与我的Internet Explorer版本8

— 美龄阿拉法特铝马哈茂德

83

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

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

在这里查看更多。

— Weltschmerz
source

也许还要在执行此操作之前检查是否已定义音频。

— 克里斯托弗·罗西

1

这是一个很好的答案，如此简单且完美地工作。

— 北极星'18

3

我再也无法正常工作了Uncaught (in promise) DOMException

— 杰克·

2

刚在最新的Chrome浏览器（版本74.0.3729.169）上试用过，它对我有用。

— weltschmerz

它可以在chrome，FF和Opera上正常工作，并且比接受的答案要好得多，因为该答案会不断将音频标签附加到您的body标签上，因为通知脚本很可能会被间隔调用

— Muhammad Omer Aslam

16

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

优点：

JavaScript插件，用于基于Web Audio API播放声音，并回退到HTML5 Audio。
插件可以在大多数流行的桌面和移动浏览器上运行，并且可以在从通用网站到浏览器游戏的任何地方使用。
包括音频精灵支持。
没有依赖关系（不需要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）
source

4

雅虎的媒体播放器怎么样？只需嵌入雅虎的图书馆

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

并像这样使用

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

自动启动

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

— 斯塔克斯
source

也是一个不错的解决方案，但是可以隐藏该链接吗？我想如果您设置display: none了它，它将不再播放声音。此外，雅虎媒体库显示左链路的小“戏”图标..

— 蒂莫

@valmar：visiblity: hidden;您的答案

— Starx

3

播放跨浏览器兼容的通知

从劝通过@Tim代尔这个岗位，检查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();

希望可以帮助某人。

— Shaijut
source

“即使浏览器处于非活动状态或已最小化时，播放通知的声音也如何”？如果在页面处于睡眠状态时调用该声音，则可能会播放声音，但是调用的代码sound.play()首先如何运行？吼叫会将所有setTimeouts放在包装器中吗？

— 最高的

@poshest，我不知道它的播放方式，可能正在检查源代码或联系插件的作者可能会对您有所帮助。

— shaijut

1

好，谢谢。只是您提到了此功能并链接了其他Stackoverflow答案，但是Howler文档中并未提及此功能，因此我认为您对此有所了解。

— 最高的

2

使用audio.js，它是<audio>代码的polyfill，具有回退到 Flash的功能。

通常，请查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills以获取HTML 5 API的polyfill。（其中包括更多的<audio>polyfill）

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

2

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

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

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

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

— 斯旺·伊萨姆
source

0

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

— 拉曼恰
source

0

我们可以将Audio和一个对象一起使用，例如：

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

甚至加入addEventListener了play和ended

— 莫斯塔法
source

0

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

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

— 插口
source