I Built My Own Audio Player

I wonder if one could build this in HTML, so there is no need to install anything.

On both iOS and Android, HTML can play videos and mp3s while the screen is turned off. So maybe it is possible?

They specifically ditched react-native because of their requirements regarding file system traversal, so this is definitely not something that could have been done in-browser.

Sure, I did it 13 years ago and still use it daily. On a PC though, mostly. (But the actual player was mobile first, as it was my remote connection to the PC that is connected to the bass box. But works also standalone.)

I just never polished it to publish it, but it is quite easy and I guess ChatGPT can help with the basics as no arcane knowledge is required. (Except maybe the playing while screen is off.)

You also need a small node script, though or something different with system access to scan the media files. I think in browser tools make this now somewhat possible without(beware of security restrictions), but my approach is simply a node script scanning the music folder and generating a list that the media player consumes to find files for the player. I still didn't got around to make it automatic, but I don't add so much music (anymore).

I guess I will give it a try to see, how good it works a mobile player nowdays. I always wanted to upgrade it, so I can connect to spotify from my player as I hate the spotify mobile app.

Traversing local directories is supported via the File System Access API in browsers these days:

https://stackoverflow.com/questions/64283711

It works nicely in Chrome on the desktop and on Android. Not sure how the situation is on iOS.

It's actually surprisingly hard to get iOS Safari to keep playing audio with the screen off.

When I made https://ambiph.one I ended up having to route everything through a MediaStreamAudioDestinationNode to trick Safari into thinking it's a livestream, which is apparently the only type of audio allowed to play in the background

Minimal demo here if it's helpful for anyone: https://codepen.io/matteason/pen/VYwdzVV

But unfortunately not on Safari respectively the iOS webview, which would have been mandatory for the author to use. If I am wrong, I‘d gladly take a solution. I think this is one of the main problems for PWAs: No good , platform-independent way to access the local file system. As in „pick once, access forever“.

Edit: https://caniuse.com/native-filesystem-api

Edit2: Just a few posts down: https://webamp.org/

Hey Matt! I've been a fan of Ambiphone for a while and I see your comments on HN surprisingly often. I've been trying to build a different web audio player with inspiration taken from yours. I haven't figured out the screen off audio thing, so thank you so much for sharing this demo!!!

The solution I found after approximately two months of struggling with this problem: you have to generate an audio file that is a few seconds of silence, play it on a loop, and play it at the same time as the actual audio file you want to play (via separate audio elements, or an AudioContext). Specifically I believe you need to make sure the silence is “playing” at track boundaries for the real audio, so there is never a single moment where your webapp stops playing audio.

I see.

That's a pretty big argument to go with an Android phone.

Being able to write your own tools in HTML is so nice.

Does iOS let you play multiple audio at the same time?

Thanks so much, that's really cool to hear! Let me know if you ever hit any more problems, I've been meaning to blog about a bunch of problems I had to work round in various browsers but haven't got round to it yet, so happy to answer any questions

Ohhh that's interesting, so the root cause for my workaround working might be that the "live" audio node that I stream everything else to effectively never stops

I use an app in NextCloud called Music. I can use this from all my devices.

I have been able to have multiple streams on iOS, but not easily. GarageBand might be able to do this via imports, but I’m not sure it it lets you queue/play multiple samples simultaneously like it will on macOS iirc.

If you are playing music through Spotify in the background, foreground audio in Snapchat still plays normally while recording and playing back just recorded snaps, as well as snaps or memories you have prepared earlier. Sometimes you need to start playback on Spotify again via Control Center, because Snapchat steals focus or takes priority for audio output or something, but it is just part of the jankyness of this workflow, which is probably not intentionally designed to be used the way I use it. If you combine these quirks with Screen Recording, you can make simple audio loops by recording simultaneously via Snapchat and iOS Screen Recording, then use those videos as uploads to Snapchat to stack the loops over each over by selectively queuing them, with audio from a video in Snapchat playing at the same time as audio from Spotify.

It’s kind of a weird workflow, but it’s neat that it works. It feels intentional, as most apps stop background audio playback when starting recording on the same device, but at least Snapchat does not do this, so it’s at least technically possible.

How do you even accept to use/and develop for a device that forces you to do that?

It works on iOS 18. Safari’s audio support was pretty rough on earlier versions, especially <17, but I didn’t need to support those for my project.

Apple makes webapps/PWAs hard because they want you to make a native app instead.