Tim*_*imo 95 html javascript audio notifications html5-audio
当某个事件发生时,我希望我的网站向用户播放简短的通知声音.
声音应该不自动启动(瞬间)当网站被打开.相反,它应该通过JavaScript按需播放(当某个事件发生时).
重要的是,这也适用于旧浏览器(IE6等).
所以,基本上有两个问题:
<embed>vs. <object>vs. vs. vs. <audio>)Tim*_*imo 93
此解决方案适用于几乎所有浏览器(即使没有安装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>
dch*_*cke 63
截至2016年,以下内容就足够了(您甚至不需要嵌入):
let audio = new Audio('/path/to/audio/file.mp3');
audio.play();
在这里查看更多.
Cas*_*dim 15
还有一个插件,用于在网站上播放通知声音:Ion.Sound
好处:
设置插件:
// 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");
播放跨浏览器兼容的通知
正如 @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();
希望能帮助某人。
雅虎的媒体播放器怎么样？只需嵌入雅虎的图书馆
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
并像这样使用
<a id="beep" href="song.mp3">Play Song</a>
自动启动
$(function() { $("#beep").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()某个地方！