最近在做小程序，需求有上傳錄音，并且上傳多條音頻成功后，可以播放，暫停。剛開(kāi)始接到時(shí)，感覺(jué)頭都大了。但是還好小程序文檔的api也很全面

1.上傳功能

image.png

 <view bindtouchstart='sayVideo'  bindtouchend="sayVideoEnd">按住說(shuō)話</view >

2.用觸控事件，來(lái)監(jiān)聽(tīng)按住說(shuō)話。松開(kāi)發(fā)送。首先要獲取全局唯一的錄音管理器 RecorderManager。參考文檔
(https://developers.weixin.qq.com/miniprogram/dev/api/RecorderManager.html)

   const recorderManager = wx.getRecorderManager();

  //監(jiān)聽(tīng)事件 按住說(shuō)話

  sayVideo: function(e) {

    //按住說(shuō)話
    sayVideo: function(e) {

        var that = this;

        const options = {
            duration: 60000,
            sampleRate: 16000,
            numberOfChannels: 1,
            encodeBitRate: 96000,
            format: 'mp3',
            frameSize: 50
        };

        if (this.data.status != 2) {
            //沒(méi)有授權(quán)
            wx.authorize({

                scope: 'scope.record',

                success() {

                    console.log("錄音授權(quán)成功");

                    //第一次成功授權(quán)后 狀態(tài)切換為2
                    that.setData({
                        status: 2,
                    })
                },
                fail() {

                    wx.openSetting({

                        success: (res) => {

                            console.log(res.authSetting);

                            if (!res.authSetting['scope.record']) {
                                //未設(shè)置錄音授權(quán)
                                console.log("未設(shè)置錄音授權(quán)");
                                wx.showModal({
                                    title: '提示',
                                    content: '您未授權(quán)錄音，功能將無(wú)法使用',
                                    showCancel: false,
                                    success: function(res) {},
                                });
                            } else {
                                //第二次才成功授權(quán)
                                console.log("設(shè)置錄音授權(quán)成功");
                                that.setData({
                                    status: 2,
                                })
                                recorderManager.start(options);
                            }
                        },
                        fail: function() {
                            console.log("授權(quán)設(shè)置錄音失敗");
                        }
                    })
                }

            });
        }else{
            recorderManager.start(options);
        }
    }

3.松開(kāi)上傳

  //松開(kāi)
    sayVideoEnd: function (e) {
        var that= this;

        recorderManager.stop(); //先停止錄音

        recorderManager.onStop((res) => {  //監(jiān)聽(tīng)錄音停止的事件

            if (res.duration < 1000) {
                api.showToast('錄音時(shí)間太短');
                return;
            } else {
                wx.showLoading({
                    title: '發(fā)送中...',
                });

                var tempFilePath = res.tempFilePath; // 文件臨時(shí)路徑
                var temp = tempFilePath.replace('.mp3', '') //轉(zhuǎn)換格式 默認(rèn)silk后綴

                wx.uploadFile({

                    url: '*****', //上傳服務(wù)器的地址
                    filePath: tempFilePath, //臨時(shí)路徑
                    name: 'file',
                    header: {
                        contentType: "multipart/form-data", //按需求增加
                    },
                    formData: null,
                    success: function (res) {
                        wx.hideLoading();
                    },
                    fail:function(err){
                        wx.hideLoading();
                        console.log(err.errMsg);//上傳失敗
                    }
                });
            }

        });
    },

4.獲取上傳成功后音頻數(shù)據(jù)進(jìn)行播放，暫停。/需全局 創(chuàng)建內(nèi)部 audio 上下文 [InnerAudioContext]，參考文檔

(https://developers.weixin.qq.com/miniprogram/dev/api/InnerAudioContext.html)

const recorderManager = wx.getRecorderManager();

//播放 或是暫停語(yǔ)音
    playAudio: function (e) {

        // 因全局已經(jīng) 注冊(cè)過(guò)上下文 直接用innerAudioContext就可以
       
        // 在wxml中 需要傳 data-item="{{item}}"  循環(huán)出來(lái)的當(dāng)前信息
        let item = e.currentTarget.dataset.item;  

        //音頻地址
        innerAudioContext.src = item.AudioSrc;
       
        //在ios下靜音時(shí)播放沒(méi)有聲音，默認(rèn)為true，改為false就好了。
        innerAudioContext.obeyMuteSwitch = false;  

        if (item.isPlay === false) {

            //點(diǎn)擊播放
            innerAudioContext.play();

        } else {
            //點(diǎn)擊暫停
            innerAudioContext.stop();
        };

        // //播放結(jié)束
        innerAudioContext.onEnded(() => {
            innerAudioContext.stop();
        });

    },

以上就是上傳，播放，暫停功能。還有很多細(xì)節(jié)，就要根據(jù)自己的需求來(lái)改寫(xiě)了。希望可以幫助到你們，也歡迎大家前來(lái)指點(diǎn)！