Vue⽹页录⾳，js录⾳mp3
在⽹上到关于HTML5的录⾳教程，但是发现转成Vue的时候报错了。所以写⼀下解决⽅法。
本⽂是在此⽂的基础上进⾏修改的，使⽤了recorder.js和worker.js。同时因为Vue不到worker.js⽂件，所以修改了部分源码，最终实现。其中坑多多，各位注意踩坑。
⾸先是Vue的⽂件。
进⾏说明：recordercopy为修改后的recorder.js，由于是⽗⼦组件关系，所以按钮是通过isStart的true和false来实现触发点击事件的。limit 是限制加载时候直接进⼊导致报错。同时，返回blobx⽂件到⽗组件。
<template>
<div>
</div>
</template>
<script>
import Recorder from'../../js/recordercopy'
export default{
name:"audioState",
props:{
isStart:{
type: Boolean,
default:false,
},
},
data(){
return{
recorder:{},
limit:0
};
},
methods:{
github(){
der.start){
let blobx ={}
if(this.isStart){
this.limit =1
}else{
if(this.limit ==0)return
new Promise((resolve, reject)=>{
// ⼀段耗时的异步操作
blobx = blob
let download = ateElement("a");
download.href =ateObjectURL(blob);
download.download =`视频对话录⾳.mp3`;
download.click();
console.log('打印结束:',blobx)
resolve(blobx)// 数据处理完成
});
// reject('失败') // 数据处理出错
}
).then(
(res)=>{
this.$emit("wavHref", res);
},// 成功
(err)=>{console.log(err)}// 失败
)
}
}else{
this.github()
}
}
},
watch:{
isStart(x){
this.github();
},
},
mounted(){
sampleRate:44100,//采样频率，默认为44100Hz(标准MP3采样率)
bitRate:128,//⽐特率，默认为128kbps(标准MP3质量)
success:function(){//成功回调函数
},
error:function(msg){//失败回调函数
alert(msg);
},
fix:function(msg){//不⽀持H5录⾳回调函数
alert(msg);
}
})
this.github();
},
};
</script>
<style scoped>
</style>
⽗组件调⽤：
根据这个修改了⽅法：
修改后的recorder.js⽂件。
// var MyWorker = new Worker(require("./my.worker.js"));
var blobx =new Blob([document.querySelector('#MyWorker').textContent]); var url = ateObjectURL(blobx);
var MyWorker =new Worker(url);
console.log(MyWorker)
//公共⽅法
var localMediaStream
var Util ={
//初始化
init:function(){
navigator.webkitGetUserMedia ||
navigator.msGetUserMedia;
window.AudioContext = window.AudioContext ||
window.webkitAudioContext;
},
//⽇志
log:function(){
console.log.apply(console, arguments);
}
};
/
/构造函数
var Recorder=function(config){
var _this =this;
var _this =this;
config = config ||{};//初始化配置对象
config.sampleRate = config.sampleRate ||44100;//采样频率，默认为44100Hz(标准MP3采样率)        config.bitRate = config.bitRate ||128;//⽐特率，默认为128kbps(标准MP3质量)
Util.init();
UserMedia){
audio:true//配置对象
},
function(stream){//成功回调
localMediaStream = Tracks()[0]
var context =new AudioContext(),
microphone = ateMediaStreamSource(stream),//媒体流⾳频源
processor = ateScriptProcessor(16384,1,1),//js⾳频处理器
successCallback, errorCallback;
config.sampleRate = context.sampleRate;
//监听⾳频录制过程
var array = ChannelData(0);
realTimeWorker.postMessage({ cmd:'encode', buf: array });
};
// var realTimeWorker = new Worker('./my.worker.js'); //开启后台线程
var realTimeWorker = MyWorker;//开启后台线程
console.log('进来这边')
console.log(d)
switch(d){
case'init':
Util.log('初始化成功');
if(config.success){
config.success();
}
break;
case'end':
if(successCallback){
console.log('执⾏recorder')
var blob =new Blob(e.data.buf,{ type:'audio/mp3'});
successCallback(blob);
Util.log('MP3⼤⼩：'+ blob.size +'%cB','color:#0000EE');
}
break;
case'error':
Util.log('错误信息：'+ );
if(errorCallback){
errorCallback();
}
break;
default:
Util.log('未知信息：'+ e.data);
}
};
//接⼝列表
//开始录⾳
_this.start=function(){
if(processor && microphone){
Util.log('开始录⾳');
}
};
//结束录⾳
//结束录⾳
_this.stop=function(){
if(processor && microphone){
microphone.disconnect();
processor.disconnect();
localMediaStream.stop()
Util.log('录⾳结束');
}
};
//获取blob格式录⾳⽂件
_Blob=function(onSuccess, onError){
successCallback = onSuccess;
errorCallback = onError;
console.log('这是blob')
realTimeWorker.postMessage({ cmd:'finish'});
};
realTimeWorker.postMessage({
cmd:'init',
config:{
sampleRate: config.sampleRate,
bitRate: config.bitRate
}
});
},
function(error){//失败回调
var msg;
de || error.name){
case'PermissionDeniedError':
case'PERMISSION_DENIED':
case'NotAllowedError':
msg ='⽤户拒绝访问麦克风';
break;
case'NOT_SUPPORTED_ERROR':
case'NotSupportedError':
msg ='浏览器不⽀持麦克风';
break;
case'MANDATORY_UNSATISFIED_ERROR':
case'MandatoryUnsatisfiedError':
msg ='不到麦克风设备';
break;
default:
msg ='⽆法打开麦克风，异常信息:'+(de || error.name);
break;
}
Util.log(msg);
){
<(msg);
}
});
}else{
Util.log('当前浏览器不⽀持录⾳功能');
if(config.fix){
config.fix('当前浏览器不⽀持录⾳功能');
}
}
};
//模块接⼝
export default Recorder;
/
/ import a from './worker'
修改后的worker.js，采⽤放到了全局，作为⼀个属性⽅法，MyWorker。
<!--视频监控-录制声⾳需要的⽅法，其他没办法录⼊⽿机⾥的声⾳，只录⼊了麦克风的声⾳，采⽤这种⽅法进⾏-->
<!--这种⽅法的弊端是导致lamejs⽅法引⼊不了，导致只能直接放源码来引⼊lame，如果有更好的办法，请直接改进--> <script id="MyWorker" type="app/worker">
console.log('worker123')
var mp3Encoder, maxSamples =1152, samplesMono, lame, config, dataBuffer;
var clearBuffer=function(){
dataBuffer =[];
};
var appendToBuffer=function(mp3Buf){
dataBuffer.push(new Int8Array(mp3Buf));
};
var init=function(prefConfig){
console.log('初')
config = prefConfig ||{};
console.log('lamejs：', lamejs)
lame =new lamejs();
mp3Encoder =new lame.Mp3Encoder(1, config.sampleRate ||44100, config.bitRate ||128);
clearBuffer();
self.postMessage({
cmd:'init'
});
console.log('消息')
};
var floatTo16BitPCM=function(input, output){
for(var i =0; i < input.length; i++){
var s = Math.max(-1, Math.min(1, input[i]));
output[i]=(s <0? s *0x8000: s *0x7FFF);
}
};
var convertBuffer=function(arrayBuffer){
var data =new Float32Array(arrayBuffer);
var out =new Int16Array(arrayBuffer.length);
floatTo16BitPCM(data, out);
return out;js arguments
};
var encode=function(arrayBuffer){
samplesMono =convertBuffer(arrayBuffer);
var remaining = samplesMono.length;
for(var i =0; remaining >=0; i += maxSamples){
var left = samplesMono.subarray(i, i + maxSamples);
var mp3buf = deBuffer(left);
appendToBuffer(mp3buf);
remaining -= maxSamples;
}
};
var finish=function(){
console.log('worker-end')
appendToBuffer(mp3Encoder.flush());
self.postMessage({
cmd:'end',
buf: dataBuffer
});
clearBuffer();
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。