jQuery <audio> Plugin Doesn't work in Fi

Question

I was working with a plugin for custom <audio> player and everything was fine. I was working in Safari browser on Mac OSX 10.8.2 , Once I decided to test project in other browsers things got very strange. In a nutshell, plugin is supposed to find <audio> tags in a page and than change them to a different custom markup. Works fine in safari, but doesn't seem to work in firefox and opera

Firefox and Opera have following issue, there is a part in a plugin which, in case if audio source is unsupported format, creates different (mini) player which is basically a fallback for older browsers, however I don't see how firefox and opera show this fallback player, as both are very modern browsers.

Plugin originally comes from: http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ however I have made several changes e.g.

canPlayType   = function( type )
        {
        var audioElement = document.createElement( 'audio' );
        return !!( audioElement.canPlayType && 
                   audioElement.canPlayType( 'audio/' + type.toLowerCase() + ';' ).replace( /no/, '' ) );
        };

and original is

canPlayType   = function( file )
        {
            var audioElement = document.createElement( 'audio' );
            return !!( audioElement.canPlayType &&
                    audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) );
        };

and another small change

else if( canPlayType( 'mp3' ) ) isSupport = true;

where as original is

else if( canPlayType( audioFile ) ) isSupport = true;

These modifications were made to specify that file in src is an mp3, instead of automatically detecting it (as I am not using local files, but instead soundcloud api generated url's). I can't see how such changes could have affected browsers to not work with a plugin. As there are many code files involved, Instead of posting them all here, I created a dropbox folder for you to see them all yourself here, you can try index.html file in different browsers so you can see what issues I am talking about: https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0

---

EDIT: I also created a live demo on jsbin http://jsbin.com/unupov/1/edit so you can see how player behaves in different browsers

EDIT 2: Ignore issues with chrome, thanks to user20140268 those have been fixed.

Answer 1

I changed links to CSS:

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/player.css">

As well as to scripts:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/player.js"></script>

Now it works well in chrome

Update:
It seems that both firefox and opera don't support mp3 in <audio/>.
In this case player.js fallbacks <audio/> tag to <embed/>.
There is no API to control playback for <embed/> instead you can use flash or make <embed/> visible changing player.js at line 70

var thePlayer = !isSupport 
            ? $('<embed src="' + audioFile + '" width="100%" height="25" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />')
            : $( '<div class="' + params.classPrefix + '">' + $( '<div>' ).append( $this.eq( 0 ).clone() ).html() + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ),

and deleting thePlayer.addClass( cssClass.mini ); at line 171

Answer 2

The file type mp3 may have different meta type, that you may define properly to make it work

audio/x-mpeg-3

or

audio/mpeg3

or

audio/mpeg

try one of these in

audioElement.canPlayType('audio/' + type.toLowerCase() + ';' )

I think this might work, as Firefox and opera behave with strict JS and datatypes also they don't support some formats!

try and reply if it worked or not :)