黑豹程序员-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 = 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值