Remove/disable the "live" button when using a Blob as an audio source

[TasseDeCafe]

Hi!

I'm generating an audio blob recorded with the microphone in the browser, and storing it in my src state like this:

My environment: localhost on Chrome desktop. I'm developing a React app.

const url = URL.createObjectURL(blob)
    setSrc({ src: url, type: 'audio/mpeg' })

In then simply pass the src state to the MediaPlayer like this:

<MediaPlayer title={title} src={src} ref={ref} viewType='audio'>

This works correctly, but when using the default layout, this "live" button appears:

I tried to disable it by passing a "null" slot, but it doesn't seem to affect it. Passing streamType='on-demand' also doesn't seem to affect it.

What am I doing wrong here? This audio source is not live, it's a pre-recorded audio blob.

Thank you for your help.

[TasseDeCafe]

As a follow-up to this, I ended up finding out that you can pass duration={duration} in the MediaPlayer, and you can calculate the of the blob like this:

export const getBlobDuration = async (blob: Blob): Promise<number> => {
  const audioContext = new AudioContext()
  const arrayBuffer = await blob.arrayBuffer()
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
  const duration = audioBuffer.duration
  audioContext.close()
  return duration
}

I'm not sure if that's the best solution, but that removes the "live" button because the duration is now set.

[mihar-22]

Thanks heaps for the update @TasseDeCafe! If you can make a repro then I'd love to look into it further and fix any issues.

[TasseDeCafe]

I ended up realizing that the issue was the fact that Chrome doesn't provide the duration data for the webm format when you record audio inside the browser. The audio is also not seekable. I fixed the problem with this library: https://www.npmjs.com/package/webm-duration-fix

[lchMemory]

I'm facing the same problem. When I assign the URL of a Blob file, which is generated from browser recording, to the player, I've specified the format with streamType='on-demand', yet it still defaults to the live layout mode. I hope the player can address this issue internally. Thanks for your assistance.