Hi, thanks for this very useful polyfil,

My question is: There is any way to avoid overidding the original MediaRecorder?

In my project It looks like something like:

import * as MediaRecorderPoly from 'audio-recorder-polyfill';

Still overrides it globally, and that kind of behaviour is what I wanted only safari and edge to do

Hi there,

I was researching for libraries that handles audio recording for my react pwa for both iOS and Android. I was wondering if this library can be used together with react? If yes, is there any examples out there?

The standard MediaRecorder API specifies an error event:

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onerror

I propose that error be added to the list of supported event types in order to more closely mirror the spec, and trigger it throughout to more consistently handle errors.

P.S fantastic work on this polyfill!!!!

Polyphill start record on ios (13), but can't play records sound after stop. What's wrong?

Reference to iOS supported? #36!!

It's working on IPhone XS, IPad etc but not on IPhone X.

After the recording is stopped, not error, but the wav file it's not playing and it's invalid.

Hi, I develop using a buildless environment. How can I get a built version of the polyfill to include to my project ? Tried to build the repo but failed on node-env
Thanks

I'm looking forward for this polyfill :)

In the current version I have a problem with the playback of the blob in ios safari 11 (problem is also in the demo). Making the blob into url using createObjectURL() and attach it to a player don't work in ios safari 11.

Any chance it would also record video type streams? :)

Hello. Chrome (84.0.4147.125) Android and IOS
No request for a microphone in Chrome mobile browser.

error:
Uncaught (in promise) DOMException: Permission denied

As in mode: native

And in mode: force polyfill

Hello,

I have some trouble on Safari 11 for playing the recorded sound.
It seems like the blob created doesn't load.

It used to work before and now the safari player is broken.
I first thought it has to do with my code but then I went back to your demo and there is the same bug.

Are you aware of this problem and do you have any clues to solve it ?

Thanks you in advance

Do you happen to have a sample code to upload the blob data as WAV to my server or bucket and share the link with another user?

Thanks

Hugo

Hi, can you please let me know how to download the recorded audio file?

Do you plan to support typescript? Types are missing

Hello, on recent version Safari some of recordings are 44 bytes size with no audio. Aprox. 70percents of the recordings are good, 30percents - no audio. No apparent reason i can think of. Whats the problem?

I received this error when terminating the recording with a timer and can absolutely not figure out why it appears.

The error references https://github.com/ai/audio-recorder-polyfill/blob/master/index.js#L133 as the source of the issue, but since the class clearly has a method of that name i'm a bit lost on why the error gets thrown.

Sorry if i'm not seeing the clear issue here.

I'm using the suggested polyfill implementation given in the README with Webpack.

Thank you for your help :)

During development phase, I need to use a built version of the polyfill. I ran 'npm run start' and a /test/demo/build directory was created.
I added <script src="/audio-recorder-polyfill-master/test/demo/build/polyfill.js"></script> in index.html.

How do I access the library ? In particular I want to compress files in mp3. I am not sure how to use
https://github.com/ai/audio-recorder-polyfill#mp3 with the built library.

During the process of blob creation, it is throwing the above error on Mac OS Safari Browser both in local and the online demo site.

Hi, we've created a website that lets people record 2 minute audio clips and then upload them. It looks like on lower end mobile devices we get very choppy recordings, for example:

https://prod.roundware.com/rwmedia/20200611-144343-72862.mp3

Which I think was recorded on an android 8 device:

Mozilla/5.0 (Linux; Android 8.1.0; 6062W) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36

