最近公司項目出了個新需求，根據告警事件自動播放對應告警聲音（加載對應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>