Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

First blob comes as text / html. Expected audio/webm

See original GitHub issue

I’m recording and generating the blobUrl, to store I’m turning it into a file, but halfway through I realized that the blob is coming as text / html.

This is my handle code:

 const handleBlob = async () => { 
    let blob = await fetch(mediaBlobUrl).then(r => r.blob());
    console.log("[REC BLOB URL]", blob)

    let fileBlob = new File([blob], new Date().toISOString()+"_recording.webm" ,{ type: "audio/webm" })
    return fileBlob

The first thing that the “REC BLOB URL” return is this:


And render this:


If i take that file link, for some reason what comes is a video.


Also, when I try to record another audio, the result is an audio / webm, however with the content of the previous audio.

That is, if I record a 10s audio for the first time (when a text / html is returned), when I record again what comes is this 10s audio (regardless of how long I recorded). And it remains. Audios always come late, always with the content of the previously recorded.

Why does it happen? OBS: Im using redux and socket to send this to a chat.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

oberdan-devcommented, Aug 26, 2022

Hello, use onStop callback as below:

  const blobToFile = (theBlob: Blob, fileName: string): File => {
    return new File([theBlob as Blob], fileName, {
      lastModified: new Date().getTime(),
      type: theBlob.type,

  const { status, startRecording, stopRecording, clearBlobUrl } =
      audio: true,
      stopStreamsOnStop: true,
      blobPropertyBag: {
        type: "audio/webm",
      onStop: async (blobUrl, blob) => {
        const file = blobToFile(blob, "audio.webm");
Guuri11commented, Sep 21, 2022

Finally I could fix it! onStop callback worked for me. My guess for the blob coming as text/html is because doing the fetch when the blob is not created yet, check the value of blobUrl before the fetch.

Read more comments on GitHub >

github_iconTop Results From Across the Web

MediaRecorder timeslice segments - only the first segment plays
I can "approximate" desired behavior by doing this and then ignoring blobs that are less than some threshhold to ignore the "dead gap"...
Read more >
1515658 - Incorrect audio duration is displayed for a blob ...
For example, 440Hz 0:05.00 wav found in [Expected result]: The correct audio duration is displayed: 0:00 ...
Read more >
Capture audio and video in HTML5 -
HTML Media Capture only allows you to record a media file or take a snapshot in time. Support: Android 3.0 browser - one...
Read more >
The video element - HTML - whatwg
Audio descriptions can be embedded in the video stream or in text form ... frame of the video (typically one of the first...
Read more >
Speech-to-Text request construction - Google Cloud
Synchronous Recognition (REST and gRPC) sends audio data to the Speech-to-Text API, performs recognition on that data, and returns results after all audio...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found