Audio Player not working properly on iPad/iPhone

[markwattchow]

I have a Classic Accordion element containing embedded audio files. The audio MP3 files are placed by shortcodes. I have enabled Advanced Controls in the shortcode. The Audio Player and advanced controls work fine in Windows and on Android phones, but not on iPads/iPhones. When the play button is pressed on the iPad or iPhone, the MP3s play for about 6 minutes and then loop back to start again at the beginning, regardless of the length of the MP3. It does not play right through. The progress bar also disappears and the total time counter at the end remains at zero.

[rad]

Hi there,

Thanks for writing in.

Could you try converting your mp3 to aac format? Then add two sources (1 per line) in your audio element, make sure the aac file is the first one.

Thanks!

[markwattchow]

Hi,

I am using the audio player shortcode, not the audio element. I need to use the shortcode because it is being used within an accordion element. I have tried adding an m4a (AAC) file as well as the mp3 file in the shortcode using the following example format:

[x_audio_player m4a=“http://example.nz/wp-content/uploads/2018/03/audioexample.m4a” mp3=“http://example.nz/wp-content/uploads/2016/07/audioexample.mp3” advanced_controls=“true” preload=“none” autoplay=“false” loop=“false”]

But this does not seem to make any difference to the problems on iPad/iPhone. The Knowledge Base article on the shortcodes seems to suggest I can use MP3 files and OGG files, but doesn’t mention other audio files.

[christopher]

Hi there,

It seems that the problem is there because of the fact it is inside the Accordion and not visible at first. I suggest that you test the case by adding the Audio element in a test page and without Accordion and check the result.

if the problem is the fact that the Audio is inside the Accordion, then I suggest that you use the Hide During the Breakpoint option and have 2 sections. One for the desktop with the Accordion, and the other one without that for mobile view.

Also, I suggest that you check for possible 3rd party plugin problem by disabling all the plugins and test the case.

Finally, please use another sample audio and test the case to know if it is related to the specific audio file you are using or something general.

Thank you.

[markwattchow]

I’m using WP Rocket (and Cloudflare). It appears the problem is caused when the WP Rocket plugin is activated. I tried using an Audio Element by itself on a new test page and the problem remains. I have tried various sound files and the problem remained. Deactivating WP Rocket allowed the advanced controls to appear and function normally and the audio file plays right through as it does on Windows and Android.

The problem only appears on iPad/iPhone and in both Safari and Chrome. I’ll contact WP Rocket support, but if you have any suggestions they’d be appreciated.

Thanks,
Mark

[rad]

Hi there,

It should be fixed by clearing your CF cache and browser cache, but, that issue could reappear again in the future since Rocket loader could change loading order of the scripts (async) and affect the script dependencies.

Thanks!