微信小程序 - 超详细 “长按说话“ 实时语音录制与播放功能,仿微信发语音 “按住说话,松开取消“ 录音...
在微信小程序中实现长按说话功能,可以使用小程序的`
实现长按录音功能首先,需要在页面的wxml文件中添加一个`
```html
```
接下来,在页面的js文件中,需要监听长按录音的`touchstart`和`touchend`事件,并在开始录音时使用`wx.getRecorderManager()`进行录音,结束录音时停止录音并设置语音的本地临时路径,具体代码如下:
```javascriptPage({
data: {
audioSrc: ''
},
startRecord: function() {
this.recorderManager = wx.getRecorderManager();
this.recorderManager.onStart(() => {
console.log('recorder start');
});
this.recorderManager.start({
format: 'mp3'
});
},
stopRecord: function() {
this.recorderManager.stop();
this.recorderManager.onStop((res) => {
console.log('recorder stop', res);
this.setData({
audioSrc: res.tempFilePath });
});
}
});
```
以上代码中使用了`wx.getRecorderManager()`获取录音管理器实例,当用户长按开始录音时,调用`start()`方法开始录音,当用户松开按钮时,调用`stop()`方法停止录音,并通过`onStop`函数获取录制的语音临时路径,并将路径保存在data中。
实现长按播放录音功能接下来,需要实现录制的音频文件实时播放的功能。在wxml文件中给音频组件设置要播放的音频路径,具体代码如下:
```html
```
然后在页面的js文件中监听音频组件的播放事件,当用户长按录音按钮录制好音频后,点击音频组件时就可以触发音频的播放功能,具体代码如下:
```javascriptPage({
data: {
audioSrc: ''
},
startRecord: function() {
// ...
},
stopRecord: function() {
// ...
},
playRecord: function() {
this.audio = wx.createInnerAudioContext();
this.audio.src = this.data.audioSrc;
this.audio.play();
}
});
```
实现上划取消发送功能接下来,需要实现上划取消发送的功能。用户在长按录音时,如果不想发送录制的语音,可以在上划录音按钮的同时取消发送。在wxml文件中给录音按钮添加`bindtouchmove`事件来监听用户的上划操作,具体代码如下:
```html
```
然后在页面的js文件中,需要监听`touchmove`事件,并判断用户的上划操作来取消录音,具体代码如下:
```javascriptPage({
data: {
audioSrc: ''
},
startRecord: function() {
// ...
},
stopRecord: function() {
// ...
},
cancelRecord: function(e) {
if (e.changedTouches[0].pageY <50) {
this.recorderManager.stop();
console.log('cancel record');
}
}
});
```
以上代码中,通过监听`touchmove`事件,当用户的手指在按钮上滑动时,如果滑动的距离超过一定的阈值(例如50px),则取消录音。
总结通过以上步骤,我们就实现了微信小程序中的长按说话功能,包括实时录制语音和播放录制语音的功能,同时还实现了上划取消发送的功能。希望以上内容对你有所帮助,如果还有其他问题,欢迎继续探讨。
语音小程序功能微信小程序按住说话松开取消录音微信小程序录音与播放微信小程序仿微信发语音功能微信小程序长按录音与点击播放微信小程序详细的仿微信发语音小程序按住按钮开始说话松手发送