我将如何将 mp3 文件打包到 mp4 容器中？

Question

So here's the issue that I'm currently having. I need an audio player for iOS that will play mp3. Now at first glance this may seem like a trivial issue, just create an audio tag and give it the URL to the mp3 file. While this technically works, it's basically unusable since iOS needs to download the entire file before starting to play it. This results in a really long wait time when trying to play large mp3 files (could get close to a minute). So the first thing I tried was to manually mimic the chunking that chrome does for playing mp3 files. I first sent a HEAD request to get the byte length of the audio file. Used that length / duration in seconds to get the average bytes per second and use that data to request chunks based on where the user seeks to. That didn't work since sometimes mp3 files contain metadata that throw off the calculation (like a cover image). Additionally, sometimes mp3 files use VBR (Variable Bit Rate) and then I'm well and truly screwed.

So this lead me to thinking, Safari couldn't possibly require the end user to download an entire mp4 file before playing it. So I took an mp3 file, converted it to mp4 on an online converter and tested my theory out. Voila, it worked. Safari was streaming the mp4 file in chunks and the wait time went to close to 0. Alright, so now all I need to do is convert mp3 files to mp4 files. The problem now is, I have requirement not to use my server for converting these files. I want to offload this expensive operation to the client. After looking around for a bit I found a few wasm libraries to do this, great! Nope. These wasm libraries are huge (24 MB) and would add an unacceptable amount to my already large bundles files. So this brings me to my question. Is there any way to "trick" safari into thinking that my mp3 file is mp4. What I've tried already:

On input change event -> get the file -> clone it into a new Blob with a mimeType of video/mp4 and then upload that file to the server. Chrome plays this file no problem (probably because it detects it's an mp3 file), on Safari however it's unable to play the file.

So my question is, is there any way to package the mp3 file in an mp4 container (Client Side !important) to "force" Safari into chunking the file.

Answer 1

Is there any way to "trick" safari into thinking that my mp3 file is mp4

mp4 files are not seekable because the client "thinks" they are mp4. They have an index in the file that is required for the seeking to work. That index does not magically exist because the mime type was changed.

is there any way to package the mp3 file in an mp4 container (Client Side...

Yes, totally. But you must write the code and it is very complicated. You can read ISO 14496-12 document to understand how mp4 files are structured. and ISO 11172-3 and ISO 13818-3 to parse the Mp3 into frames that can be written to the MP4

Answer 2

I did this very thing last month, i only needed it for a 128kbps CBR mp3 live stream so i hard coded something to support that specific format, it can be modified to specifically support different bit rates though, but probably not VBR :/. Posting it here in case its of use to anyone dealing with firefox not playing an mp3 using mediasource extensions: https://gist.github.com/fanfare/0fa525af28b275fd6623942d7e9d70dd