最近公司项目出了个新需求，根据告警事件自动播放对应告警声音（加载对应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>