5 ms·

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 t

by mg 1y ago

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?

__jonas 1y ago
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.
- mg 1y ago
  Traversing local directories is supported via the File System Access API in browsers these days: https://stackoverflow.com/questions/64283711 https://stackoverflow.com/questions/64283711 It works nicely in Chrome on the desktop and on Android. Not sure how the situation is on iOS.
  - miramba 1y ago
    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 https://caniuse.com/native-filesystem-api Edit2: Just a few posts down: https://webamp.org/ https://webamp.org/
    - mg 1y ago
      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.
lukan 1y ago
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.
matteason 1y ago
It's actually surprisingly hard to get iOS Safari to keep playing audio with the screen off. When I made https://ambiph.one 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 https://codepen.io/matteason/pen/VYwdzVV
- egglemonsoup 1y ago
  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!!!
  - matteason 1y ago
    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
- thorum 1y ago
  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.
  - matteason 1y ago
    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
ochrist 1y ago
I use an app in NextCloud called Music. I can use this from all my devices.

by mg 1y ago

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?

__jonas 1y ago

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.

mg 1y ago
Traversing local directories is supported via the File System Access API in browsers these days: https://stackoverflow.com/questions/64283711 https://stackoverflow.com/questions/64283711 It works nicely in Chrome on the desktop and on Android. Not sure how the situation is on iOS.
- miramba 1y ago
  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 https://caniuse.com/native-filesystem-api Edit2: Just a few posts down: https://webamp.org/ https://webamp.org/
  - mg 1y ago
    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.

lukan 1y ago

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.

matteason 1y ago

It's actually surprisingly hard to get iOS Safari to keep playing audio with the screen off. When I made https://ambiph.one 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 https://codepen.io/matteason/pen/VYwdzVV

egglemonsoup 1y ago
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!!!
- matteason 1y ago
  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
thorum 1y ago
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.
- matteason 1y ago
  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

ochrist 1y ago

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