版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35388564/article/details/89633904
实现思路：判断浏览器型号版本，js动态添加音频多媒体标签到html，实现自动播放及自动循环（设置属性）。
index.html文件
<!DOCTYPE html>
<html>
<head>
<title>Music</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<button id="todu" onclick="clickTest()">点击一下</button>
<button id="closeMusic" onclick="closeMusic()">关闭音乐</button>
</div>
<span id="alarmMusic" style="position:absolute;z-index:-1"></span>
<script type="text/javascript" src="index.js"></script>
</body>
</html>index.js文件
//判断是否为高版本浏览器
var isHighVersionIE = true;
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
$(document).ready(function(){
//判断是否为高版本浏览器
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0"){
isHighVersionIE = false;
}
})
function clickTest(){
if(isChrome || isHighVersionIE){
var html = '<audio id="player" autoplay="autoplay" loop="true" src="music/101.mp3"/>';
$("#alarmMusic").empty();//动态改变
$("#alarmMusic").html(html);//动态改变
}else{
var html = '<EMBED id="player" src="music/101.mp3" loop="true" width="0" height="0" play="true" loop="false" menu="true" quality="high" type="application/x-shockwave-flash" name="myFlash" swLiveConnect="true" ></EMBED>';
$("#alarmMusic").empty();//动态改变
$("#alarmMusic").html(html);//动态改变
}
}
function closeMusic(){
$("#alarmMusic").empty();//动态改变
}总结：自动播放属性 autoplay，循环属性 loop。