<template>
<view class="audioPlay">
<button @click="startRecord">开始录音</button>
<button @tap="endRecord">停止录音</button>
<button @tap="playVoice">播放录音</button>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
data() {
return {
recorderManager: {},
innerAudioContext: {},
text: 'uni-app',
voicePath: ''
}
},
onLoad() {
innerAudioContext.autoplay = true;
console.log("uni.getRecorderManager()",uni.getRecorderManager())
console.log("uni.createInnerAudioContext()",uni.createInnerAudioContext())
let self = this;
recorderManager.onStop(function (res) {
console.log('recorder stop' + JSON.stringify(res));
self.voicePath = res.tempFilePath;
});
},
methods: {
startRecord() {
console.log('开始录音');
recorderManager.start();
},
endRecord() {
console.log('录音结束');
recorderManager.stop();
},
playVoice() {
console.log('播放录音');
if (this.voicePath) {
innerAudioContext.src = this.voicePath;
innerAudioContext.play();
}
}
}
}
</script>
以上代码不支持生成h5页面的录音,如果想要h5录音的话,需要在localhost或https安全写一下,我们可以使用js audio recorder这款插件,还有一款叫recorder-cor。e
js audio recorder主要用于Web端录制短音频。
支持录音,暂停,恢复,和录音播放。
支持音频数据的压缩,支持单双通道录音。
支持录音时长显示。
支持导出录音文件,格式为pcm或wav。
支持录音波形显示,可自己定制。
+ npm方式:
安装:
npm i js-audio-recorder
调用:
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();
#### 基本用法
// 开始录音 recorder.start(); // 暂停录音 recorder.pause(); // 继续录音 recorder.resume() // 结束录音 recorder.stop(); // 录音播放 recorder.play(); // 销毁录音实例,释放资源,fn为回调函数, recorder.destroy(fn); recorder = null;
#### 直接获取录音数据
// 获取 PCM 数据(Blob) recorder.getPCMBlob(); // 获取 WAV 数据(Blob) recorder.getWAVBlob();
#### 下载功能
// 下载pcm文件 recorder.downloadPCM(); // 下载wav文件 recorder.downloadWAV(); // 重命名pcm文件,wav也支持 recorder.downloadPCM('重命名');
#### 获取录音时长
// 回调持续输出时长 recorder.onprocess = function(duration) { console.log(duration); } // 手动获取录音时长 console.log(recorder.duration);
#### 录音波形显示
recorder.getRecordAnalyseData();
返回的是一个1024长的,0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。
#### 播放外部音频文件
Recorder.playAudio(/ 放入blob数据 /);
支持的音乐格式由浏览器的audio支持的类型决定。
#### 默认配置
sampleBits,采样位数,默认是16
sampleRate,采样频率,浏览器默认的,我的chrome是48000
numChannels,声道数,默认是1
网友回复