录音两种实现方式
功能
录音,暂停,继续.播放录音.下载录音(wav格式),重新录音
开始录音
调用麦克风
先检查电脑麦克风配置
// 指定参数
let recorder // react刷新的时候,会把reacorder重置,暂时声明在组件外,
const audioObj = {
video: false,
audio: true,
};
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
try {
const stream = await navigator.mediaDevices.getUserMedia(audioObj);
if (stream.active) {
recorder = new Recorder();
recorder.start(); // 开始录音
}
} catch (err) {
console.log(err);
}
} else {
alert(没有麦克风配置);
}
// mediaDevices 里有开始,暂停等方法,使用过程中,麦克风录音经常没声音,暂停继续录音,最后总时长会缺失,后发现 Recorde,比较全面,录音时改用此插件,
暂停
recorder.pause();
继续
recorder.resume();
确认录音
使用audio标签播放录音
<audio className={css.audioWidth} controls><source src={}}></source></audio>
// control显示播放录音控件 controlsList="nodownload" 关闭控件自带下载按钮
获取录音文件 格式转换
// 使用FileReader 读取文件
const blob = recorder.getWAVBlob();
// 获取wav格式文件,属性有size,type
// 使用FileReader 读取文件
const reader: any = new FileReader();
reader.readAsDataURL(blob);
reader.addEventListener(
"load",
(ev: any) => {
var mp3 = ev.target.result;
if (!mp3 || mp3.length < 6) {
console.log("error", "提示", "暂无录音文件", 3);
return;
}
// ev.target.result 就是audio的src属性需要的值
下载录音
recorder.downloadWAV("audio"); // audio是文件名
重新录制
recor 清空 audio上的src属性值清空
计时器
let timer
let totalTime = 0
const startTimer = () => {
timer = setInterval(function () {
totalTime += 41;
setTimePiece(showTime(totalTime));
}, 41);
};
const showTime = (time: number) => {
let min: number | string;
let second: number | string;
// var msecond;
second = Math.floor((time / 1000) % 60);
min = Math.floor((time / 1000 / 60) % 60);
second = second % 60 < 10 ? "0" + second : second;
min = min % 60 < 10 ? "0" + min : min;
return min + ":" + second;
};
暂停计时
clearInterval(timer);
timer = null;
清空计时
clearInterval(timer);
timer = null;
totalTime = 0;
踩到的坑
因为项目是使用iframe嵌套进去的,iframe禁止了麦克风的权限,在iframe上添加此属性就可解决
allow="microphone;camera;midi;encrypted-media;"