标签：mediaDevices vue const 麦克风 stream 采集 window audio

1、创建Vue项目在终端运行

npm install element-ui
npm install recordrtc

2、案例图示

3、代码

1、获取麦克风列表

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  var Mic = []
  // 弹框获取麦克风
  navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
    navigator.mediaDevices.enumerateDevices().then(function (devices) {
      devices.forEach(function (device) {
        if(device.kind === 'audioinput'){ // 麦克风
          if(device.deviceId != 'default' && device.deviceId != 'communications'){
            that.Mic.push(device)
          }
        }
      });
    })
  // 只是为了获取麦克风权限，获取以后立马关闭
  stream.getTracks().forEach(track => track.stop());
  })
}

2、用户在麦克风列表里面选择一个麦克风

<el-form
  style="padding: 0 80px"
  ref="mainFormRef"
  :model="main_form"
  label-width="100px"
  :rules="rules"
>
  <el-form-item label="声纹采集：" prop="file">
    <el-select :disabled="voiceStatus" style="width: 200px;" v-model="main_form.chooseMicDeviceId" placeholder="请选择麦克风">
      <el-option
        v-for="item in Mic"
        :key="item.deviceId"
        :label="item.label"
        :value="item.deviceId">
      </el-option>
    </el-select>
    <div class="voiceGather" v-if="main_form.chooseMicDeviceId != ''">
      <el-button style="margin-top: 20px;" @click="voiceInput">{{ voiceStatus ? '取消录音' : '开始录音' }}</el-button>
     
    </div>
  </el-form-item>
</el-form>

3、选取了麦克风以后使用当前麦克风录音

重要代码：audio: { deviceId: this.form.chooseMicDeviceId }，将上面选的麦克风放到getUserMedia中，即可启用用户自己选择的麦克风

// 开始录音
startRecord(){
  var that = this
  this.voiceStatus = true
  // mediaDevices可提供对相机和麦克风等媒体输入设备的连接访问
  window.navigator.mediaDevices.getUserMedia(
    { audio: { deviceId: this.main_form.chooseMicDeviceId }}
    ).then((stream) => {
    this.stream = stream;
    this.getVoice()
    
    this.recorder = RecordRTC(stream, {
      type: 'audio',
      mimeType: 'audio/wav',
      recorderType: RecordRTC.StereoAudioRecorder,
      desiredSampRate: 16000,
      numberOfAudioChannels: 1, // 单声道
      timeSlice: 30000,
      // bufferSize: 4096, // 缓存大小
      ondataavailable: this.sendData,
    });
    this.recorder.startRecording();
  }).catch(function(err) {
    console.log(err);
    console.log('当前浏览器不支持开启麦克风!');
    that.voiceStatus = false
  });
},

在sendData中可以把数据流传给后端，可以播放/下载采集到的数据流，也可以将数据流转换成file传给后端

sendData(blob) {
  var BB =new Blob([blob], {'type': 'audio/wav; codecs=opus'})
  // var audioURL = window.URL.createObjectURL(BB)

  // 播放
  // const audio = document.createElement('audio')
  // audio.controls = true // 音频是否显示控件
  // audio.src = audioURL
  // audio.play()

  // 下载
  // let a = document.createElement("a");
  // a.href = audioURL;
  // a.download = '测试';
  // a.click();
  // // 释放这个临时的对象url
  // window.URL.revokeObjectURL(audioURL);

  let file = new window.File([BB], '测试.wav')
  console.log(file);
},

4、获取采集的音频音量大小

// 获取音量值大小
getVoice() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)()
// 将麦克风的声音输入这个对象
const mediaStreamSource = audioContext.createMediaStreamSource(this.stream)
// 创建分析节点
const analyserNode = audioContext.createAnalyser()
// 连接节点
mediaStreamSource.connect(analyserNode)
// 可以实时听到麦克风采集的声音
// analyserNode.connect(audioContext.destination)

// 获取音量数据
const dataArray = new Uint8Array(analyserNode.frequencyBinCount);

function getVolume() {
analyserNode.getByteFrequencyData(dataArray);
let sum = 0;
for (let i = 0; i < dataArray.length; i++) {
sum += dataArray[i];
}
// 计算平均音量
const averageVolume = sum / dataArray.length;
return averageVolume;
}

// 每隔一段时间获取一次音量
this.timer1 = setInterval(() => {
const volume = getVolume();
console.log('音量:', Math.round( volume ));
// 在这里可以根据需要进行相应的处理
}, 100);
},

四、全部代码

