zlacker

[parent] [thread] 12 comments
1. rickca+(OP)[view] [source] 2025-07-25 23:04:53
I dream of developing mobile sites that can play audio with the screen off and use the same media controls as apps (think: music player apps while driving). A lot of the things that make mobile sites second class is the lack of screen-off functionality.
replies(8): >>ryao+z >>foxfir+N >>garcia+Q >>add-su+d1 >>quickt+L1 >>wonger+w3 >>Aachen+o4 >>owebma+rZ2
2. ryao+z[view] [source] 2025-07-25 23:08:47
>>rickca+(OP)
I have done this to videos on my iPhone using extensions called baking soda and vinegar. I then put the video into Picture in Picture mode, turn off the phone, turn it on, press the play button and turn it off again, with the audio still playing. It is not as convenient as the YouTube application, but I cannot copy and paste text from paused videos in the YouTube application or in YouTube comments either.
replies(1): >>owebma+GZ2
3. foxfir+N[view] [source] 2025-07-25 23:09:51
>>rickca+(OP)
You sure can: https://developer.mozilla.org/en-US/docs/Web/API/MediaSessio...
4. garcia+Q[view] [source] 2025-07-25 23:10:20
>>rickca+(OP)
The Video Background Play Fix extension for Firefox on Android comes close.
5. add-su+d1[view] [source] 2025-07-25 23:12:45
>>rickca+(OP)
Ironfox/Firefox keeps playing audio when the screen is off and can pause/play from the lock screen and notification pulldown screen. I wrote a simple music player around the html audio tag.
6. quickt+L1[view] [source] 2025-07-25 23:18:47
>>rickca+(OP)
iOS Safari does this, at least on bandcamp and SoundCloud.
7. wonger+w3[view] [source] 2025-07-25 23:33:29
>>rickca+(OP)
You should! The browser APIs are straightforward:

  navigator.mediaSession.metadata = new MediaMetadata({
    title: song.name,
    album: song.category,
    artwork: [{src: song.imagePath, type: 'image/jpg'}]
  })

  navigator.mediaSession.setActionHandler('play', player.play)
  navigator.mediaSession.setActionHandler('pause', player.pause)
  navigator.mediaSession.setActionHandler('nexttrack', player.nextTrack)
  navigator.mediaSession.setActionHandler('previoustrack', player.prevTrack)
  // song and player are instances of state
Then you get those native media controls. Even stuff like "hey google, play/pause/skip"
replies(1): >>sltkr+Bc
8. Aachen+o4[view] [source] 2025-07-25 23:40:48
>>rickca+(OP)
I wish Android would let apps run with the screen off. The text to speech api kills itself after a few minutes, halfway through the blog post I'm having it read to me... It works if I keep the screen on but then I can't put it in my pocket and it drains the battery way faster

Browser or native doesn't matter, both have this issue. Heck, this is Google's own software that gets killed: the utility that submits the string to it is still there when I unlock the screen. It's probably just me but I really miss the Android 4 which I had customised to death so it would only run the things I wanted (no bloat): the battery still lasts weeks (the device is >10 years old!) if you don't ask it to do anything because nothing runs in the background. However, when I choose to run an app and don't turn it off before locking the screen, it'd just keep running

But yea, that wouldn't work for the general public

◧◩
9. sltkr+Bc[view] [source] [discussion] 2025-07-26 00:57:19
>>wonger+w3
Does it work on iOS too?
replies(2): >>wonger+ci >>master+tl
◧◩◪
10. wonger+ci[view] [source] [discussion] 2025-07-26 02:05:29
>>sltkr+Bc
MDN says yes as of iOS 15. Don't have an iPhone to double check atm.
◧◩◪
11. master+tl[view] [source] [discussion] 2025-07-26 02:48:07
>>sltkr+Bc
Yes: https://caniuse.com/mdn-api_navigator_mediasession

Try using Spotify's mobile web app for an example. Works great.

12. owebma+rZ2[view] [source] 2025-07-27 13:03:59
>>rickca+(OP)
You already can do that with Firefox. When you start playing something, lock the device and turn on the screen it shows media controls and you can listen to the audio. It works for youtube, for example.

Meaning the Web App experience is actually better than the native app

◧◩
13. owebma+GZ2[view] [source] [discussion] 2025-07-27 13:06:25
>>ryao+z
It works without extensions in Firefox + Android doing exactly the same thing (besides the picture in picture mode).
[go to top]