最近公司项目出了个新需求,根据告警事件自动播放对应告警声音(加载对应mp3文件),发现audio谷歌浏览器中无法自动播放,火狐就没有问题,查了资料,看了半天,曲线救国一下:
具体思路如下:在指定文件夹中放置对应.mp3格式文件,然后根据文件名去动态切换audio的src,切记不要在source中切换src,你会发现根本不起作用;然后告警来临时,触发播放方法,告警消失暂停播放;
正常播放音频:
<audio src="../xxx.mp3" id="audio"></audio>
<script>
var audio = document.getElementById('audio');
audio.play();
</script>
这是最简单的音频播放代码,在谷歌浏览器中会抛出异常:Uncaught (in promise) DOMException...
有个细节需要注意下:动态切换音频的src属性,在js中改变src我发现不起作用,然后换为jq,attr获取就可正常切换;
以下是业务代码,仅供参考;
<!--
* @Description:
* @Project: 音频播放
* @Author: fanmixue
* @Date: 2020-06-25 01:00:27
* @LastEditors: fanmixue
* @LastEditTime: 2020-06-28 21:30:11
* @Modified By: fanmixue
* @FilePath: /audio/index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./jquery.js"></script>
<body>
<audio src="./12946.mp3" muted autoplay loop id="audio" ></audio>
</body>
</html>
<script>
/*
* muted 静音
* autoplay 自动播放
* loop 循环播放
* 初始化autoplay且静音播放,到了需要播放的时候通过打开音量
* 注意在js里切换音频src我发现不起作用,用了jq才好使,有大牛知道为什么吗
*/
//以下注释部分是在网上找到的资料,记录下
// var audio = document.getElementById('audio');
// var t1 = 3e3;//如果是轮询,这个时间必须大于音频的长度。如果是webscoket,应该设置一个状态play,避免重复播放,如下:3e3表示3的3次方
// var t2 = 2500;//音频的长度,确保能够完整的播放给用户
// var play = false;
// function run(){
// if(play){
// return false;
// }
// audio.currentTime = 0;//设置播放的音频的起始时间
// audio.volume = 1;//设置音频的声音大小
// audio.muted = false;//关闭静音状态
// play = true;
// setTimeout(function(){
// play = false;
// audio.muted = true;//播放完毕,开启静音状态
// },t2);
// }
// setInterval(function(){
// run();//假装在轮询服务器,或者从websocket拉取数据
// },t1);
//以下为自己修改后,动态切换音频路径,且在谷歌。火狐。ie8+ 实测好使
var prevAlarmName = null,//上一次告警名称
play = false; //状态play,避免重复播放
function playAlarmVoice(alarmName) {
console.log('当前播放的是',alarmName +'防区!');
if (alarmName && alarmName != prevAlarmName) {
//项目中mp3文件目录
var path = "./"+alarmName+".mp3";
$('#audio').attr('src',path);
var music = $('#audio').get('0');
console.log(music)
music.oncanplay = function(){
if(play){return false;}
music.currentTime = 0;//音频起始时间
music.volume = 1; //设置音频声音大小
music.muted = false;//关闭静音状态
play = true;
setTimeout(function(){
play = false;
music.muted = true;//播放完毕,开启静音状态
console.log(111)
},250);
}
}
prevAlarmName = alarmName;
}
setInterval(function() {
playAlarmVoice('12946');
},3000)
//暂停播放
function stopAlarmVoice() {
setTimeout(function(){
document.getElementById("audio").pause();
console.log('暂停成功!');
},1000)
};
</script>