<template>
    <div class="Page">
      <el-form
        style="padding: 0 80px"
        ref="mainFormRef"
        :model="main_form"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="声纹采集：" prop="file">
          <el-select :disabled="voiceStatus" style="width: 200px;" v-model="main_form.chooseMicDeviceId" placeholder="请选择麦克风">
            <el-option
              v-for="item in Mic"
              :key="item.deviceId"
              :label="item.label"
              :value="item.deviceId">
            </el-option>
          </el-select>
          <div class="voiceGather" v-if="main_form.chooseMicDeviceId != ''">
            <el-button style="margin-top: 20px;" @click="voiceInput">{{ voiceStatus ? '取消录音' : '开始录音' }}</el-button>
            <!-- 正在录制 -->
            <!-- <template v-if="voiceStatus">
              <div class="bo">
                <div v-for="(item, index) in RMSList" :key="index" :style="{height: item / 100 * 40 + 'px'}" class="RMS"></div>
              </div>
            </template> -->
          </div>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import RecordRTC from 'recordrtc'

  import Vue from 'vue'
 
 //放到1和2这俩中间
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 
  export default {
    name:"Voice",
    data() {
      return {
        recorder: '',
        voiceStatus: false, // 是否正在录音
        main_form: {
          chooseMicDeviceId: '', // 选择的麦克风id
        },
        Mic: [], // 可选择的麦克风
        rules: {
          file: [
            { required: true, message: "不能为空", trigger: "blur" },
          ],
        },
      };
    },
    created() {},
    mounted() {
      console.log("1111")
      this.getMic()
    },
    methods: {
      // 获取当前页面可以选择的麦克风
      getMic(){
        console.log(1111)
        let that = this;
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          // 弹框获取麦克风
          navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
            navigator.mediaDevices.enumerateDevices().then(function (devices) {
              devices.forEach(function (device) {
                console.log(device);
                if(device.kind === 'audioinput'){ // 麦克风
                  if(device.deviceId != 'default' && device.deviceId != 'communications'){
                    that.Mic.push(device)
                  }
                }
                
              });
            })
            stream.getTracks().forEach(track => track.stop());
          })
        }
        
      },
  
      // 语音输入
      voiceInput(){
        // 正在语音输入
        if(this.voiceStatus) {
          this.stopRecord() // 停止输入
        } else { // 开启语音输入
          this.startRecord()
        }
      },
  
      // 开始录音
      startRecord(){
        var that = this
        this.voiceStatus = true
        // mediaDevices可提供对相机和麦克风等媒体输入设备的连接访问
        window.navigator.mediaDevices.getUserMedia(
          { audio: { deviceId: this.main_form.chooseMicDeviceId }}
          ).then((stream) => {
          this.stream = stream;
          this.getVoice()
          
          this.recorder = RecordRTC(stream, {
            type: 'audio',
            mimeType: 'audio/wav',
            recorderType: RecordRTC.StereoAudioRecorder,
            desiredSampRate: 16000,
            numberOfAudioChannels: 1, // 单声道
            timeSlice: 1000,
            // bufferSize: 4096, // 缓存大小
            ondataavailable: this.sendData,
          });
          this.recorder.startRecording();
        }).catch(function(err) {
          console.log(err);
          console.log('当前浏览器不支持开启麦克风!');
          that.voiceStatus = false
        });
      },
  
      // 结束录音
      stopRecord(){
        this.voiceStatus = false
        if (this.recorder != null) {
          let recorder = this.recorder
          recorder.stopRecording();
          let stream = this.stream;
          clearInterval(this.timer1);
          stream.getAudioTracks().forEach(track => track.stop());
        }
      },
  
      // 获取音量值大小
      getVoice() {
        const audioContext = new (window.AudioContext || window.webkitAudioContext)()
        // 将麦克风的声音输入这个对象
        const mediaStreamSource = audioContext.createMediaStreamSource(this.stream)
        // 创建分析节点
        const analyserNode = audioContext.createAnalyser()
        // 连接节点
        mediaStreamSource.connect(analyserNode)
        // 可以实时听到麦克风采集的声音
        // analyserNode.connect(audioContext.destination)
  
        // 获取音量数据
        const dataArray = new Uint8Array(analyserNode.frequencyBinCount);
  
        function getVolume() {
          analyserNode.getByteFrequencyData(dataArray);
          let sum = 0;
          for (let i = 0; i < dataArray.length; i++) {
            sum += dataArray[i];
          }
          // 计算平均音量
          const averageVolume = sum / dataArray.length;
          return averageVolume;
        }
  
        // 每隔一段时间获取一次音量
        this.timer1 = setInterval(() => {
          const volume = getVolume();
          console.log('音量:', Math.round( volume ));
          // 在这里可以根据需要进行相应的处理
        }, 100);
      },
  
      // 每timeSlice执行一次
      sendData(blob) {
        var BB = new Blob([blob], {'type': 'audio/wav; codecs=opus'})
        var audioURL = window.URL.createObjectURL(BB)
  
        //播放
        const audio = document.createElement('audio')
        audio.controls = true // 音频是否显示控件
        audio.src = audioURL
        audio.play()
  
        // //下载
        // let a = document.createElement("a");
        // a.href = audioURL;
        // a.download = '测试';
        // a.click();
        // // 释放这个临时的对象url
        // window.URL.revokeObjectURL(audioURL);
  
        let file = new window.File([BB], '测试.wav')
        console.log(file);
      },
    },
  };
  </script>
  
  <style scoped>
  
  .Page{
    padding: 20px;
  }
  </style>

View Code

标签：mediaDevices,vue,const,麦克风,stream,采集,window,audio
From： https://www.cnblogs.com/handsomeziff/p/18066058

vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码