Recorder 首頁：https://github.com/xiangyuecn/Recorder
一、安裝
npm install recorder-core
二、代碼部分
1. HTML頁面
<template>
<div>
<el-input
v-model="ttsText"
type="textarea"
placeholder="請輸入內(nèi)容"
></el-input>
<el-button type="success" @click="recStart()">開始錄音</el-button>
<el-button type="success" @click="recStop()">結(jié)束錄音</el-button>
<el-button type="success" @click="recPlay()">本地試聽</el-button>
<div style="padding-top: 5px">
<!-- 波形繪制區(qū)域 -->
<div
style="
border: 1px solid #ccc;
display: inline-block;
vertical-align: bottom;
"
>
<div style="height: 100px; width: 300px" ref="recwave"></div>
</div>
</div>
</div>
</template>
2. 引入插件
// 上傳語音文件用
import axios from "axios";
// Recorder核心文件
import Recorder from "recorder-core";
// 引入mp3格式支持文件，如果需要多個(gè)格式支持，把這些格式的編碼引擎js文件放到后面統(tǒng)統(tǒng)引入進(jìn)來即可
import "recorder-core/src/engine/mp3";
import "recorder-core/src/engine/mp3-engine";
// 錄制wav格式的用這一句就行
import "recorder-core/src/engine/wav";
// 可選的插件支持項(xiàng)，這個(gè)是波形可視化插件
import "recorder-core/src/extensions/waveview";
//ts import 提示：npm包內(nèi)已自帶了.d.ts聲明文件（不過是any類型）
3. 方法
// 轉(zhuǎn)文字的內(nèi)容
var ttsText = ref("");
// 錄音Recorder對象
let rec: any;
// 錄音文件對象
let recBlob: any;
let wave: any;
const recwave = ref(null);
// 打開錄音(請求權(quán)限)
function recOpen() {
//創(chuàng)建錄音對象
rec = Recorder({
type: "wav", //錄音格式，可以換成mp3等其他格式
sampleRate: 16000, //錄音的采樣率，越大細(xì)節(jié)越豐富越細(xì)膩
bitRate: 16, //錄音的比特率，越大音質(zhì)越好
onProcess: (
buffers: any,
powerLevel: any,
bufferDuration: any,
bufferSampleRate: any,
newBufferIdx: any,
asyncEnd: any
) => {
//錄音實(shí)時(shí)回調(diào)，大約1秒調(diào)用12次本回調(diào)
//可實(shí)時(shí)繪制波形，實(shí)時(shí)上傳（發(fā)送）數(shù)據(jù)
if (wave) {
wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
}
},
});
if (!rec) {
alert("當(dāng)前瀏覽器不支持錄音功能！");
return;
}
// 打開錄音，獲得權(quán)限
rec.open(
() => {
console.log("錄音已打開");
//創(chuàng)建音頻可視化圖形繪制對象
if (recwave.value) {
wave = Recorder.WaveView({ elem: recwave.value });
}
},
(msg: any, isUserNotAllow: any) => {
//用戶拒絕了錄音權(quán)限，或者瀏覽器不支持錄音
console.log((isUserNotAllow ? "UserNotAllow，" : "") + "無法錄音:" + msg);
}
);
}
// 開始錄音
function recStart() {
if (!rec) {
console.error("未打開錄音");
return;
}
rec.start();
console.log("已開始錄音");
}
// 結(jié)束錄音
function recStop() {
if (!rec) {
console.error("未打開錄音");
return;
}
rec.stop(
(blob: any, duration: any) => {
//blob就是我們要的錄音文件對象，可以上傳，或者本地播放
recBlob = blob;
//簡單利用URL生成本地文件地址，此地址只能本地使用，比如賦值給audio.src進(jìn)行播放，賦值給a.href然后a.click()進(jìn)行下載（a需提供download="xxx.mp3"屬性）
const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log("錄音成功", blob, localUrl, "時(shí)長:" + duration + "ms");
upload(blob); //把blob文件上傳到服務(wù)器
// rec.close(); //關(guān)閉錄音，釋放錄音資源，當(dāng)然可以不釋放，后面可以連續(xù)調(diào)用start，關(guān)閉的話則需要重新打開錄音
// rec = null;
},
(err: any) => {
console.error("結(jié)束錄音出錯(cuò)：" + err);
rec.close(); //關(guān)閉錄音，釋放錄音資源，當(dāng)然可以不釋放，后面可以連續(xù)調(diào)用start
rec = null;
}
);
}
// 上傳錄音
function upload(blob: any) {
console.log("視頻上傳服務(wù)器：");
//blob格式轉(zhuǎn)換為base64格式
blobToDataURI(blob, function (result) {
axios({
method: "POST",
url: `https://xxxxx/api/xxxxx/xxxxx`, // 這里是后端的接口地址，我這邊后端用的是百度語音識別（百度文檔里面寫的，必須后端進(jìn)行交互，前端無法直接交互，因?yàn)榍岸藷o法訪問百度語音識別的域名）
headers: {
"Content-Type": "application/json",
},
// 在請求之前對data傳參進(jìn)行格式轉(zhuǎn)換
transformRequest: [
function (data) {
data = JSON.stringify(data);
return data;
},
],
params: {},
// 這里是傳遞的參數(shù)
data: {
file: result.split(",")[1],
format: "wav",
len: atob(result.split(",")[1]).length,
},
})
.then((res) => {
let resp = res.data;
if (resp.err_msg == "success.") {
ttsText.value = resp.result[0];
console.log("返回文字內(nèi)容：", ttsText.value);
}
})
.catch((req) => {
console.log(req);
});
});
}
// 本地播放錄音
function recPlay() {
//本地播放錄音試聽，可以直接用URL把blob轉(zhuǎn)換成本地播放地址，用audio進(jìn)行播放
const localUrl = URL.createObjectURL(recBlob);
const audio = document.createElement("audio");
audio.controls = true;
document.body.appendChild(audio);
audio.src = localUrl;
audio.play(); //這樣就能播放了
//注意不用了時(shí)需要revokeObjectURL，否則霸占內(nèi)存
setTimeout(function () {
URL.revokeObjectURL(audio.src);
}, 5000);
}
// blob 轉(zhuǎn) base64
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
};
}
- 使用
onMounted(async () => {
// 開啟麥克風(fēng)權(quán)限
recOpen();
});
- 示例
備注： 如果本地開發(fā)的時(shí)候，瀏覽器提示錄音open失敗：瀏覽器禁止不安全頁面錄音。可通過開啟https解決問題文章來源：http://www.zghlxwxcb.cn/news/detail-833464.html
本文參考文章（做了部分修改）：https://blog.csdn.net/IAIPython/article/details/134611674文章來源地址http://www.zghlxwxcb.cn/news/detail-833464.html
到了這里，關(guān)于Recorder 實(shí)現(xiàn)語音錄制并上傳到后端（兼容PC和移動端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
