项目vue + vant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<body>
<div οnclick="stopMusic()">停止</div>
<br>
<br>
<br>
<div οnclick="startMusic()">播放</div>
<script>
const context = new (window.AudioContext || window.webkitAudioContext);
const source = context.createBufferSource();
fetch('https://community.issmart.com.cn/frontend/h5/2019Huawei_EPC/music/music.mp3')
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
// 播放声音
source.buffer = audioBuffer;
source.connect(context.destination);
source.loop = true;// 循环播放
if (window.WeixinJSBridge) {
window.WeixinJSBridge ? window.WeixinJSBridge.invoke("getNetworkType", {}, e => {
source.start();
}, !1) : document.addEventListener("WeixinJSBridgeReady", () => {
window.WeixinJSBridge.invoke("getNetworkType", {}, e => {
source.start();
}, !1)
}, !1)
} else {
source.start();
}
});
function stopMusic() {
context.suspend();
}
function startMusic() {
context.resume();
}
</script>
</body>
</html>