Our code is basically the example from your readme, but configured to create the blob as mp3. (Here's a snippet)

// Record with mp3.
MediaRecorder.encoder = mpegEncoder;
MediaRecorder.prototype.mimeType = "audio/mpeg";

startRecordButton.addEventListener("click", () => {
  console.log("Start recording!");

  // Request permissions to record audio
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
    recorder = new MediaRecorder(stream);

    // Set record to <audio> when recording will be finished
    recorder.addEventListener('dataavailable', e => {
      console.log('data available: ' + e.data.size);
      saveBlob = e.data;
    })

    // Start recording
    recorder.start();
  })

Is there any way to improve the quality of recordings on these lower end devices? The glitching seems to happen even for short audio recordings, so it doesn't seem like it's the size of the blob that causes it.

Thanks.

I use the polyfill for explain.mit.edu, which syncs the audio to blackboard visuals.

However, I noticed that when I switched from the WAV encoder to the MP3 encoder, my voice becomes deeper and slower, and the visuals gets more and more ahead of the audio (1 second ahead after 10 seconds, 2 seconds ahead after 20 seconds, etc.). My hypothesis is that the MP3 encoder records at maybe 90% normal speed because the MP3 recorder has a non-trivial encoding process.

A personal workaround is to slow down my app's internal timer to match that of the slowed MP3 audio.
However, I prefer the following solutions (but don't know how):

1. Find a way to do read the MediaRecorder's current timestamp, and let the audio be the source of truth for timestamp. Is this possible?
2. Verify with you all that the MP3 does record in at a slowed rate, and wait til the fix. Is this on your roadmap?

Thanks for reading and appreciate any help.

Would like to use it but not sure how to utilize it without having to change it first. thanks.

When mediaRecorder.start() is called some time can pass until it really records the first sample coming from a media device. Is there a way to know this first sample position in time? Maybe using the AudioContext clock (AudioContext.currentTime).

I need this because I record my voice while reproducing some music and I need to sync it perfectly afterwards.

The documentation provided seems to be inadequate for beginners. Request for a more detailed installation process.
Thanks

Hello
I am experiencing weird issue on iOS Safari. Audio seems to be recorded - time of audio is also compatible to its recording length but still with no sound. Manipulating native controls does not take any effect. I have made an attempt by switching package version into "audio-recorder-polyfill": "ai/audio-recorder-polyfill" as suggested in topic: #24 but no luck with this as well. Here is short summary of what I am trying to achieve. So basically simple click on button is triggering MediaRecorder. It is happening in parallel with Azure's Speech Recognizer SDK:

// first click
const startSpeechRecognition = ({ callback, key, token }) => {
  const speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(token, SPEECH_REGION)
  speechConfig.speechRecognitionLanguage = SPEECH_RECOGNITION_LANG
  const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput()
  const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig)
  const recorder = setupRecorder(callback)

  return new Promise((resolve, reject) => {
    recognizer.startContinuousRecognitionAsync(
      () => recorder.then((r) => {
        r.recorder.start()
        resolve({
          recognizer,
          recorder
        })
      }),
      err => reject(err)
    )
  })
}

Internal call of setupRecorder(callback) is defined as below:

const setupRecorder = callback => navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    const data = []
    const recorder = new MediaRecorder(stream)
    recorder.addEventListener(MEDIA_EVENT.START, (e) => {
      data.length = 0
    })
    recorder.addEventListener(MEDIA_EVENT.DATA_AVAILABLE, (e) => {
      data.push(e.data)
    })
    recorder.addEventListener(MEDIA_EVENT.STOP, () => {
      callback(data)
      recorder.stream.getTracks().forEach(track => track.stop())
    })

    return { recorder }
  })

Second click on button triggers stop for Speech Recognizer and MediaRecorder stop event

// second click
const stopSpeechRecognition = ({ recognizer, recorder }) => new Promise((resolve, reject) => {
  recognizer.stopContinuousRecognitionAsync(
    () => resolve(recorder.then(r => r.recorder.stop())),
    err => reject(err)
  )
})

So callback from "stop" MediaRecorder event handler is invoked with stream data which later is parsed into Blob.

// callback is defined inside Vue's component instance, so that's why you see "this" here
const callback = (data) => {
  const audio = speechService.getAudioData({
    data,
    format: this.audioData.format,
    userId: this.selectUserId()
  })
  this.audioData = {
    ...this.audioData,
    ...audio
  }
}

// and in speechService:
const getAudioData = ({ data, format }) => {
  if (!data) { return }

  const blob = new Blob(data, { type: format })
  const blobUrl = window.URL.createObjectURL(blob)

  return {
    blob,
    blobUrl,
    type: format
  }
}

For an iOS Safari I am using default wav format as pointed in docs.
Any tips what could be wrong?

This is not working
MediaRecorder.isTypeSupported(type)

On iOS 12 calling recorder.stop() has no effect.

Here's my CodePen:

https://codepen.io/tonybogdanov/pen/bQXRBZ

As you can see the code will ask for a microphone, record 2 seconds then stop and report to the console. On browsers with native implementation the console looks like this:

"asking for mic"
"starting"
"event" "start"
"stopping"
"event" "dataavailable"
"event" "stop"

On polyfilled MediaRecorder the output is like this:

"asking for mic"
"starting"
"event" "start"
"stopping"

As you can see neither the stop nor dataavailable events are being fired. Either there's a problem with both, or the stop() call is not executing properly and the recorder continues.

I know, that there is a problem with WAV, due to:

