I’m using MEJS, which is integrated into WordPress core, on a website. I’m having an issue with the audio player though, specifically on mobile Safari on an iPhone 5 (I’ve tested on an iPhone 4 and it works fine which is strange).
The issue is that on the iPhone 5 it is firing the script mediaelement-and-player.min.js infinitely, so my JS never runs because it’s waiting for an on load event.
If I inspect the mejs code from timeline I find it is failing at this function:
c.media.addEventListener("loadedmetadata", function() {
c.updateDuration && c.updateDuration();
c.updateCurrent &&
c.updateCurrent(); // this is the line it seems to fail on
if (!c.isFullScreen) {
c.setPlayerSize(c.width, c.height);
c.setControlsSize()
}
}, false);
As I say, none of my JS will run as the page never loads when the audio player is present. Incase it matters the code I’m using to display the player is the following:
$attr = array(
'src' => $audio
);
echo wp_audio_shortcode($attr);
If anyone knows of a way to fix this issue that’d be great! If you need any more information let me know.
[EDIT]
Looking at the network requests now too, it seems like it can’t download the audio file either, the file is in the list of requests twice, each without a http status and a duration of between 0.2ms-0.5ms, which for a full length mp3 track obviously isn’t right.
[EDIT]
I’ve also tried disabling all plugins and reverting to the default theme, although everything appears to load in correctly and the audio plays, if you inspect the timeline it still fails to finish running the mediaelement-and-player.min.js file, meaning that if there was an on load event in the jQuery, it would never get fired.
