使用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();
}
})
}
})
全部代碼包