WAV format contains duration in the file header. As result, with timeslice or requestData() call, dataavailable will receive a separated file with header on every call. In contrast, MediaRecorder sends header only to first dataavailable. Other events receive addition bytes to the same file.

But do you have any idea how to properly concat WAV blobs? I'm following docs:

const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/wav" });

mediaRecorder.addEventListener("dataavailable", (e) => {
    chunks.push(e.data);
})

then somewhere:

mediaRecorder.stop();
const blob = new Blob(chunks);
const url = URL.createObjectURL(blob);
audio.src = url;

and the duration of the recorded audio is everytime 1sec. Is it possible to solve this problem somehow?

I tried with Safari on OSX High Sierra and Mojave, the recorded sound feels partially and metallic.
Any suggestions?

Hi I'm sorry,

I don't have a lot of JS experience and don't find the documentation very clear on how to install.
I followed the instructions, installed with npm. I have a simple html site.

When trying to load the polyfill-js I get:
Reference error require is not defined

Is just doing:
npm install --save audio-recorder-polyfill enough?

Also where would this code go on a simple html site?

entry: { app: './src/app.js', polyfill: './src/polyfill.js' }

This is the code I'm using for app.js
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { recorder = new MediaRecorder(stream) recorder.addEventListener('dataavailable', e => { audio.src = URL.createObjectURL(e.data) }) recorder.start() })

I installed Parcel but I'm even more confused now as well.

Spec:

• Safari 13.0.5
• macOS 10.15.3

When I tried the default code on the readme the data in the 'dataavailable' returns invalid data. When looking at these blobs the event only returns two distinct file size: 44B and 4140B. The 44B bit file gives an error in the player while the 4140B file is able to be played but contains no sound.

In order to investigate the issue I looked at the https://ai.github.io/audio-recorder-polyfill/ example but that gave exactly the same results (2 diff files size, both containing no useful information). I looked at the #4 discussion and tried to reboot my pc. This allowed me to get one recording but all recordings after that failed again. I rebooted again but then it gave me directly an 44B file.

If you need further investigating from my side please send.

I'm using this library with create-react-app's latest version and I'm using this lib for audio recording on iOS safari devices.
I created src/polyfills.js and imported this into my src/index.js

the content of src/polyfills.js:

import AudioRecorder from 'audio-recorder-polyfill'
window.MediaRecorder = AudioRecorder

my src/index.js:

...
import './polyfills'
...

my recorder is same as your example:

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
  recorder = new MediaRecorder(stream)
  recorder.addEventListener('dataavailable', e => {
    audio.src = URL.createObjectURL(e.data)
  })
  recorder.start()
})

but it gives me the error:
Uncaught SyntaxError: Unexpected end of input at line 74 (EOF).

There is a difference in native and polyfill MediaRecorders behavior.

With native I can do:

recorder = new MediaRecorder(stream, options)
recorder.start()
recorder.stop()
recorder.start() // start recording second time

With polyfill this work with a bug, so I must do:

recorder = new MediaRecorder(stream, options)
recorder.start()
recorder.stop()
recorder = new MediaRecorder(stream, options) // need re-create recorder
recorder.start()

Bug: When I start recording with polyfill second time (without re-creating) the result audio has stuttering (and has incorrect duration ~x2). When I start recording third time this effect are increased.

Maybe it should be better to make polyfill behave as native MediaRecorder?

When using the latest version 0.3.2 of this (great!) lib, I receive the following error:
Uncaught SyntaxError: Unexpected end of input

I narrowed it down to the createWorker function, which removes the trailing brace "}" for some reason:

let js = fn
.toString()
.replace(/^function\s*()\s*{/, '')
.replace(/}$/, '')

Even when adding back the brace, other issues pop up. Up to and including version 0.2.0 everything worked fine, so the issues must have been introduced with version 0.3.0.

Hi,

I have a problem with the demo.
When I record something, most of the times (unfortunately not always) the first one or two seconds are clipped - meaning that after some silence the audio starts to play with a click. So if I record 'one two three' with a slow voice, I only hear ' ___ (click) two three'.

I wonder why that is?

Thanks, Dirk

When you run the demo in Firefox, everytime you click on the record button you get asked for recoding permission.

I tried to load the:

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        recorder = new MediaRecorder(stream);

Once in the beginning, using reacts componentDidMount, but then the data wont be useable after the second recording.

Any workaround for this?

I understand that it need to be invoked because the getUserMedia() returns a stream object that needs to be passed in .then() but it doesn´t feel right.
In this Demo you are only prompted once (Tested on FF mobile) but the audio isn't recording
https://danielstorey.github.io/WebAudioTrack/index.html

