微信开发之微信微信开发之微信jssdk录音功能开发示例录音功能开发示例
项目需求简单描述项目需求简单描述
用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指
上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器）。注
意，音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的，需要后台
先把amr文件转换成MP3，前端用audio播放。我们公司是购买阿里云的媒体处理服务进行文件转码的。
调用到的微信接口调用到的微信接口
// 开始录音接口
wx.startRecord();
// 停止录音接口
wx.stopRecord({
success: function (res) {
var localId = res.localId;
}
});
// 监听录音自动停止接口
wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
var localId = res.localId;
}
});
// 播放语音接口
wx.playVoice({
localId: '' // 需要播放的音频的本地ID，由stopRecord接口获得
});
// 暂停播放接口
wx.pauseVoice({
localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得
});
// 监听语音播放完毕接口
wx.onVoicePlayEnd({wx.onVoice
success: function (res) {
var localId = res.localId; // 返回音频的本地ID
}
});
// 上传语音接口
wx.uploadVoice({
localId: '', // 需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回音频的服务器端ID
}
});
主要涉及的知识点主要涉及的知识点
//项目用到的框架：vue.js
@touchstart // 手指触碰屏幕，开始长按
@touchend //手指离开屏幕，结束长按
@touchmove //手指在屏幕上滑动
开发流程开发流程
说明：项目用到的框架：Vue
1.引入微信jssdk,做好微信配置
2.HTML结构：
评论1