微信h5音樂播放與控制
阿新 • • 發佈：2019-02-13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
.music{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div class="music">
<i class="icon-music open" num="1"></i>
<i class="music-span"></i>
</div>
<audio src="bgm.mp3" class="bgm" id="bgm"></audio>
</body>
</html>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){ //監聽DOMContentLoaded事件
//定義播放方法
function audioAutoPlay(){
var audio = document.getElementsByClassName('bgm')[0];//獲取播放源
audio.play();//進行播放
document.addEventListener('WeixinJSBridgeReady',function(){ //新增微信監聽事件
audio.play();//進行播放
},true);
//點選控制音樂播放和暫停
$(".music").click(function(){
if($(".icon-music").attr('num')=='1')
{
$(".icon-music").attr('num',"2");
$(".music").css("background","blue");
audio.pause();
}
else
{
$(".icon-music").attr('num',"1");
$(".music").css("background","red");
audio.play();
}
});
}
audioAutoPlay();
})
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
.music{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div class="music">
<i class="icon-music open" num="1"></i>
<i class="music-span"></i>
</div>
<audio src="bgm.mp3" class="bgm" id="bgm"></audio>
</body>
</html>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){ //監聽DOMContentLoaded事件
//定義播放方法
function audioAutoPlay(){
var audio = document.getElementsByClassName('bgm')[0];//獲取播放源
audio.play();//進行播放
document.addEventListener('WeixinJSBridgeReady',function(){ //新增微信監聽事件
audio.play();//進行播放
},true);
//點選控制音樂播放和暫停
$(".music").click(function(){
if($(".icon-music").attr('num')=='1')
{
$(".icon-music").attr('num',"2");
$(".music").css("background","blue");
audio.pause();
}
else
{
$(".icon-music").attr('num',"1");
$(".music").css("background","red");
audio.play();
}
});
}
audioAutoPlay();
})
</script>