Add shadow to favicon as on demo page buttons

Hi,
I use audio-recorder-polyfill in an angular application.
I have this routine:

    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      this.recorder = new window.MediaRecorder(stream)
      this.recorder.addEventListener('dataavailable', e => {
        //audio.src = URL.createObjectURL(e.data)
      })
      this.recorder.start()
    })

But when it is executed I have this error:

TypeError: Argument 1 ('event') to EventTarget.dispatchEvent must be an instance of Event dispatchEvent

I don't understand what it wants.
I load the polyfill on the Init event.

  public loadScript() {
    this.polyfill = true;
    let body = <HTMLDivElement>document.body;
    let script = document.createElement('script');
    script.innerHTML = '';
    script.src = '/assets/vendor/recorder_polyfill.js';
    script.async = true;
    script.defer = true;
    body.appendChild(script);
  }

  ngOnInit() {
    if (!window.MediaRecorder) {
      this.loadScript();
    }

Tnx

Hi,
I'm trying to embed a recorder in my zend project. I compiled this project by npm run build and it seems that everything is fine with that.
I copied "as is" the compiled index.html in a my view and edited the link to embed polyfill.js.
My project is hosted by a virtual machine (Ubuntu 18)
Chrome returns an error (getUserMedia is null). I can understand it even I think that that could be handled better.
But if I force Polyfill it returns "Your browser doesn’t support MediaRecorder or WebRTC to be able to polyfill MediaRecorder." That is impossible.

Same answer by Safari (actually event not forcing) and Firefox,

What am I missing ?

Thank you

Learn more about the second argument in postMessage(buffer, [buffer]).

404 https://ai.github.io/audio-recorder-polyfill/api/MediaRecorder.html

This urls are broken dbea227

Is there a way to change the bitrate for the mp3 encoder?

Create it from demo page favicon

I had the requirement to record video of the user. As video recording is not supported in iPhone browsers so I used this library to record audio only and take snapshots from video stream. The issue I am currently facing is that this polyfill library gives me a file after recording is completed but with no audio in it. The size and duration of the file is as it is expected to be. All this works fine on other devices even on MacOS Safari but on iPhone safari, it doesn't work.

I think the problem is that video is utilizing both video and audio streams, and when we record access audio stream via polyfill it doesn't give any sound to it or stream with no data

I am currently not able to get this work on browser safari version 12.1.2 with on High Sierra. There are no console errors but e.data has a 44 bytes audio/wav file no matter how long you record. I have the code snippet below -

import MediaRecorder from 'audio-recorder-polyfill';

record = (stream) => {
this.recorder = new MediaRecorder(stream);
this.recorder.addEventListener('dataavailable', this.onRecordingReady);
}

onRecordingReady = (e) => {
let $audioEl = this.refs.audio,
blob = e.data, // this is a 44 bytes audio/wav
that = this;
$audioEl.src = URL.createObjectURL(blob);
$audioEl.play();
this.saveAudioFile(blob);
}

What am i missing? Or is this something that is broken at the moment?

This bug report on bugs.webkit.org tracks the MediaRecorder implementation in WebKit and thus Safari.

I encourage everyone to show their interest and add a comment describing how a MediaRecorder implementation would help their project/development. Creating an account takes a second.

Chrome implemented MediaRecorder in Jan 2016. By that time the MediaRecorder feature request had gathered 2800+ starts on bugs.chromium.org.

Also, WebKit is an open source project so one can also contribute code towards implementing the MediaRecorder API.

Hi! Good evening.

How configure sampleRate? or options of the MediaRecorder base.
I need reduce size of the audios.
{
audioBitsPerSecond : 8000
bitsPerSecond: 8000
}
Thanks!

Hi. I saw the demo. It is fantastic. Is there a way where I can put up a self signed ask certificate and make it working in a intranet ? Can you please guide what steps you filled to deploy in https ? Thanks

Within the Install section of the readme, it is suggested to use document.write(unescape('%3Cscript src="/polyfill.js">%3C/script>')). I believe you could instead use decodeURI().

First of all, thanks for building this great polyfill, it's a life saver on safari.

I saw there's a wav encoder built-in, wondering is there any chance for a mp3 encoder, maybe using lamejs, so that recorded audio files could be played across chrome/firefox/safari?

I'm able to record the audio in Safari Version 12.0 (13606.2.11) Mac OSX High Sierra, but the recorded sound is distorted. Here is the example https://goo.gl/2xY8tp. Do you know anything about this issue?

Thanks.