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

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

声音应 没有自动启动(即时)当网站打开。 相反，它应该通过 JavaScript 按需播放(当某个事件发生时)。

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

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

  1. 我应该使用什么编解码器？
  2. 嵌入音频文件的最佳实践是什么? (<embed>对比 <object>对比 Flash 对比 <audio>)
185293 次浏览
小开

使用 有声读物，它是 <audio>标签的填充，可以回退到 flash。

一般来说，请查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills中 HTML 5 API 的填充. . (它包括更多的 <audio>填充物)

小开
最佳答案

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。
  • 用于 Firefox 和 Opera 的 OGG。
小开

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

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

然后把它当成

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

自动启动

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

另一个插件，播放通知声音的网站: 离子，声音

优点:

  • JavaScript-基于 Web AudioAPI 播放声音的插件，后退到 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");
小开 
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

小开

播放浏览器兼容的通知

正如@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();

希望能帮助别人。

小开

到2016年，以下内容就足够了(你甚至不需要嵌入) :

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

详见 给你。

小开

我们可以把音频和对象放在一起，比如:

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

甚至为 play和 ended加入 addEventListener

小开

我写了一个简洁的演奏声音的函数式方法:

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

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

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

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

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

如果你想通过 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()的地方！


提交答案