h5 音乐播放案列记录

项目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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值