Audio player MediaElement.js - interesting packaging on mobile devices

Question

As you can see from the above image, I have a problem with my audio player ONLY on mobile devices. When a player loads, it looks like this, but when I press PLAY:

Shazam! It seems like it should be.

Here is my code:

HTML

<audio id="audioPlayer001" style="max-width:100%; width: 100%;"> <source src="theFile.mp3" type="audio/mpeg"> </audio> 

Js

 $('#audioPlayer001').mediaelementplayer(); 

At first, I had a preload option in sound tags, believing that playing with this could fix the situation, since the player only wins before pressing PLAY, but no luck auto, metadata and none has an effect.

Answer 1

Tried your code. Used the default style mediaelementplayer.min.css provided by the library. It works as expected, even on a mobile phone.

So, the only explanation for why this happens to you is probably due to the fact that you are dragging and dropping the default style.

Make sure your style sheets that use important properties do not override the default styles for the player. Use the device’s toolbar ( ctrl+shift+M for Chrome) in web developer tools to see exactly which styles are applied.

ps Have you tried loading mediaelementplayer.min.css at the end, i.e. after all other stylesheets? Perhaps if you provide more information about your / html style layout, I can update my answer.

Here is a working snippet:

  $('#audioPlayer001').mediaelementplayer(); 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelementplayer.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/3.2.4/mediaelement-and-player.min.js"></script> <audio id="audioPlayer001" style="max-width:100%; width: 100%;"> <source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Beatles/04%20Beatles%20for%20Sale/The%20Beatles%20-%20Beatles%20for%20Sale%20-%2001%20No%20Reply.mp3" type="audio/mpeg"> </audio> 

You can also test this on your mobile phone at http://www.niketpathak.com/app_external/test.html