标签:case vue 浏览器 tiptext 录音 writeError time recorder
在项目vue中遇到使用浏览器实现录音功能
要在https下才能实现! 要在https下才能实现!! 要在https下才能实现!!!
如果不是https,解决方案 https://www.cnblogs.com/Sabo-dudu/p/12449985.html
注意: 这里输入的文件格式为mp3,因为 wav格式的文件太大了。
项目是基于 vue-cli3 的pc端应用
1. 下载文件,下载完成后把它放在 根目录 public 文件夹下。
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 格式很小,便于上传。
标签:case,vue,浏览器,tiptext,录音,writeError,time,recorder 来源: https://www.cnblogs.com/Sabo-dudu/p/13566170.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。