更新记录

1.0.1（2024-09-10） 下载此版本

[修复] 解决类型报错问题 [新增] 兼容Vue2

1.0.0（2024-09-10） 下载此版本

第一个版本

平台兼容性

uni-app

uni-app x

y-bg-music 自动播放背景音乐

仅微信内置浏览器支持，进入页面自动播放。无需“触摸、点击”之类的操作。

使用简单

演示效果

使用微信扫一扫查看效果

使用

Vue2将下述代码放到首页 onLoad 中即可

<script lang="ts" setup>
import { useBgMusic } from '@/uni_modules/y-bg-music/js_sdk';

const bgmusic = useBgMusic({
    src: 'https://superzdd.github.io/wechat-h5-backgound-music-survey/bgmusic.mp3',
    loop: 999,      // 循环次数
    controls:true   // 显示右上角控制元素
});

// 留空也要调用一下，否则无法自动播放
weixin.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: 0, // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '', // 必填，签名，见附录1
    jsApiList: [ ]
});

weixin.ready(() => {
    bgmusic.play(); // 播放～
});
</script>

常见问题

1. 播放控制元素太丑

   答：可以隐藏的，然后自己写一个替代。

参考

技术实现思路来自 superzdd 大佬的开源仓库 微信端H5背景音乐自动播放研究

意见反馈、联系我

绿泡泡：Base1024