黑豹程序员-h5前端录音、播放

H5支持页面中调用录音机进行录音

H5加入录音组件，录音后可以进行播放，并形成录音文件，其采样率固化48000，传言是google浏览器的BUG，它无法改动采样率。
大BUG，目前主流的支持16000hz的采样率。

录音组件

D:\workspace\vue\vzx-admin\src\components\Recorder\recorder.vue

<template><div><button @click="startRecording" :disabled="isRecording">开始录音</button>&nbsp;<button @click="stopRecording" :disabled="!isRecording">停止录音</button>&nbsp;<el-checkbox size="small" checked="isplay">是否播放</el-checkbox></div>
</template><script>
import axios from "axios";export default {data() {return {mediaRecorder: null,isRecording: false,chunks: [],isplay: true};},methods: {async startRecording() {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });let track = stream.getAudioTracks()[0];//获取音频文件的信息console.log(track.getCapabilities());this.mediaRecorder = new MediaRecorder(stream);this.chunks = [];this.mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {this.chunks.push(event.data);}};this.mediaRecorder.onstop = () => {const audioBlob = new Blob(this.chunks, { type: 'audio/wav' });const audioUrl = URL.createObjectURL(audioBlob);// ==在这里你可以处理录制完成的音频，比如播放或上传到服务器===========// 创建FormData对象let formData = new FormData();// 第一个参数是后台接收的文件参数名，第二个参数是blob数据，第三个参数是文件名formData.append('file', audioBlob, 'rd.wav');// 发送ajax请求axios.post('http://localhost:6070/basic/coursepic', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {// 处理响应数据console.log(response)}).catch(error => {// 处理错误console.log(error)})//==播放=================if(this.isplay){var audio=document.createElement("audio");audio.controls=true;document.body.appendChild(audio);audio.src=audioUrl;audio.play(); //这样就能播放了audio.style.display = "none";//注意不用了时需要revokeObjectURL，否则霸占内存setTimeout(function(){ URL.revokeObjectURL(audio.src) },5000);}};this.mediaRecorder.start();this.isRecording = true;},stopRecording() {if (this.mediaRecorder && this.isRecording) {this.mediaRecorder.stop();this.isRecording = false;}},},
};
</script>

测试页面

<template><Recorder />
</template><script setup>
import Recorder from '../../components/Recorder/recorder.vue';</script>