最近在準(zhǔn)備做一個(gè)錄音倒放小程序的時(shí)候，遇到了點(diǎn)問題，就在這里做一下筆記，踩一下坑。
我這里采用的是基于vue開發(fā)的uniapp的前端框架來開發(fā)小程序。uniapp里面也集成封裝了微信小程序的API接口，只需要把之前的wx.createInnerAudioContext()的wx，替換成uni就可以使用相同的API。
對(duì)比一下差別：詳情可以參考uniapp的官方文檔、小程序的官方文檔

    //uniapp
    methods: {
        clickPlay(){
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = true;
            innerAudioContext.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
            innerAudioContext.onPlay(() => {
              console.log('開始播放');
            });
            innerAudioContext.onError((res) => {
              console.log(res.errMsg);
              console.log(res.errCode);
            });
        },
    }

    //wx
    methods: {
        clickPlay() {
            const innerAudioContext = wx.createInnerAudioContext();
            innerAudioContext.autoplay = true;
            innerAudioContext.src =
                'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46';
            innerAudioContext.onPlay(() => {
                console.log('開始播放');
            });
            innerAudioContext.onError(res => {
                console.log(res.errMsg);
                console.log(res.errCode);
            });
        }
    }

我們使用上面的代碼，每次進(jìn)行點(diǎn)擊事件調(diào)用這個(gè)方法，會(huì)不斷的生成innerAudioContext實(shí)例，就會(huì)導(dǎo)致點(diǎn)一下會(huì)放一次，點(diǎn)兩下會(huì)疊在一起，點(diǎn)個(gè)十幾下估計(jì)會(huì)成為混沌的噪音。解決的方法就是把生成實(shí)例放在export default上面。

const innerAudioContext = uni.createInnerAudioContext();
export default {
    data() {
        return {};
    },
    onLoad() {},
    mounted() {},
    methods: {
        clickPlay() {           
            innerAudioContext.autoplay = true;
            innerAudioContext.src =
                'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
            innerAudioContext.onPlay(() => {
                console.log('開始播放');
            });
            innerAudioContext.onError(res => {
                console.log(res.errMsg);
                console.log(res.errCode);
            });
        }
    }
};

后續(xù)問題接著更新