This has been an adventure so far…so I was able to set up remote debugging between Chrome on my Ubuntu machine and iOS Safari on my iPhone, with many tribulations. Annoyingly, however, the Network tab is blank, which is kinda the most important one for this.
I have found that setting preload="metadata" makes the audio play on first click in iOS Safari, where if it is set to preload="none" then it requires a sequence of Play > Pause > Play to actually play the audio.
I tried this out with video and it appears that a similar issue exists.
Changing to preload="none" was done because of your bug report here Secure media uploads expire. We are in a kind of annoying twilight zone here now because putting the preload back to metadata will re-introduce the above issue. We have recently bumped the presigned URL expiry to 5 minutes https://github.com/discourse/discourse/pull/10160 so the original bug will be less of an issue now…but still an issue.
I am still thinking about this and messing around with things…I am not sure if we can have the best of both worlds here. It is not an ideal experience for secure media to require multiple clicks to view.
Edit: I got the Network tab of my debugger working. An example on our internal Discourse instance for a preload="none" audio tag:
-
Press play: GET /secure-media-uploads/dev/original/4X/6/1/8/618a6b19a07de18205cc9889cb604e414b30372b.mp3 which returns a status of Finished
-
Press pause.
-
Press play: GET
presigned_url_herewhich returns a status of 206 Partial Content, and the audio loads correctly.
The strange thing here is that with preload=“metadata” we get the exact same sequence of requests, with only one play click. It is like Safari fetches the metadata on first click of Play, then needs a pause and play again to play the audio.
I am not sure if this happens on other devices e.g. Android? I don’t have a device to test with there.