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>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<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 =