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

长安紫薯

已于 2023-10-15 08:05:56 修改

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：黑豹程序员 Vue front-end 大前端文章标签：前端语音

于 2023-10-14 23:24:22 首次发布

本文链接：https://blog.youkuaiyun.com/nutony/article/details/133833911

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 =