谷歌浏览器自动播放音频且可动态切换音频路径
Posted fmixue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌浏览器自动播放音频且可动态切换音频路径相关的知识，希望对你有一定的参考价值。
最近公司项目出了个新需求，根据告警事件自动播放对应告警声音（加载对应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>
以上是关于谷歌浏览器自动播放音频且可动态切换音频路径的主要内容，如果未能解决你的问题，请参考以下文章