search

ReadAlongs / Studio-Web-archived

ReadAlong Studio Web Interface
Other
2 stars 2 forks source link

Downloaded audio file should be reusable in app #9

Closed joanise closed 1 year ago

joanise commented 2 years ago

Currently, if you record audio and download it, you get a .webm file. But the upload button only supports .mp3 and .wav so you cannot reupload that file back to use it again.

dhdaines commented 2 years ago

Good catch. Another example of the horror that is audio on the web... literally nobody uses .webm anywhere else, yet it is the only format that can reliably be produced by the MediaStream Recording API.

Amazingly enough, this lovely API will not tell even you what formats it supports, you have to guess: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported

joanise commented 2 years ago

ugh... we can't even produce .mp3 reliably? That ought to be old enough to be everywhere?

dhdaines commented 2 years ago

Ah, actually, yes, mp3 should work on everybody's browser as long as it's relatively recent: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs#mp3_mpeg-1_audio_layer_iii

Which would explain why CommonVoice is using it despite its unsuitability for speech data.

joanise commented 2 years ago

Update: 31b6a00b57 in dev.mono-repo branch allows uploading a .webm file, but if I do that, I get a Error: The audio file could not be loaded message in Step 2. So we're not done yet with this issue.

dhdaines commented 1 year ago

Ah, ok - this should be simple enough to solve, as .webm can definitely be decoded with decodeAudioData and if not there ought to be some third-party libraries on npm that can help us.

dhdaines commented 1 year ago

This actually should work, but the issue is that when we reupload it, it gets assigned the MIME type video/webm when it needs to be audio/webm to be loaded by the web component.