wx.createInnerAudioContext多个音频播放

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

InnerAudioContext | 微信开放文档

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

废话不多说,上代码。

2播放

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

wx.createInnerAudioContext多个音频播放_第1张图片

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

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


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

wx.createInnerAudioContext多个音频播放_第2张图片

 点击的时候换个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();
},

分享使我进步,让我快乐

你可能感兴趣的:(微信小程序,微信小程序,前端)