vue 使用浏览器实现录音功能
在项目vue中遇到使用浏览器实现录音功能
要在https下才能实现！ 要在https下才能实现！！ 要在https下才能实现！！！
如果不是https，解决方案 https://www.cnblogs.com/Sabo-dudu/p/12449985.html
注意: 这里输入的文件格式为mp3，因为 wav格式的文件太大了。
项目是基于 vue-cli3 的pc端应用
1. 下载文件，下载完成后把它放在 根目录 public 文件夹下。
下载地址 链接: https://pan.baidu.com/s/1lSve9B5zbCS21TzOEAhm8w 提取码: qf69
2. 然后在 index.html 中全局引入
<script type="text/javascript" src="/recorder/js/recorder.js"></script>
3. 创建组件 mRecorder.vue
<template><div class="wrap-recorder">
<el-row>
<el-col>
<svg
@click="handleClick"
:class="[\'icon\', {anirecorder: recording } ]"
t="1581399509621"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3242"
width="50"
height="50"
>
<path
d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32z m16 623.2V736h48a16 16 0 0 1 0 32h-128a16 16 0 0 1 0-32h48v-80.8A160 160 0 0 1 352 496a16 16 0 0 1 32 0 128 128 0 0 0 256 0 16 16 0 0 1 32 0 160 160 0 0 1-144 159.2zM512 592a96 96 0 0 1-96-96v-144a96 96 0 0 1 192 0v144a96 96 0 0 1-96 96z m64-240a64 64 0 0 0-128 0v144a64 64 0 0 0 128 0v-144z"
p-id="3243"
fill="#707070"
/>
</svg>
</el-col>
</el-row>
<p class="tip">{{ tiptext }}</p>
</div>
</template>
<script>
export default {
data() {
return {
tiptext: "点击录音",
recording: false, // 标记是否在录音
intervaltimerid: "", // 间隔时间定时器编号
recorder: null,
time: 0
};
},
mounted() {
this.init();
},
methods: {
init() {
this.recorder = new MP3Recorder({
//numChannels: 1, //声道数,默认为1
//sampleRate: 8000, //采样率,一般由设备提供,比如 48000
bitRate: 128, //比特率,不要低于64,否则可能录制无声音（人声）
//useMediaRecorder: true, //是否使用MediaRecorder录音（不支持转码为mp3文件）
//recorderType: "video/webm;codes=vp9", //默认编码，仅 useMediaRecorder 为true且浏览器支持时生效
//录音结束事件
complete: (blob, ext) => {
var url = URL.createObjectURL(blob);
this.$emit("handleStop", {
url: url,
mblob: blob
});
}
});
},
// 点击处理
handleClick() {
//录音支持检测
if (!this.recorder.support) return;
this.recording = !this.recording;
this.$emit("handleStop", {
url: "",
mblob: null,
});
if (this.recording) {
this.time = 0;
this.tiptext = "录音中 " + this.time + "s";
this.recorder.start(this.successFun(), this.errorFun());
} else {
clearInterval(this.intervaltimerid);
this.recorder.stop();
this.tiptext = "点击录音";
}
},
writeError() {},
successFun() {
this.intervaltimerid = setInterval(() => {
// 开始累积
if (this.time == 120) {
this.recorder.stop();
this.recording = false;
this.tiptext = "点击录音";
this.$message.warning("对不起，录音只支持120秒以内的语音！");
clearInterval(this.intervaltimerid);
return false;
}
this.time = this.time + 1;
this.tiptext = "录音中 " + this.time + "s";
}, 1000);
},
errorFun(e) {
// clearInterval(this.intervaltimerid);
// switch (e.code || e.name) {
// case "PERMISSION_DENIED":
// case "PermissionDeniedError":
// // this.writeError("用户拒绝提供设备。");
// break;
// case "NOT_SUPPORTED_ERROR":
// case "NotSupportedError":
// // this.writeError("浏览器不支持硬件设备。");
// break;
// case "MANDATORY_UNSATISFIED_ERROR":
// case "MandatoryUnsatisfiedError":
// // this.writeError("无法发现指定的硬件设备。");
// break;
// default:
// // this.writeError(
// // "无法打开麦克风。异常信息:" + (e.code || e.name)
// // );
// break;
// }
}
}
};
</script>
<style scoped lang="scss">
.wrap-recorder {
text-align: center;
.icon {
cursor: pointer;
}
.tip {
padding-top: 20px;
}
}
.anirecorder {
position: relative;
animation: mymove 5s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes mymove {
0% {
transform: scale(1); /*开始为原始大小*/
}
25% {
transform: scale(1.1); /*放大1.1倍*/
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.1);
}
}
</style>
View Code
4. 然后引入该组件
<MRecorder @handleStop="handelEndRecord" />methods：{
// 录音处理结束事件
handelEndRecord(param) {
this.msource = param;
},
}
整个流程就完成了，生成的mp3 格式很小，便于上传。
以上是 vue 使用浏览器实现录音功能 的全部内容， 来源链接： utcz.com/z/376666.html
