Question:
There are several issues with my music website, but ill focus on the two main ones.
Question 1: Is there a way to add a “playlist” to my audio? Specifically, playlist browsing. The Ford F-150 Lightning’s Infotainment system has a page which shows all the songs in a playlist, and I want to be able to add this feature to my website, so when listening in the car it shows each song in said playlist.
Question 2: I use the MediaSession API to add metadata to the currently playing audio. However On Mobile, if you do not have the app on screen, the metadata will disappear when the audio stops playing. How do I make the audio continue playing, even when the screen is locked?
(In case its important, im using an iPhone 12 Pro, running IOS 17.4.1)
EDIT 1: Ill add a picture for reference to question one when I have the chance
EDIT 2: All MediaSession code is in /scripts/audioplayer.js
EDIT 3: Reworded question 1
This is quite complicated due to iOS restrictions and safety measures. The way to likely have more success in achieving this is to turn your webapp into a hybrid app, with frameworks like React Native or Cordova.
If that is not possible…
You can check if the <audio> tag is being used correctly or try to add a Web App Manifest so you influence how iOS treats your app.
The way to go is to use HTML/JS, there’s plenty of tutorial around the web to help you.
Like this one: