<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
网友回复
webrtc进行p2p连接发送的文本音视频文件是否是加密的?
如何让一个可爱的三维动物通过three在浏览器中有表情动作的自然说话?
go与wails如何开发一个高性能的原生桌面应用?
python如何调用openai的api实现知识讲解类动画讲解视频的合成?
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报?
f12前端调试如何找出按钮点击事件触发的那段代码进行调试?
abcjs如何将曲谱播放后导出mid和wav格式音频下载?
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式?
js在HTML中如何将曲谱生成音乐在线播放并下载本地?