wsdo/recording

实现html5 录音

h5 录音组件

兼容问题

h5录音主要使用AudioContext 和 getUserMedia 兼容性还是很差的，尤其是在移动端。

AudioContext

getUserMedia

ios端支持情况

Chrome 浏览器，QQ浏览器， （safari 除外）几乎都不支持

同样问题： 不支持 navigator.getUserMedia 不支持 navigator.mediaDevices.getUserMedia 不支持 navigator.mediaDevices

影响到以下浏览器 （除了safari 外）

ios Chrome 不支持 getUserMedia
ios 手机QQ 不支持 getUserMedia ios QQ浏览器 不支持 getUserMedia ios uc浏览器 不支持 getUserMedia

安卓端支持情况

Chrome 支持友好

汇总支持情况表格

2018年04月11日 测试情况

请忽略，看下面表格（预留格式，可以使用markdown格式化表格）

浏览器    版本    mac  安卓  ios  
Chrome   最新版  兼容  兼容  不兼容
QQ浏览器  最新版  兼容  �不兼容  �不兼容
手机QQ    最新版  不需要  支持  不支持
uc浏览器  最新版  不需要  支持  不支持

格式化后的表格

浏览器 | 版本 | mac | 安卓 | ios | ----|----|-----|----|-----|- Chrome | 最新版 | 兼容 | 兼容 | 不兼容 QQ浏览器 | 最新版 | 兼容 | �不兼容 | �不兼容 手机QQ | 最新版 | 不需要 | 支持 | 不支持 uc浏览器 | 最新版 | 不需要 | 支持 | 不支持 �

�兼容方案

�> 开发的时候分别照顾到以上的场景，

• 如果在html5嵌入到app端，调用app的api即可
• 如果在微信的场景，直接调用微信里面的�录音api
• 如果是普通的浏览器，尽量把兼容的方式写好

测试记录

苹果手机需要内核大于 webkit > 605 Safari 才支持

ios目前只有Safari 支持

支持格式

目前仅支持mp3格式 后期会支持wav格式

测试demo

先把demo把需要应用的场景测试一遍,再进行业务开发

测试地址

https://shudong.wang/recorder/demo

选项

    import Recorder from 'recorder'

    配置：
    const config = {
      sampleRate: 采样率：默认：44100,
      bitRate: 比特率默认：128
    }

    new Recorder(this.microphone, config)

开始录制

  this.recorder.record()

停止录制

this.recorder.stop()

清除

this.recorder.clear()

停止录制完回调mp3

recorder.exportAudio((blob) => {
  var url = URL.createObjectURL(blob);
  //在此处上传到静态服务器
});

使用方式

普通demo

  navigator.mediaDevices.getUserMedia({ audio: true })
  .then(startUserMedia)
  .catch(errorHandler)

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);

    var config = {
      sampleRate: 16000,
      bitRate: 16
    };

    recorder = new Recorder(input,config);
  }

  function startRecording() {
    recorder && recorder.record();
  }

  function stopRecording() {
    recorder && recorder.stop();
    recorder && recorder.exportAudio(function(blob) {
      var url = URL.createObjectURL(blob);
    });
    recorder && recorder.clear();
  }

in react demo

import recorder from 'h5-recording'

componentWillMount() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(this.sucessHandler)
      .catch(this.errorHandler)
  }
  componentWillUnmount() {
    this.audioContext.close()
    this.recorder.clear()
  }

  getAudioContext = () => (
    window.AudioContext ||
    window.webkitAudioContext
  )

  start = () => {
    this.recorder.record()
  }

  stop = () => {
    this.recorder.stop()
    this.recorder.exportAudio(function (blob) {
      var url = URL.createObjectURL(blob);
      //在此处上传
    });
    this.recorder.clear()
  }

  sucessHandler = (stream) => {
    this.microphone = this.audioContext.createMediaStreamSource(stream)
    const config = {
      sampleRate: DEFAULT_SAMPLE_RATE,
      bitRate: DEFAULT_BIT_RATE
    }
    this.recorder = new StarkRecorderJs(this.microphone, config)
  }

  errorHandler = (error) => {
    const { onError } = this.props
    onError(error)
  }

recording's Issues

请问支持IOS和Android下面的微信公众号吗？

是否突破微信公众号API录音60秒的限制？

再次录音会报错

第二次录音会报错
Uncaught RangeError: offset is out of bounds

录制出来的声音被拉长 变调了

运行环境:
Microsoft Windows [Version 10.0.16299.371]
Google Chrome
版本 67.0.3396.30（正式版本）beta （64 @位）

测试地址 https://wsdo.github.io/recording/
录音文件 https://drive.google.com/open?id=1JqwB8xm5j4Id3z8sfbGKuodnU6kq13Bq

线上bug及常见问题

1、必须本机访问（127.0.0.1/localhost）或者访问地址必须是https开头才能调用系统的音频函数，才能正常录音
2、在线demo只能进行一轮开始录音和停止录音，到第二轮的时候会报错，是因为在clearRecordedData()函数中的leftChannel = rightChannel = [];导致的，因为这样它们指向的就是同一个对象引用，当leftChannel进行push操作时，rightChannel也会变化。所以会导致leftChannel和rightChannel的长度翻倍，从而在mergeBuffers()函数中的result.set(buffer, offset);的时候会报错。
解决办法是：clearRecordedData()函数中将leftChannel = rightChannel = []; 变成 leftChannel = [];
rightChannel = [];