vue使用recorder-core.js實現(xiàn)錄音功能
更新時間:2023年07月28日 10:23:48 作者:開心市民小李???
這篇文章主要介紹了vue如何使用recorder-core.js實現(xiàn)錄音功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
下載組件
npm install recorder-core
封裝方法
record.ts
//必須引入的核心
import Recorder from 'recorder-core';
//引入mp3格式支持文件;如果需要多個格式支持,把這些格式的編碼引擎js文件放到后面統(tǒng)統(tǒng)引入進來即可
import 'recorder-core/src/engine/mp3';
import 'recorder-core/src/engine/mp3-engine';
//錄制wav格式的用這一句就行
import 'recorder-core/src/engine/wav';
import { RecordType } from './type';
const record: RecordType = {
RecordApp: null,
recBlob: null,
/**麥克風授權(quán) */
getPermission: (fn: Function | null) => {
const newRec = Recorder({
type: 'wav',
bitRate: 16,
sampleRate: 16000, //阿里采樣率16000
onProcess: function (buffers, powerLevel, duration, bufferSampleRate) {
console.log(buffers);
},
});
//打開錄音,獲得權(quán)限
newRec.open(
() => {
record.RecordApp = newRec;
fn({ status: 'success', data: '開啟成功' });
},
(msg, isUserNotAllow) => {
//用戶拒絕了錄音權(quán)限,或者瀏覽器不支持錄音
fn({ status: 'fail', data: msg });
console.log((isUserNotAllow ? 'UserNotAllow,' : '') + '無法錄音:' + msg);
}
);
},
/**開始錄音 */
startRecorder: () => {
if (record.RecordApp && Recorder.IsOpen()) {
record.RecordApp.start();
}
},
/** 停止錄音 */
stopRecorder: (fn: Function | null) => {
try {
if (!record) {
console.error('未打開錄音');
return;
}
record.RecordApp.stop((blob, duration) => {
console.log('錄音成功', blob, '時長:' + duration + 'ms');
if (blob) {
record.recBlob = blob;
const formData = new FormData();
formData.append('audio', blob);
fn({ loading: true });
}
/* eslint-enable */
record.RecordApp.close();
record.RecordApp = null;
});
} catch (err) {
fn({ err: err });
console.error('結(jié)束錄音出錯:' + err);
record.RecordApp.close();
record.RecordApp = null;
}
},
/**關(guān)閉錄音,釋放麥克風資源 */
destroyRecorder: () => {
if (record.RecordApp) {
record.RecordApp.close();
record.RecordApp = null;
}
},
/**暫停 */
pauseRecorder: () => {
if (record.RecordApp) {
record.RecordApp.pause();
}
},
/**恢復(fù)繼續(xù)錄音 */
resumeRecorder: () => {
if (record.RecordApp) {
record.RecordApp.resume();
}
},
};
export default record;調(diào)用
import record from '/@/utils/record/record';
/**初始化 */
function init() {
record.getPermission(function (permiss) {
if (permiss.status == 'fail') {
createMessage.warning(permiss.data);
} else {
record.startRecorder();
state.confLoading = true;
}
});
}
/**結(jié)束錄音 */
function stopRec() {
state.loading = true;
state.confLoading = true;
record.stopRecorder(function (res) {
/**處理 */
})
}到此這篇關(guān)于vue使用recorder-core.js實現(xiàn)錄音功能的文章就介紹到這了,更多相關(guān)vue recorder-core.js錄音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01
html-webpack-plugin修改頁面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法 ,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-06-06
Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制
個人在做文件上傳功能的時候,踩過不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制問題,感興趣的朋友一起看看吧2024-02-02
Vue系列:通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列:通過vue-router如何傳遞參數(shù)示例,具有一定的參考價值,有興趣的可以了解一下。2017-01-01

