前言：
最近遇到 要語音轉(zhuǎn)文字 的需求，語音轉(zhuǎn)文字肯定要先搞定錄音功能，在網(wǎng)上找了好久沒找到具體的?RecordRTC.js 插件的使用方法，最后只能對(duì)著 github 上開源代碼小試了一下，錄音功能好使所以就記錄一下叭
一、RecordRTC.js 源碼指路
https://github.com/muaz-khan/RecordRTC
二、功能邏輯分析
需求分析：用戶點(diǎn)擊語音按鈕->請(qǐng)求麥克風(fēng)權(quán)限，語音按鈕編程文本按鈕，文本輸入框顯示為“按住說話” ->用戶按住輸入框說話->顯示語音錄入的動(dòng)畫,同時(shí)文本輸入框顯示為“松開結(jié)束”->用戶松開即結(jié)束錄音，將錄音文件傳給后端，后端進(jìn)行轉(zhuǎn)文字
三、使用方法
1、從下載的源碼中將RecordRTC.js 文件引入放在項(xiàng)目js文件中，并在項(xiàng)目中引用
2.新建js文件 audioRTC.js書寫自己的功能邏輯代碼?
3、參照源碼simple-demos->audio-recording.html 文件完成js代碼
4、函數(shù)功能記錄
captureMicrophone? 獲取麥克風(fēng)權(quán)限
replaceAudio 釋放麥克風(fēng)（根據(jù)具體需求使用，我這里未釋放）
recorder.startRecording() ->開始錄音 (recorder 為實(shí)例對(duì)象)
recorder.stopRecording() ->結(jié)束錄音
stopRecordingCallback 結(jié)束錄音的回調(diào)函數(shù)
四、功能代碼書寫
1、準(zhǔn)備 捕獲麥克風(fēng)函數(shù)
var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);
var recorder; // globally accessible
var microphone; // 麥克風(fēng)
// 捕獲麥克風(fēng)
function captureMicrophone(callback) {
console.log("捕獲麥克風(fēng)函數(shù)調(diào)用")
if (microphone) {
callback(microphone);
return;
}
// 沒有媒體設(shè)置告知版本低
if (typeof navigator.mediaDevices === 'undefined' || !navigator.mediaDevices.getUserMedia) {
var sys = isAndroidOrIOSOrPc();
if (sys == "pc") {
layer.msg("該瀏覽器不支持語音錄入，<br>請(qǐng)使用谷歌、火狐等主流瀏覽器。", { area: ['320px', '80px'] });
} else if (sys == "ios") {
layer.msg("該瀏覽器不支持語音錄入，<br>請(qǐng)將您的IOS操作系統(tǒng)升級(jí)最新版本，并使用safari瀏覽器打開使用。", { area: ['320px', '80px'] });
} else if (sys == "android") {
layer.msg("該瀏覽器不支持語音錄入，<br>請(qǐng)使用系統(tǒng)自帶瀏覽器打開使用。", { area: ['320px', '80px'] });
} else {
layer.msg("您當(dāng)前的操作系統(tǒng)不支持語音錄入。", { area: ['300px', '50px'] });
}
}
// 獲取設(shè)備的錄音權(quán)限
navigator.mediaDevices.getUserMedia({
audio: isEdge ? true : { echoCancellation: false }
}).then(function(mic) {
console.log("獲取麥克風(fēng)成功回調(diào)",mic)
callback(mic);
}).catch(function(error) {
console.log("獲取麥克風(fēng)失敗回調(diào)",error)
layer.msg("該瀏覽器不支持語音錄入。<br>或您拒絕了語音授權(quán)", { area: ['300px', '60px'] });
// 禁用麥克風(fēng)走這里-》禁用語音按鈕
// 按鈕背景換成語音
$("#recordMess").css({
"background":"url(images/noyuyin.png) no-repeat center",
"background-size":" 100% 100%",
})
$("#recordMess").attr('disabled',true);
$('#chatform').children("#messCon").show();
$('#chatform').children("#talkmess_btn").hide();
})
}2、按住輸入框開始錄音，封裝錄音函數(shù)
// 開始錄音
function startRec() {
var options = {
type: 'audio',
numberOfAudioChannels: 1,
checkForInactiveTracks: false,
bufferSize: 4096,
recorderType: StereoAudioRecorder
};
if (recorder) {
recorder.destroy();
recorder = null;
}
// recordre 實(shí)例
recorder = RecordRTC(microphone, options);
recorder.startRecording(); //開始錄音
};3、停止錄音回調(diào)
//停止錄音的回調(diào)
function stopRecordingCallback() {
//
console.log("停止錄音回調(diào)")
var internalRecorder = recorder.getInternalRecorder();
console.log("停止錄音回調(diào)internalRecorder",internalRecorder)
// 左聲道
var leftchannel = internalRecorder.leftchannel;
// 右聲道
var rightchannel = internalRecorder.rightchannel;
console.log("左聲道",leftchannel)
console.log(("啦啦啦",internalRecorder.blob,window.URL||webkitURL).createObjectURL(internalRecorder.blob))
console.log("internalRecorderBlob",internalRecorder.blob)
// 將錄音文件 以文件對(duì)象形式傳給后端
var form = new FormData()
form.append("upfile",internalRecorder.blob,"recorder.wav");
console.log("form",form)
$.ajax({
url: '后端接口地址',
type:'POST',
cache: false,
processData: false,
contentType: false,
data: form,
success: function(data){
console.log("后端返回?cái)?shù)據(jù)對(duì)象",data)
// 根據(jù)數(shù)據(jù)進(jìn)行具體操作
},
error:function (err) {
console.log("ajaxerr",err)
}
})
}
4、按鈕綁定監(jiān)聽事件，調(diào)用錄音相關(guān)函數(shù)
? 4.1、語音按鈕綁定點(diǎn)擊事件
var flagvoice=false;
$("#recordMess").click(function() {
if(flagvoice){
$(this).css({
"background":"url(images/yuyin.png) no-repeat center",
"background-size":" 100% 100%",
})
$('#chatform').children("#messCon").show();
$('#chatform').children("#talkmess_btn").hide();
flagvoice=false;
}else{
$(this).css({
"background":"url(images/wenben.png) no-repeat center",
"background-size":" 100% 100%",
})
$('#chatform').children("#messCon").hide();
$('#chatform').children("#talkmess_btn").show();
flagvoice=true;
}
// ---------------獲取麥克風(fēng)權(quán)限 START--------
if (!microphone) {
captureMicrophone(function(mic) {
console.log("獲取語音權(quán)限",mic)
microphone = mic;
});
return;
}
// ---------------獲取麥克風(fēng)權(quán)限 END--------
})? 4.2、輸入框綁定觸摸事件，觸摸按開始錄音
var posStart = 0;//初始化起點(diǎn)坐標(biāo)
var posEnd = 0;//初始化終點(diǎn)坐標(biāo)
//長按
var btnElem=document.getElementById("talkmess_btn");//獲取ID
btnElem.addEventListener("touchstart", function(event) {
event.stopPropagation(); // 阻止冒泡
event.preventDefault();//阻止瀏覽器默認(rèn)行為
posStart = 0;
posStart = event.touches[0].pageY;//獲取起點(diǎn)坐標(biāo)
// btnElem.value = '松開 結(jié)束';
btnElem.innerText = '松開 結(jié)束';
$("#audiobg").show();
// $("#audiobg>p").hide();
console.log("start");
console.log(posStart+'---------開始坐標(biāo)');
// 開始錄音
startRec()
});? 4.3、輸入框綁定觸摸事件，觸摸抬起結(jié)束錄音
btnElem.addEventListener("touchend", function(event) {
event.stopPropagation();
event.preventDefault();
posEnd = 0;
posEnd = event.changedTouches[0].pageY;//獲取終點(diǎn)坐標(biāo)
// btnElem.value = '按住 說話';
btnElem.innerText = '按住 說話';
console.log("End");
console.log(posEnd+'---------結(jié)束坐標(biāo)');
if(posStart - posEnd < 100 ){
// $("#audiobg>p").hide();
console.log("發(fā)送成功");
// recStop()
recorder.stopRecording(stopRecordingCallback);
}else{
// $("#audiobg>p").show();
console.log("取消發(fā)送");
console.log("Cancel");
};
$("#audiobg").hide();
});4.4、為測(cè)試前端是否真的拿到用戶語音輸入的內(nèi)容，可以加一個(gè)測(cè)試按鈕用于下載用戶語音
// 獲取文件名的隨機(jī)字符串
function getRandomString() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}
// 文件名
function getFileName(fileExtension) {
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var date = d.getDate();
return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}
// 下載錄音
function downloadRecording(){
console.log("下載錄音")
if(!recorder || !recorder.getBlob()) return;
var blob = recorder.getBlob();
var file = new File([blob], getFileName('wav'), {
type: 'audio/wav'
});
invokeSaveAsDialog(file); // 該方法在recorderRTC.js中已有
}// 下載按鈕綁定點(diǎn)擊事件
var download = document.getElementById("download")
download.addEventListener("click",function(){
downloadRecording()
})五、存在問題文章來源：http://www.zghlxwxcb.cn/news/detail-454527.html
完成上述代碼之后，經(jīng)測(cè)試發(fā)現(xiàn)該功能在安卓手機(jī)上正常，但是在一些較老版本的ios系統(tǒng)上（如 iPhone 7Plus iphone xs）存在只能錄音一次的問題，解決方案：在結(jié)束錄音函數(shù)中判斷設(shè)備是ios即釋放麥克風(fēng)，在開始錄音中判斷麥克風(fēng)是否存在并再調(diào)用一次開始錄音函數(shù)，具體代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-454527.html
// 釋放麥克風(fēng)
function releaseMicrophone(){
if(microphone) {
microphone.stop();
microphone = null;
}
}// 判斷設(shè)備是否是ios
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
//停止錄音的回調(diào)
function stopRecordingCallback() {
// --------此處省略結(jié)束錄音回調(diào)函數(shù)，代碼同上，僅追加對(duì)于ios的判斷--------------
if(isSafari){
releaseMicrophone()
}
}// 開始錄音
function startRec() {
// -----------新增補(bǔ)充代碼 start-------------
if (!microphone) {
captureMicrophone(function(mic) {
microphone = mic;
// click(btnStartRecording);
startRec()
});
return;
}
// -----------新增補(bǔ)充代碼 end-------------
var options = {
type: 'audio',
numberOfAudioChannels: 1,
checkForInactiveTracks: false,
bufferSize: 4096,
sampleRate:48000,
recorderType: StereoAudioRecorder
};
if (recorder) {
recorder.destroy();
recorder = null;
}
// recordre 實(shí)例
recorder = RecordRTC(microphone, options);
recorder.startRecording(); //開始錄音
};到了這里，關(guān)于利用RecordRTC.js實(shí)現(xiàn)H5錄音功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
