web网页上实现录音功能(vue3组件示例)

郭春雨

一. 前言

在Web开发中实现音频录制功能是许多应用场景的常见需求。本文将通过一个完整的Vue 3组件示例，详细解析如何利用现代浏览器API实现网页端的录音功能。

二. 技术实现


1.核心API介绍

MediaRecorder API 是实现录音功能的核心，它允许我们直接捕获来自用户设备的媒体流。主要方法：

1. <strong>getUserMedia()</strong> 获取媒体设备权限<strong>MediaRecorder()</strong> 创建录音实例<strong>ondataavailable</strong> 接收音频数据<strong>onstop</strong> 处理录音结束事件

复制代码

2.模板部分

1. <template>
   
2.   <div class="voice-recorder">
   
3.     <!-- 录音控制 -->
   
4.     <button @click="toggleRecording" :class="{ recording: isRecording }">
   
5.       {{ isRecording ? "停止录音" : "开始录音" }}
   
6.     </button>
   
7. 
   
8.     <!-- 生成的音频文件列表 -->
   
9.     <div v-if="audioFiles.length > 0" class="audio-list">
   
10.       <div v-for="(audio, index) in audioFiles" :key="index">
    
11.         <audio controls :src="audio.url"></audio>
    
12.       </div>
    
13.     </div>
    
14.   </div>
    
15. </template>

复制代码

3.核心逻辑实现

1. const isRecording = ref(false);
   
2. const mediaRecorder = ref(null);
   
3. const audioChunks = ref([]);
   
4. const audioFiles = ref([]);
   
5. // 开始录音
   
6. const startRecording = async (e) => {
   
7.   if (isRecording.value) return;
   
8.   try {
   
9.     audioChunks.value = [];
   
10.     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
11.     mediaRecorder.value = new MediaRecorder(stream);
    
12. 
    
13.     mediaRecorder.value.ondataavailable = (e) => {
    
14.       audioChunks.value.push(e.data);
    
15.     };
    
16.     mediaRecorder.value.onstop = () => {
    
17.       const audioBlob = new Blob(audioChunks.value, { type: "audio/webm" });
    
18.       const audioURL = URL.createObjectURL(audioBlob);
    
19.       audioFiles.value.push({
    
20.         name: `recording_${Date.now()}.${getFileExtension(audioBlob.type)}`,
    
21.         url: audioURL,
    
22.       });
    
23.       audioChunks.value = [];
    
24.     };
    
25.     mediaRecorder.value.start();
    
26.     isRecording.value = true;
    
27.   } catch (error) {
    
28.     console.error("录音错误:", error);
    
29.   }
    
30. };

复制代码

4. 关键功能点解析

(1) 音频格式处理
通过MIME类型映射获取文件扩展名：

1. // 获取文件扩展名
   
2. const getFileExtension = (mimeType) => {
   
3.   const extensions = {
   
4.     "audio/webm": "webm",
   
5.     "audio/ogg": "ogg",
   
6.     "audio/mp4": "mp4",
   
7.     "audio/mpeg": "mp3",
   
8.     "audio/wav": "wav",
   
9.   };
   
10.   return extensions[mimeType] || "webm";
    
11. };

复制代码

(2) 资源管理
组件卸载时自动释放资源：

1. //停止录音
   
2. const stopRecording = () => {
   
3.   console.log("停止录音");
   
4.   isRecording.value = false;
   
5.   if (mediaRecorder.value) {
   
6.     mediaRecorder.value.stop();
   
7.     mediaRecorder.value.stream.getTracks().forEach((track) => track.stop());
   
8.   }
   
9. };
   
10. // 清理资源
    
11. onUnmounted(() => {
    
12.   stopRecording();
    
13. });

复制代码

三. 完整代码

1. <template>
   
2.   <div class="voice-recorder">
   
3.     <!-- 录音控制 -->
   
4.     <button @click="toggleRecording" :class="{ recording: isRecording }">
   
5.       {{ isRecording ? "停止录音" : "开始录音" }}
   
6.     </button>
   
7. 
   
8.     <!-- 生成的音频文件列表 -->
   
9.     <div v-if="audioFiles.length > 0" class="audio-list">
   
10.       <div v-for="(audio, index) in audioFiles" :key="index">
    
11.         <audio controls :src="audio.url"></audio>
    
12.       </div>
    
13.     </div>
    
14.   </div>
    
15. </template><script setup>const isRecording = ref(false);
    
16. const mediaRecorder = ref(null);
    
17. const audioChunks = ref([]);
    
18. const audioFiles = ref([]);
    
19. // 开始录音
    
20. const startRecording = async (e) => {
    
21.   if (isRecording.value) return;
    
22.   try {
    
23.     audioChunks.value = [];
    
24.     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
25.     mediaRecorder.value = new MediaRecorder(stream);
    
26. 
    
27.     mediaRecorder.value.ondataavailable = (e) => {
    
28.       audioChunks.value.push(e.data);
    
29.     };
    
30.     mediaRecorder.value.onstop = () => {
    
31.       const audioBlob = new Blob(audioChunks.value, { type: "audio/webm" });
    
32.       const audioURL = URL.createObjectURL(audioBlob);
    
33.       audioFiles.value.push({
    
34.         name: `recording_${Date.now()}.${getFileExtension(audioBlob.type)}`,
    
35.         url: audioURL,
    
36.       });
    
37.       audioChunks.value = [];
    
38.     };
    
39.     mediaRecorder.value.start();
    
40.     isRecording.value = true;
    
41.   } catch (error) {
    
42.     console.error("录音错误:", error);
    
43.   }
    
44. };//停止录音const stopRecording = () => {  console.log("停止录音");  isRecording.value = false;  if (mediaRecorder.value) {    mediaRecorder.value.stop();    mediaRecorder.value.stream.getTracks().forEach((track) => track.stop());  }};// 获取文件扩展名
    
45. const getFileExtension = (mimeType) => {
    
46.   const extensions = {
    
47.     "audio/webm": "webm",
    
48.     "audio/ogg": "ogg",
    
49.     "audio/mp4": "mp4",
    
50.     "audio/mpeg": "mp3",
    
51.     "audio/wav": "wav",
    
52.   };
    
53.   return extensions[mimeType] || "webm";
    
54. };// 切换录音状态const toggleRecording = () => {  if (!isRecording.value) {    startRecording();  } else {    if (mediaRecorder.value) {      mediaRecorder.value.stop();      mediaRecorder.value.stream.getTracks().forEach((track) => track.stop());    }  }  isRecording.value = !isRecording.value;};// 清理资源onUnmounted(() => {  stopRecording();});</script><style lang="scss" scoped>.voice-recorder {  max-width: 800px;  margin: 0 auto;  padding: 20px;  button {    padding: 12px 24px;    background: #42b983;    color: white;    border: none;    border-radius: 6px;    cursor: pointer;    transition: background 0.3s;    &.recording {      background: #ff4444;    }  }  button:hover {    background: #3aa876;  }  button:disabled {    background: #ddd;    cursor: not-allowed;  }}.recording {  background-color: #ff4444;  color: white;}.audio-list {  margin-top: 20px;}</style>

复制代码

四. 功能扩展建议

添加录音时长显示
实现音频波形可视化

总结

到此这篇关于web网页上实现录音功能的文章就介绍到这了,更多相关vue3 web网页录音功能内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！