小程序停止html5音乐,小程序录音，上传，播放，暂停播放

最近在做小程序，需求有上传录音，并且上传多条音频成功后，可以播放，暂停。刚开始接到时，感觉头都大了。但是还好小程序文档的api也很全面

1.上传功能

image.png

按住说话

const recorderManager = wx.getRecorderManager();

//监听事件 按住说话

sayVideo: function(e) {

//按住说话

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) {

//没有授权

wx.authorize({

scope: 'scope.record',

success() {

console.log("录音授权成功");

//第一次成功授权后 状态切换为2

that.setData({

status: 2,

})

},

fail() {

wx.openSetting({

success: (res) => {

console.log(res.authSetting);

if (!res.authSetting['scope.record']) {

//未设置录音授权

console.log("未设置录音授权");

wx.showModal({

title: '提示',

content: '您未授权录音，功能将无法使用',

showCancel: false,

success: function(res) {},

});

} else {

//第二次才成功授权

console.log("设置录音授权成功");

that.setData({

status: 2,

})

recorderManager.start(options);

}

},

fail: function() {

console.log("授权设置录音失败");

}

})

}

});

}else{

recorderManager.start(options);

}

}

3.松开上传

//松开

sayVideoEnd: function (e) {

var that= this;

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

recorderManager.onStop((res) => { //监听录音停止的事件

if (res.duration < 1000) {

api.showToast('录音时间太短');

return;

} else {

wx.showLoading({

title: '发送中...',

});

var tempFilePath = res.tempFilePath; // 文件临时路径

var temp = tempFilePath.replace('.mp3', '') //转换格式 默认silk后缀

wx.uploadFile({

url: '*****', //上传服务器的地址

filePath: tempFilePath, //临时路径

name: 'file',

header: {

contentType: "multipart/form-data", //按需求增加

},

formData: null,

success: function (res) {

wx.hideLoading();

},

fail:function(err){

wx.hideLoading();

console.log(err.errMsg);//上传失败

}

});

}

});

},

4.获取上传成功后音频数据进行播放，暂停。/需全局 创建内部 audio 上下文 [InnerAudioContext]，参考文档

const recorderManager = wx.getRecorderManager();

//播放 或是暂停语音

playAudio: function (e) {

// 因全局已经 注册过上下文 直接用innerAudioContext就可以

// 在wxml中 需要传 data-item="{{item}}" 循环出来的当前信息

let item = e.currentTarget.dataset.item;

//音频地址

innerAudioContext.src = item.AudioSrc;

//在ios下静音时播放没有声音，默认为true，改为false就好了。

innerAudioContext.obeyMuteSwitch = false;

if (item.isPlay === false) {

//点击播放

innerAudioContext.play();

} else {

//点击暂停

innerAudioContext.stop();

};

// //播放结束

innerAudioContext.onEnded(() => {

innerAudioContext.stop();

});

},

以上就是上传，播放，暂停功能。还有很多细节，就要根据自己的需求来改写了。希望可以帮助到你们，也欢迎大家前来指点！