vue3實現實現手機/PC端錄音：recorder-core

在這里插入圖片描述

通過 recorder-core 這個插件實現錄音

recorder-core插件使用

下方的js文件是安裝后封裝的一個js文件，在需要使用的地方直接引入這個文件：import record from “./recorderCore.js”;

//  文件名稱：recorderCore.js// recorder-core插件使用方式：https://huaweicloud.csdn.net/6549fb3434bf9e25c799ca07.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTI5NDc5OSwiZXhwIjoxNzUzOTM3ODg5LCJpYXQiOjE3NTMzMzMwODksInVzZXJuYW1lIjoic2lzdWliYW4ifQ.Y2_R3XsABjzRvhML0rdYMuGJhYrIDM-rrPob4RDJtro&spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-6-131902136-blog-147322532.235%5Ev43%5Econtrol&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-6-131902136-blog-147322532.235%5Ev43%5Econtrol&utm_relevant_index=13
// 例子 https://blog.csdn.net/weixin_47137972/article/details/147322532?ops_request_misc=%257B%2522request%255Fid%2522%253A%25226a538d344bc89fef66029e7d7a2a0b06%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=6a538d344bc89fef66029e7d7a2a0b06&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduend~default-1-147322532-null-null.nonecase&utm_term=vue%E5%AE%9E%E7%8E%B0%E5%BD%95%E9%9F%B3%E5%8A%9F%E8%83%BD&spm=1018.2226.3001.4450
//必須引入的核心
import Recorder from 'recorder-core';//引入mp3格式支持文件；如果需要多個格式支持，把這些格式的編碼引擎js文件放到后面統統引入進來即可
import 'recorder-core/src/engine/mp3';
import 'recorder-core/src/engine/mp3-engine';
//錄制wav格式的用這一句就行
import 'recorder-core/src/engine/wav';const record = {RecordApp: null,recBlob: null,/**麥克風授權 */getPermission: (fn) => {const newRec = Recorder({type: 'wav',bitRate: 16,sampleRate: 16000, //阿里采樣率16000onProcess: function (buffers, powerLevel, duration, bufferSampleRate) {// console.log(buffers);},});//打開錄音，獲得權限newRec.open(() => {record.RecordApp = newRec;fn({ status: 'success', data: '開啟成功' });},(msg, isUserNotAllow) => {//用戶拒絕了錄音權限，或者瀏覽器不支持錄音fn({ status: 'fail', data: msg });// console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '無法錄音:' + msg);});},/**開始錄音 */startRecorder: () => {if (record.RecordApp && Recorder.IsOpen()) {record.RecordApp.start();}},/** 停止錄音 */stopRecorder: (fn) => {try {if (!record) {// console.error('未打開錄音');return;}record.RecordApp.stop((blob, duration) => {// console.log('錄音成功', blob, '時長:' + duration + 'ms');if (blob) {record.recBlob = blob;const url = URL.createObjectURL(blob);const formData = new FormData();formData.append('audio', blob);fn({ loading: true }, url, blob);}/* eslint-enable */record.RecordApp.close();record.RecordApp = null;});} catch (err) {fn({ err: err });// console.error('結束錄音出錯：' + err);record.RecordApp.close();record.RecordApp = null;}},/**關閉錄音，釋放麥克風資源 */destroyRecorder: () => {if (record.RecordApp) {record.RecordApp.close();record.RecordApp = null;}},/**暫停 */pauseRecorder: () => {if (record.RecordApp) {record.RecordApp.pause();}},/**恢復繼續錄音 */resumeRecorder: () => {if (record.RecordApp) {record.RecordApp.resume();}},
};export default record;

接下來就是使用上方的js文件

import record from "./config/recorderCore.js";// 點擊了開始錄音按鈕
const onclick_luyin = () => {record.getPermission(function (permiss) {if (permiss.status == "fail") {ElMessage.error(permiss.data); //這里直接寫一個報錯提示，我這用的是elementUI的} else {record.startRecorder(); //開始錄音}});
};
// 錄音停止按鈕
const onclick_guanbi = () => {record.stopRecorder((res, url, blob) => {if (blob && blob.size) {console.log("文件大小：", blob.size);// 調用語音轉文字的接口AudioToText(blob);}});
};
// 語音轉文字
const AudioToText = async (file) => {const maxSize = 14 * 1024 * 1024; // 14MBif (file.size > maxSize) {ElMessage.error("語音文件的大小超過14MB,請重新錄音");return;}const baseurl = `${DEEPSEEK_CONFIG.baseURL}/audio-to-text`;const apiKey = `${DEEPSEEK_CONFIG.apiKey}`;// 強制指定 MIME 為 audio/mp3const newFile = new File([file], "語音", { type: "audio/mp3" });const formData = new FormData();formData.append("file", newFile);try {const response = await fetch(baseurl, {method: "POST",headers: {Authorization: `Bearer ${apiKey}`,},body: formData,});const text = await response.text();try {const data = JSON.parse(text);if (response.ok) {queryKeys.value = data.text;} else {queryKeys.value = "";ElMessage.error(`語音轉文字接口錯誤：${JSON.stringify(data)}`);}} catch {queryKeys.value = "";ElMessage.error(`語音轉文字接口響應不是 JSON：${text}`);}} catch (error) {queryKeys.value = "";ElMessage.error(`語音轉文字接口請求異常：${error.message}`);}
};

提供一個vue錄音動畫組件

<template><transition name="modal-fade"><div v-if="isOpen" class="modal-overlay" @click="handleOverlayClick"><!-- 科技感網格背景 --><div class="tech-grid"></div><!-- 掃描線效果 --><div class="scan-line" :class="{ active: props.isOpen }"></div><div class="modal-container"><!-- 裝飾性光效 --><div class="glow-effect top"></div><div class="glow-effect bottom"></div><div class="audio-animation-container"><!-- 高科技風格波形容器 --><div class="wave-container"><divv-for="(bar, index) in bars":key="index"class="wave-bar":style="{height: bar.height,background: bar.gradient,boxShadow: bar.glow,transitionDelay: `${bar.delay}ms`,transform: `scaleX(${bar.scale})`}"></div><!-- 倒計時顯示 - 現在位于波形中央 --><div class="countdown-display"><span class="countdown-number">{{ countdown }} / 60</span></div></div></div><!-- 狀態指示器 --><div class="status-indicator"><div class="pulse-dot"></div><span style="color:#fff">可以開始講話了，總共能講60秒</span></div></div></div></transition>
</template><script setup>
import { ref, onBeforeUnmount, watch, onUnmounted } from "vue";const props = defineProps({isOpen: {type: Boolean,required: true,},// 科技感主色調primaryColor: {type: String,default: '#fff'},// 動畫速度（毫秒）speed: {type: Number,default: 80},// 波形條數量barCount: {type: Number,default: 40, // 更多的波形條增強科技感validator: (value) => value >= 20 && value <= 40},// 最大高度比例maxHeightRatio: {type: Number,default: 85,validator: (value) => value >= 70 && value <= 100}
});const emit = defineEmits(["close"]);// 倒計時相關
const countdown = ref(0);
let countdownTimer = null;// 關閉模態框
const closeModal = () => {stopAnimation();stopCountdown();emit("close");
};// 點擊遮罩關閉
const handleOverlayClick = () => {closeModal();
};// 生成科技感漸變色
const generateGradient = (index) => {// 基于位置生成微妙的色調變化const hueOffset = (index % 10) * 3;const baseColor = props.primaryColor;const lightColor = shadeColor(baseColor, 30);return `linear-gradient(180deg, ${lightColor} 0%, ${baseColor} 70%)`;
};// 調整顏色明暗度
const shadeColor = (color, percent) => {let R = parseInt(color.substring(1, 3), 16);let G = parseInt(color.substring(3, 5), 16);let B = parseInt(color.substring(5, 7), 16);R = parseInt(R * (100 + percent) / 100);G = parseInt(G * (100 + percent) / 100);B = parseInt(B * (100 + percent) / 100);R = (R < 255) ? R : 255;G = (G < 255) ? G : 255;B = (B < 255) ? B : 255;R = Math.round(R);G = Math.round(G);B = Math.round(B);const RR = ((R.toString(16).length === 1) ? "0" + R.toString(16) : R.toString(16));const GG = ((G.toString(16).length === 1) ? "0" + G.toString(16) : G.toString(16));const BB = ((B.toString(16).length === 1) ? "0" + B.toString(16) : B.toString(16));return `#${RR}${GG}${BB}`;
};// 波形數據數組
const bars = ref([]);
// 初始化波形數據
for (let i = 0; i < props.barCount; i++) {const color = generateGradient(i);const glowColor = shadeColor(props.primaryColor, 50);bars.value.push({height: '5%',gradient: color,glow: `0 0 8px ${glowColor}, 0 0 12px ${glowColor}33`,delay: calculateDelay(i, props.barCount),scale: 1});
}// 計算每個波形條的動畫延遲，創建同步波動效果
function calculateDelay(index, total) {// 創造波浪式延遲模式，增強科技感return (index % 5) * 40;
}// 動畫定時器
let animationTimer = null;
let pulseTimer = null;// 生成更有規律的波形高度，符合高科技感
const generateHeights = () => {const newBars = [...bars.value];const maxHeight = props.isOpen ? props.maxHeightRatio : 10;const minHeight = props.isOpen ? 5 : 3;// 創建更有規律的波形模式，類似音頻頻譜const time = Date.now() / 500;newBars.forEach((bar, index) => {// 使用正弦函數創建更流暢的波形const frequency = 0.5 + (index / newBars.length) * 2;const amplitude = props.isOpen ? 0.5 + Math.random() * 0.5 : 0.2;const baseHeight = (maxHeight - minHeight) * 0.5 + minHeight;const wave = Math.sin(time * frequency + (index * 0.3)) * amplitude;const height = Math.floor(baseHeight * (1 + wave));// 添加微妙的縮放效果const scale = props.isOpen ? 1 + (wave * 0.1) : 1;newBars[index] = {...bar,height: `${height}%`,scale: scale,gradient: generateGradient(index)};});bars.value = newBars;
};// 啟動動畫
const startAnimation = () => {if (animationTimer) clearInterval(animationTimer);if (pulseTimer) clearInterval(pulseTimer);generateHeights();animationTimer = setInterval(generateHeights, props.speed);// 啟動脈沖效果pulseTimer = setInterval(() => {const glowElements = document.querySelectorAll('.glow-effect');glowElements.forEach(el => {el.classList.add('pulse');setTimeout(() => el.classList.remove('pulse'), 500);});}, 2000);
};// 停止動畫并重置
const stopAnimation = () => {if (animationTimer) {clearInterval(animationTimer);animationTimer = null;}if (pulseTimer) {clearInterval(pulseTimer);pulseTimer = null;}// 平滑重置為低波形const newBars = [...bars.value].map(bar => ({...bar,height: '5%',scale: 1}));bars.value = newBars;
};// 啟動倒計時
const startCountdown = () => {// 重置倒計時countdown.value = 0;// 清除現有定時器if (countdownTimer) {clearInterval(countdownTimer);}// 設置新定時器countdownTimer = setInterval(() => {countdown.value++;// 當倒計時達到60時關閉模態框if (countdown.value >= 60) {handleOverlayClick();}}, 1000);
};// 停止倒計時
const stopCountdown = () => {if (countdownTimer) {clearInterval(countdownTimer);countdownTimer = null;}
};// 監聽isOpen狀態變化，控制動畫和倒計時
watch(() => props.isOpen,(newVal) => {if (newVal) {startAnimation();startCountdown();} else {stopCountdown();}},{ immediate: true }
);// 監聽顏色變化
watch(() => props.primaryColor,(newVal) => {const updatedBars = [...bars.value].map((bar, index) => {const color = generateGradient(index);const glowColor = shadeColor(newVal, 50);return {...bar,gradient: color,glow: `0 0 8px ${glowColor}, 0 0 12px ${glowColor}33`};});bars.value = updatedBars;}
);// 組件卸載時清理
onBeforeUnmount(() => {stopAnimation();stopCountdown();
});onUnmounted(() => {if (animationTimer) clearInterval(animationTimer);if (pulseTimer) clearInterval(pulseTimer);if (countdownTimer) clearInterval(countdownTimer);
});
</script><style scoped>
/* 高科技風格配色方案 */
:root {--tech-blue: #00e5ff;--tech-dark: #0a1929;--tech-darker: #050f1a;--tech-light: #64ffda;--glow: 0 0 10px var(--tech-blue), 0 0 20px rgba(0, 229, 255, 0.3);--glow-strong: 0 0 15px var(--tech-blue), 0 0 30px rgba(0, 229, 255, 0.5);--transition-fast: all 0.1s ease-out;--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.modal-overlay {position: fixed;left: 0;right: 0;bottom: 200px;display: flex;justify-content: center;align-items: center;z-index: 1000;height: 200px;overflow: hidden;
}/* 科技感網格背景 */
.tech-grid {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px),linear-gradient(90deg, rgba(0, 229, 255, 0.1) 1px, transparent 1px);background-size: 20px 20px;z-index: -1;animation: gridMove 8s linear infinite;
}/* 掃描線效果 */
.scan-line {position: absolute;top: -5%;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, transparent, var(--tech-blue), transparent);opacity: 0.3;z-index: 1;transition: opacity 0.5s ease;
}.scan-line.active {opacity: 0.6;animation: scan 3s linear infinite;
}@keyframes scan {0% { top: -5%; }100% { top: 105%; }
}@keyframes gridMove {0% { background-position: 0 0; }100% { background-position: 20px 20px; }
}.modal-container {position: relative;background-color: var(--tech-dark);border: 1px solid rgba(0, 229, 255, 0.3);border-radius: 8px;backdrop-filter: blur(10px);box-shadow: var(--glow);width: 90%;max-width: 600px;padding: 20px;display: flex;flex-direction: column;align-items: center;overflow: hidden;
}/* 裝飾性光效 */
.glow-effect {position: absolute;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, transparent, var(--tech-blue), transparent);opacity: 0.6;transition: var(--transition-slow);
}.glow-effect.top { top: 0; }
.glow-effect.bottom { bottom: 0; }.glow-effect.pulse {opacity: 1;box-shadow: var(--glow-strong);
}.audio-animation-container {display: flex;justify-content: center;align-items: center;width: 100%;height: 140px;
}.wave-container {display: flex;align-items: center;justify-content: center;gap: 2px; /* 更緊密的波形條 */width: 100%;height: 100%;position: relative; /* 新增：為了讓倒計時能絕對定位在波形內部 */
}.wave-bar {width: 3px; /* 更細的波形條 */border-radius: 1px;transition: var(--transition-fast);transform-origin: center bottom;
}/* 倒計時顯示樣式 - 現在位于波形中央 */
.countdown-display {position: absolute;display: flex;flex-direction: column;align-items: center;justify-content: center;color: var(--tech-blue);font-family: 'Courier New', monospace;z-index: 2; /* 確保在波形條上方顯示 */pointer-events: none; /* 允許點擊穿透到下方的波形 */
}.countdown-number {font-size: 24px;font-weight: 600;font-weight: bold;text-shadow: 0 0 8px var(--tech-blue), 0 0 12px rgba(0, 229, 255, 0.5);line-height: 1;
}.countdown-label {font-size: 10px;opacity: 0.8;margin-top: 2px;
}/* 狀態指示器 */
.status-indicator {display: flex;align-items: center;gap: 8px;margin-top: 10px;
}.status-indicator span {color: var(--tech-blue);font-family: 'Courier New', monospace;font-size: 11px;letter-spacing: 1px;opacity: 0.8;
}.pulse-dot {width: 6px;height: 6px;border-radius: 50%;background-color: #ff3e3e;animation: pulse 1.5s infinite;
}@keyframes pulse {0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.7); }70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 62, 62, 0); }100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 62, 62, 0); }
}/* 過渡動畫 */
.modal-fade-enter-active,
.modal-fade-leave-active {transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}.modal-fade-enter-from {opacity: 0;transform: translateY(20px) scale(0.98);
}.modal-fade-leave-to {opacity: 0;transform: translateY(10px) scale(0.99);
}
</style>

組件使用：

<AudioWaveAnimation:isOpen="isRecording":primaryColor="getRandomShadow()"@close="onclick_guanbi"/>// js
import AudioWaveAnimation from "./component/AudioWaveAnimation.vue";// 組件的顯示與隱藏開關
const isRecording = ref(false);
// 生成隨機顏色
function getRandomShadow() {const hue = Math.floor(Math.random() * 360); // 色相（0-360）const saturation = Math.floor(Math.random() * 30) + 70; // 飽和度（70%-100%）const lightness = Math.floor(Math.random() * 20) + 60; // 明度（60%-80%）const alpha = 0.3 + Math.random() * 0.3; // 透明度（0.3-0.6）// 直接返回hsla顏色值return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
}