小程序實現錄音,輸出聲音波形圖

使用Ffpgem ,silk-v3-decoder,wavesurfer。

一:用php後臺來輸出波形圖,可查看資源包對應的wavToImg.php(沒有第二種準確)

二:使用小程序web-view,通過wavesurfer來實現。因爲小程序不支持繪圖。

以上兩種方法都需要注意:

如果不是真機測試,則不需要silkdecode.php,小程序錄音silk文件需要base64解碼。php_cmd.php用來執行ffpgem。 silk轉wav。wavToImg.php則用來繪圖。

真機測試則不需要silk-decoded。

注意:真機測試不需要

先看效果圖:

小程序index.js:

//index.js
//獲取應用實例
var app = getApp()
Page({
    data: {
        motto: 'Hello World',
        record_tmpfile: '', // 最近一次錄音的臨時文件路徑;
        record_ms: '', // 錄音的毫秒數
        uploaded_url: '', // 已上傳文件的路徑;
        userInfo: {},
        img_l: ''
    }, 
  gotoImg:function(e){ 
        wx.redirectTo({
          url: "/pages/playImg/playImg"
        })
      
  },
    // 錄音功能: 
    handleRecordStart: function(e) {
        const that = this
        const timeStart = Date.now(); 
        wx.startRecord({
            success: function(res) {
                console.log('record success res: ', res.tempFilePath);
                // uploaded_url = res.tempFilePath;
                that.setData({
                    uploaded_url: res.tempFilePath
                })
                var tempFilePath = res.tempFilePath
                that.setData({
                    record_tmpfile: tempFilePath,
                    record_ms: Date.now() - timeStart,
                });
            },
            fail: function(res) {
                //錄音失敗
                console.log('record fail res: ', res);
                wx.stopRecord();
                if (res.errMsg.indexOf('auth') >= 0) {
                    wx.showModal({
                        title: '無法錄音',
                        content: '您已經拒絕訪問麥克風,無法使用錄音功能,如需使用,請刪除此小程序,並重新搜索打開',
                        showCancel: false,
                    });
                } else {
                    wx.showToast({
                        title: '未知錯誤',
                    })
                }

            }
        })
        setTimeout(function() {
            //結束錄音  
            wx.stopRecord()
        }, 60000);
    },

    // 停止錄音: 
    handleRecordEnd: function(e) {
        wx.stopRecord()
    },

    // 播放錄音: 
    handlePlayVoice: function() {
        console.log('start play voice');
        wx.playVoice({
            filePath: this.data.record_tmpfile,
        })
    },
fenxi:function(){
  
},
    handleUploadVoice: function() {
        const { record_tmpfile, record_ms } = this.data;
        wx.showLoading({ title: '上傳中' });
        const that = this;
        wx.uploadFile({
          url: app.api_url + 'silk-v3-decoder/silkToWav.php',
            filePath: record_tmpfile,
            name: 'file',
            formData: {
                audio_ms: record_ms,
            },
            success: function(res) {
                wx.hideLoading();
                var data = res.data
                console.log('upload_res: ', res);
                const data2 = JSON.parse(res.data);
                console.log('upload res data2: ', data2);
                //do something
                let toastTitle = '上傳成功';
                if (data2.c != 0) {
                    toastTitle = data2.m;
                } else {
                    that.setData({ uploaded_url: data2.d });
                }
                setTimeout(function() {
                    wx.showToast({ title: toastTitle });
                }, 500);
            },
            fail: function(res) {
                wx.hideLoading();

            }
        })
    }
})

全部代碼包

https://download.csdn.net/download/coder_daiwang/10883947

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章