如何使用Javascript在移动Safari和所有其他浏览器上录制音频？

Question

I simply want to record audio in all browsers, in desktop browsers as well as in mobile (iOS/Android) browsers.

I have written some Javascript which is working in Chrome browser at desktop. But when I try this on iPhone 7 with Safari/Chrome; it is not working.

As per my understanding, this has to do with the different mobile browser API's. So I need to change the code so that it is supporting all types of browser API's.

How can I change the code so that is supporting all the browsers?

'use strict'

var log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter = 1,
  chunks,
  media;



var mv = id('mediaVideo'),
  mediaOptions = {
    video: {
      tag: 'video',
      type: 'video/webm',
      ext: '.mp4',
      gUM: { video: true, audio: true }
    },
    audio: {
      tag: 'audio',
      type: 'audio/ogg',
      ext: '.ogg',
      gUM: { audio: true }
    }
  }



media = mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {

  stream = _stream;
  id('btns').style.display = 'inherit';
  start.removeAttribute('disabled');
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = e => {
    chunks.push(e.data);
    let blob = new Blob(chunks, { type: media.type })
      , url = URL.createObjectURL(blob)
      , li = document.createElement('li')
      , mt = document.createElement(media.tag)
      , hf = document.createElement('a');

    if (recorder.state == 'inactive') makeLink(url, li, mt, hf);
    let reader = new FileReader();
    reader.addEventListener('load', e=>{
        var url = "http://localhost:8080/rest/api/v1/audio/submit";
        var payload = '{"recording":"'+reader.result+'"}';
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST",url,true );
        xhttp.setRequestHeader('Content-Type', 'application/json');
        xhttp.send(payload);
    });
    reader.readAsDataURL(blob);
  };


}).catch(log);


start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks = [];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink(url, li, mt, hf) {

  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `${hf.href}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);


}

Answer 1

I think that audio recording is still not working with Chrome on iOS. It does work with the safari browser. But you can not use the MediaRecorder, instead you have to use the Media Capture and Streams API. Here is a link to that: https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API