StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery <audio> Plugin Doesn't work in Firefox and Opera
text
Body
copied!<p>I was working with a plugin for custom <code><audio></code> 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 <code><audio></code> 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</p> <p>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.</p> <p>Plugin originally comes from: <a href="http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/" rel="nofollow">http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/</a> however I have made several changes e.g.</p> <pre><code>canPlayType = function( type ) { var audioElement = document.createElement( 'audio' ); return !!( audioElement.canPlayType && audioElement.canPlayType( 'audio/' + type.toLowerCase() + ';' ).replace( /no/, '' ) ); }; </code></pre> <p><strong>and original is</strong></p> <pre><code>canPlayType = function( file ) { var audioElement = document.createElement( 'audio' ); return !!( audioElement.canPlayType && audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) ); }; </code></pre> <p><strong>and another small change</strong></p> <pre><code>else if( canPlayType( 'mp3' ) ) isSupport = true; </code></pre> <p><strong>where as original is</strong></p> <pre><code>else if( canPlayType( audioFile ) ) isSupport = true; </code></pre> <p>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 <strong>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:</strong> <a href="https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0" rel="nofollow">https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0</a></p> <hr> <p><strong>EDIT:</strong> I also created a live demo on jsbin <a href="http://jsbin.com/unupov/1/edit" rel="nofollow">http://jsbin.com/unupov/1/edit</a> so you can see how player behaves in different browsers <br><br></p> <p><strong>EDIT 2:</strong> Ignore issues with chrome, thanks to <em>user20140268</em> those have been fixed.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload