JS 录音功能https://developer.mozilla.org/zh-CN/docs/Web/API/Medi

developer.mozilla.org/zh-CN/docs/…

步骤

1.用navigator.mediaDevices 和 navigator.mediaDevices.getUserMedia判断浏览器是否支持

2.用navigator.mediaDevices.getUserMedia()方法获取媒体流

3.使用获取的媒体流创建MediaRecorder对象

4.MediaRecorder实例监听结束事件，将blobEvent事件对象中的data属性存储的blob数据，生成URL

5.将URL赋值给audio的src属性

6.关闭媒体流的所有轨道

html部分

<body>
  <span>开始录音</span>
  <span>结束录音</span>
  <audio src=""></audio>
</body>

判断浏览器是否支持

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    
}
else console.log('浏览器不支持getUserMedia')

getUserMedia获取媒体流

MediaDevices.getUserMedia() 的参数，只录音所以为{audio: true} MediaDevices.getUserMedia() 返回一个promise对象

  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream)=>{
      
    }).catch((err)=>{

    })
  }
  else console.log('浏览器不支持getUserMedia')

使用媒体流创建录音器实例

MediaRecorder对象的方法和属性

  let recorder = null
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream)=>{
      recorder = new MediaRecorder(stream)
    }).catch((err)=>{

    })
  }
  else console.log('浏览器不支持getUserMedia')

配合DOM事件

!!! blobEvent事件对象中的data属性才是存储音频的blob数据

  let recorder = null
  let blobAudio = [] //用来存储音频数据
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream)=>{
      recorder = new MediaRecorder(stream)
    }).catch((err)=>{
      console.log(err);
    })
  }
  else console.log('浏览器不支持getUserMedia')

  let startSpan = document.querySelectorAll('span')[0]
  let endSpan = document.querySelectorAll('span')[1]
  startSpan.addEventListener('click',function(){
    recorder.start()
    recorder.ondataavailable = function(e) {
      blobAudio.push(e.data)
    }
  })
  endSpan.addEventListener('click',function(){
    recorder.stop()
  })

将音频数据生成URL,赋给`<audio>`标签

!!!URL.createObjectURL()的参数必须是blob对象

  let recorder = null
  let blobAudio = [] //用来存储音频数据
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream)=>{
      recorder = new MediaRecorder(stream)
    }).catch((err)=>{
      console.log(err);
    })
  }
  else console.log('浏览器不支持getUserMedia')

  let startSpan = document.querySelectorAll('span')[0]
  let endSpan = document.querySelectorAll('span')[1]
  let audio = document.querySelector('audio')
  startSpan.addEventListener('click',function(){
    recorder.start()
    recorder.ondataavailable = function(e) {
      blobAudio.push(e.data)      // blobEvent对象的data属性才是存储的blob数据
      console.log(blobAudio);
      let blob = new Blob(blobAudio)       // 此前只是把blob数据存储在数组中，必须把数组转化为blob对象才能生存url
      audio.src = URL.createObjectURL(blob)

      //audio.src = URL.createObjectURL(e.data)      //小体积音频直接把blobEvent对象的data属性直接生成url
    }
  })
  endSpan.addEventListener('click',function(){
    recorder.stop()
  })

关闭页签小红点

媒体流 (MediaStream)的方法和属性

  let recorder = null
  let blobAudio = [] //用来存储音频数据
  let mediaStream = null // 用来存储媒体流
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream)=>{
      mediaStream = stream
      recorder = new MediaRecorder(stream)
    }).catch((err)=>{
      console.log(err);
    })
  }
  else console.log('浏览器不支持getUserMedia')

  let startSpan = document.querySelectorAll('span')[0]
  let endSpan = document.querySelectorAll('span')[1]
  let audio = document.querySelector('audio')
  startSpan.addEventListener('click',function(){
    recorder.start()
    recorder.ondataavailable = function(e) {
      blobAudio.push(e.data)      // blobEvent对象的data属性才是存储的blob数据
      console.log(blobAudio);
      let blob = new Blob(blobAudio)       // 此前只是把blob数据存储在数组中，必须把数组转化为blob对象才能生存url
      audio.src = URL.createObjectURL(blob)

      mediaStream.getTracks().forEach(track => {
        track.stop()           // 关闭媒体流的所有轨道
      });

      //audio.src = URL.createObjectURL(e.data)      //小体积音频直接把blobEvent对象的data属性直接生成url
    }
  })
  endSpan.addEventListener('click',function(){
    recorder.stop()
  })

JS 录音功能

步骤