wx.createInnerAudioContext多个音频播放

线条猫

已于 2023-02-22 17:40:31 修改

阅读量3.2k

点赞数 3

分类专栏：微信小程序

于 2021-12-03 11:42:56 首次发布

本文链接：https://blog.csdn.net/weixin_51172395/article/details/121695039

版权

微信小程序音频播放 InnerAudioContext 事件处理网络音频

关键词由CSDN通过智能技术生成

微信小程序专栏收录该内容

1 篇文章

订阅专栏

想做一个页面里多种小鸟，点不同的鸟播放不同的声音。一般都是用audio，但小程序文档提示：音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口。

InnerAudioContext | 微信开放文档

结果发现这文档写的真好啊，如同没写一般。

废话不多说，上代码。

循环出来的按钮，只是测试所以没用图片按钮。

注意：大坑1，OnLoad里注册一次就够，很多文章都写播放事件里了。

大坑2，地址必须是网络的，本地的audio好使，但这个不好使，我准备用七牛云。

js里先按文档声明 const audio2 = wx.createInnerAudioContext();

点击的时候换个src就行了，正在播放的声音自动就停了。控制指令老样子，播放play(),暂停pause(),停止stop()。其他的有需要的自己开发吧，短音频只需要play()就够了。

onLoad: function (options) {
        audio2.onPlay(() => {
            console.log("开始播放");
        })
        audio2.onStop(() => {
            console.log("播放结束");
        })
        // audio2.onWaiting(() => {
        //     console.log("缓冲中");
        // })
        // audio2.onEnded(() => {
        //     console.log("播放完毕");
        // })
        // audio2.onError((res) => {
        //     console.log("网络出错，请稍后再试");
        // })
},
playSound(e){
        let sound = e.currentTarget.dataset.sound;
        audio2.src = sound;
        audio2.play();
},

分享使我进步，让我快乐