vue前端获取/切换麦克风，播放采集音频和采集音量大小

2024-04-08 1415阅读

vue获取/切换麦克风且播放采集音频和音量大小

一、前言
二、案列图示
三、代码

1、获取麦克风列表
2、用户在麦克风列表里面选择一个麦克风
3、选取了麦克风以后使用当前麦克风录音
4、获取采集的音频音量大小

四、全部代码

一、前言

使用时确保你有如下依赖且版本为Vue2，终端里面运行

npm install element-ui
npm install recordrtc
npm install sass sass-loader

二、案列图示

三、代码

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、用户在麦克风列表里面选择一个麦克风

  
    
      
      
    
    
      {{ voiceStatus ? '取消录音' : '开始录音' }}

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  {
    const volume = getVolume();
    console.log('音量:', Math.round( volume ));
    RMSList.value.unshift(Math.round(volume));
    RMSList.value.pop();
    // 在这里可以根据需要进行相应的处理
  }, 100);
},

四、全部代码

  
    
      
        
          
          
        
        
          {{ voiceStatus ? '取消录音' : '开始录音' }}
          
          
            
              
            
          
        
      
    
  


import RecordRTC from 'recordrtc'
export default {
  data() {
    return {
      recorder: '',
      voiceStatus: false, // 是否正在录音
      main_form: {
        chooseMicDeviceId: '', // 选择的麦克风id
      },
      Mic: [], // 可选择的麦克风
      rules: {
        file: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      RMSList = [
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		  0, 0, 0, 0,
		]
    };
  },
  created() {},
  mounted() {
    this.getMic()
  },
  methods: {
    // 获取当前页面可以选择的麦克风
    getMic(){
      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(devices);
              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);
        this.RMSList= [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0,
      ];
        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  {
        const volume = getVolume();
        console.log('音量:', Math.round( volume ));
        // 在这里可以根据需要进行相应的处理
        this.RMSList.unshift(Math.round(volume));
    	this.RMSList.value.pop();
      }, 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);
    },
  },
};


.Page{
  padding: 20px;
}

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

vue前端获取/切换麦克风，播放采集音频和采集音量大小

vue获取/切换麦克风且播放采集音频和音量大小

一、前言

二、案列图示

三、代码

1、获取麦克风列表

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

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

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

四、全部代码

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?

怎么抓包一个网页?

wap怎么封装app?

目录[+]