This blog post details the technical challenges and solutions for a custom music streaming website. The author explains how a recent browser update broke the old audio streaming logic, necessitating a new approach using Media Source Extensions and mp4-box.js to handle Bilibili's m4a format. The post also covers the motivations for building a custom platform, including resource integration and playback control, and mentions its Next.js and Vercel-based architecture.
I think I'm using this bbs as a blog, lol.
Anyway, first of all (ignore my broken English)
Well, it really is too broken, needs fixing
An out-of-the-box status detection page, works great: kener
The key issue is why the old logic failed: they recently updated the audio logic.
All browsers have changed, both Edge and Chrome have been updated.
Originally, I forced modifications to the response range, for example, if you requested 0 to the end, I would return 300,000 bytes to speed up the response.
But this doesn’t work in the new version. It seems some judgment logic has been added, causing the response to be rejected.
So I had to rework it using Media Source + Blob URL and manually rewrite the fetching logic.
The m4a format used by Bilibili belongs to the MPEG-4 family, which is compatible with browsers, and there are existing libraries (mp4-box.js is great).
One important point is that the buffer for the Media Source’s appendBuffer method must align with the boxes (in MPEG-4, there are many boxes containing different things, like file information, the audio itself, etc.). That’s why you’ll notice that the range requests for Bilibili are some strange numbers, not round ones.
Since the formats used by online platforms must support chunked loading (you wouldn’t want to have to download an entire 2-hour video on Bilibili before being able to play it, right?), it works smoothly.
Let me explain what I’m doing: This is a website for playing music.
The reason for not using existing large music streaming platforms is:
Music resources are scattered, and creating a platform that integrates all resources (though it’s challenging, for example, QQ Music requires login) is more convenient.
It allows for better control over playback logic (we can do advanced things like using machine learning to index songs and control playback styles).
Volume normalization (you wouldn’t want one song to be as quiet as a mosquito and the next to shatter your eardrums, right?).
Mobile device support (web pages are arguably the most compatible) (Sadly mobile explorers doesn't support much of the media api).
...
So, I have a Next.js website on Vercel, an API also on Vercel (it’s better to separate them, right?), and another API on Alibaba Cloud because accessing Bilibili from abroad is too slow (CORS at work, had to do it).
Then, regarding the expired key mentioned in the previous post, I signed one for 5 years:
Funny stuff:
