Audio not playing on iOS or Android (delete my previous issue opened this is my main account)

[OfficialJimmyBatman]

So as my previous issue was saying, on desktop SomaFM runs the audio perfectly fine but on mobile (iOS) SomaFM fails to run automaticly and I have to click play then stop and then play again for it to start playing SomaFM audio. I think this is a bug and requires code to be updated.

Thank You.

[OfficialJimmyBatman]

@rainner I hope you fix this because this is destroying functionality on mobile devices and you make the best SomaFM Player

[CoderPro1930]

I am actually having the same issue however, I discovered this article:

https://stackoverflow.com/a/55490393

This appears to be the same issue that this project is having I suggest @rainner looks at the solution and attempts to implement it into this project. As iOS uses safari this is likely the reason it is failing, they need to add a countdown and add a approved audio element as shown in the solution. I am too lacking on details on this project to implement this myself so @rainner will have to implement it. You should make the START button the play button.

[CoderPro1930]

If @rainner doesn't respond or implement this project will be officially deprecated in my book and I will have to take this into my own hands. this project hasn't been updated for two years. this likely means forking the project and taking ownership. I will give them 3 months to fix this issue.

[CoderPro1930]

@OfficialJimmyBatman I will redirect you to my fork in 3 months if this issue still isn't solved. If I forget please mention me.

[Coding4Life4Ever]

I have actually been having the same issue too with SomaFM at first I thought it was just my device so I left it undiscarded.

@OfficialJimmyBatman @CoderPro1930 @rainner

To make this easier for everyone I have opened a stackoverflow issue:

https://stackoverflow.com/questions/71893861/audio-plays-fine-on-desktop-but-doesnt-play-well-at-all-on-mobile

[rainner]

Hey, I'll look into it this weekend and see what can be done. I ran into similar problems in iOS before but haven't touched this project in a while.

[rainner]

@OfficialJimmyBatman @CoderPro1930 I just pushed some changes that seems to fix the issue. I tested it on Windows, iPad and Android and all seems to be playing now. See if you can confirm.

There are other issues on Safari mobile that I don't think I can do anything about:

• The volume fader doesn't control the audio.
• The sphere wont respond to audio, can't read audio analyzer data on stream urls.

https://bugs.webkit.org/show_bug.cgi?id=211394

Google decided to blacklist my Github pages subdomain for some reason so all the repos I have hosted on here are now "Dangerous" in case you run into the red screen of death. I'll be setting up a different hostname for this player later while I try to resolve this.

Thanks.

[IHaveSomethingfORu2312]

I thought I was the only one having this problem, after you applied these fixes I seem to be able to play audio on iOS. I am curious as to how you fixed it and I am also curious as to why the audio controls don't work nor does the sphere respond to audio on iOS.

[CodingNinja90984294]

I am not sure why @IHaveSomethingfORu2312 and @rainner says the sphere is not working. On my iOS iPad the audio visualizer works and the audio plays correctly, the only thing that doesn't work is showing audio controls in the control center. I'm assuming the reason audio controls doesn't work is listed in the bug report you provided above and will be fixed in iOS 16 likely as it appears this is a problem on Apple's side and not the code.

[rainner]

@IHaveSomethingfORu2312 The issue had to do with the audio api stuff being setup before user interaction. Had to move some stuff around to make sure it creates new audio instances after clicking on something.

@CodingNinja90984294 The sphere is setup to grow to a fixed value when the audio starts playing if no analyzer data is available, but ideally it should move with the music. I can only test on an iPad Air 2 running iPadOS 15 but the analyser.getByteFrequencyData() method doesn't return any useful data for me, just zeros. Maybe it works on newer models.

[rainner]

I have also updated the link, this can now be found at https://somafm.loudfusion.com/

[EpikDanceMan]

@rainner no, the visualizer doesn’t work, the control panel pause and play control doesn’t work, and the audio volume control in-app doesn’t work. I think @CodingNinja90984294 thought it worked because the visualizer showed up however despite it showing up it does not sync with audio. Do you think that apple will fix this so all these features work?

[ProSharmonUltrasoftBadass]

@rainner My friend has developed a visualizer and it works very well on iOS and every platform maybe you could migrate to using his solution. This project has gained a lot of traction lately and it's pretty cool. Here's the Github and Website so you can verify it actually works:

https://github.com/mcamis/saturn.fm
https://saturn.fm/

It might take some work but I guarantee you this method will work on iOS.

[ProSharmonUltrasoftBadass]

It appears the reason control center or audio fader is not working is because Apple uses special system calls that you need to implement into this project:

https://stackoverflow.com/questions/42656940/audio-playback-lock-screen-controls-not-displaying-on-iphone

https://developer.apple.com/documentation/mediaplayer/mpremotecommand

https://developer.apple.com/documentation/avfaudio/avaudiosession

https://developer.apple.com/forums/thread/44842

https://stackoverflow.com/questions/24881807/html5-audio-on-safari-ios

https://stackoverflow.com/questions/38021378/how-to-use-stop-button-in-ios-control-center-instead-of-pause-button-with-swift

https://apple.stackexchange.com/questions/221657/what-does-the-app-name-means-above-music-player-in-control-center

https://stackoverflow.com/questions/34688128/how-do-i-get-audio-controls-on-lock-screen-control-center-from-avaudioplayer-in

https://stackoverflow.com/questions/42656940/audio-playback-lock-screen-controls-not-displaying-on-iphone

https://stackoverflow.com/questions/37738544/html5-audio-tag-plays-but-controls-not-working-as-expected

^ I suggest you read most of them to get an idea of what I am talking about.

Now documentation on this is scarce regarding websites. so I am unsure if this is app-only or has some html functionality because youtube website manages to invoke control center play and stop button, so there must be some way to do it. I could pull up inspect element and see how youtube does it if you'd like. Most of this is in swift and I'm sure there is a way to convert it since youtube does it, but for now let's focus on the visualizer. Some people suggest that not preloading audio is part of the problem of not working with control center or audio fader. This is most likely an Apple issue since Apple's control player should autodetect when audio is playing to begin with. But the visualizer could use some work since my friend got it to work.

[AppleMagic9391]

Actually I think you are wrong @ProSharmonUltrasoftBadass (cool name btw). I work with Apple when coding on a daily basis and I believe the problem is the fact that control panel controls aren’t being triggered. The visualizer believes there is no data to read from, because apple is not detecting the audio playing thus resulting in no stream. This might be out of rainners control and he may have to wait for apple to fix it. The reason the visualizer is working in the link you provided is because it uses a different method for generating the visualization. It appears recently he fixed the audio fader and music playing which is nice. That just leaves the visualizer and control panel controls.

[rainner]

@ProSharmonUltrasoftBadass @AppleMagic9391

I put together a test page here: https://somafm.loudfusion.com/test.html

The issue seems to be related to live streams. Both the volume and the visualizer work for me in Safari mobile when playing a local audio file, but wont work if I play the stream audio. The only difference there is the URL, all the audio stuff is the same. Seems Safari doesn't know what to do if it can't get the total file size.

[FastestOfThemAll]

I think you all are way over-complicating this problem. When I look through your code you have not declared the "title" nor have you declared the "control" arguments:

https://stackoverflow.com/questions/48476220/change-html5-audio-title-on-ios-devices

these are required to trigger the control panel audio section.

[FightTheWriteBallk]

@rainner could you perhaps detect if the user is running on mobile and if they are disable the visualizer?

You could probably do this using css.

[rainner]

@FightTheWriteBallk Right now the player uses visibilitychange event to know when the player is visible and only renders the visualizer if it is, so it should help cut down on battery use if you have it in the background. I'll see what I can do about adding some options to toggle a few things when I have some time.