手机微信中也能播放mp3音乐的方法(测试通过的html源代码)

最新推荐文章于 2023-03-15 16:49:37 发布

敦厚的曹操

最新推荐文章于 2023-03-15 16:49:37 发布

阅读量1.8k

点赞数

分类专栏： 16.【Html5】 3.【javascript】 2.【Asp.Net】 4.【html】 6.【jquery】文章标签： html h5 mp3

2.【Asp.Net】同时被 3 个专栏收录

130 篇文章 3 订阅

订阅专栏

6.【jquery】

96 篇文章 0 订阅

订阅专栏

3.【javascript】

88 篇文章 1 订阅

订阅专栏

<html>
<head lang="en">
<meta charset="UTF-8">
<title>微信中也能播放mp3</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>

<audio id="music" loop="loop" style="display: none;"></audio>


<div id="btn-music" >

<a class="aui-pull-left aui-btn" href='javascript:void(0)' οnclick="play_on()" >

<img src="btn_music_on.png" alt="" id="btn-music-on" />

</a>
<a class="aui-pull-left aui-btn" href='javascript:void(0)' οnclick="play_off()" >
<img src="btn_music_off.png" alt="" id="btn-music-off" class="hide" />
</a>
</div>

<script>
var c = document.getElementById("music");
c.src = "mp3.mp3";
c.play();
//处理微信的时候
document.addEventListener("WeixinJSBridgeReady", function () {
if (typeof WeixinJSBridge == "object") {
WeixinJSBridge.invoke("getNetworkType", {}, function (j) {
c.play();
})
}
});
music_state = 1;
//音乐按钮

</script>

<script>

function play_on() {
c.play();
music_state = 1;
$("#btn-music-on").removeClass("hide");
$("#btn-music-off").addClass("hide");

}

function play_off() {
alert("off");
c.pause();
music_state = 0;
$("#btn-music-off").removeClass("hide");
$("#btn-music-on").addClass("hide");
}
</script>

</body>

</html>

【提醒】：里边的图片和mp3文件需要对应你自己的图片和mp3文件。