微信内自动播放音乐(移动端)
转载地址 地址
<audio autoplay="autoplay" id="music">
<source src="./music.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
function autoPlay(src) {
const audio = new Audio();
// 该元素用来在页面上控制音乐的播放和暂停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次触摸结束后开始播放音乐
document.addEventListener("touchend", () => {
if (played) return;
if (audio.paused) {
played = true;
audio.play();
}
})
// 兼容微信
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
played = true;
audio.play();
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
played = true;
audio.play();
});
}, false);
}
// 控制音乐的播放和暂停
musicEle.addEventListener("click", function () {
if (audio.paused) {
this.className = "on";
audio.play();
} else {
this.className = "off"
audio.pause();
}
})
}
autoPlay("./music.mp3");