JPlayer mp3 not working (chrome)

Question

I am trying to set up JPlayer on a website in Chrome.

I have an mp3 and ogg file on the server: test.mp3 and test.ogg.

If I installed the media in the mp3 and mp3 path, it does not work. If I do the same for the ogg file, it works. I can also go to www.website.com/test.ogg and it plays audio. However, if I got to www.website.com/test.mp3, it does not play mp3 audio.

Here is my HTACCESS: AddType audio / mpeg mp3

The server appears to be accepting range requests: Response header source Accept-Ranges: bytes

Is there something minor, incorrect / htaccess, or am I not seeing another? I looked through almost all the solutions that I have found so far, without help.

Website: radiosmasher.com (radiosmasher.com/test.ogg etc.)

EDIT: It appears that MP3 requests are canceled if they are of a certain size. They are canceled after downloading about 2 MB songs 10 MB. Any clue?

Answer 1

I had the same issue with jPlayer and MediaElement. Thanks to the comments elsewhere on this page, I found that order matters for Chrome, but not for Firefox. Perhaps this is a bug in Chrome.

To be more specific, this works in both browsers:

<audio controls="controls" preload="auto"> <source type="audio/ogg" src="clips/clip1.oga" preload="none"/> <source type="audio/mpeg" src="clips/clip1.mp3" preload="none"/> </audio> 

but this only works in Firefox:

 <audio controls="controls" preload="auto"> <source type="audio/mpeg" src="clips/clip1.mp3" preload="none"/> <source type="audio/ogg" src="clips/clip1.oga" preload="none"/> </audio> 

The only difference is that Chrome seems to have a problem with MP3 (dunno why), and by installing ogg, this problem is hidden first.

[Using Firefox v15 and Chromium v20 on Ubuntu12.04]

Answer 2

MP3 is not supported in Chrome.

However, you can provide both a .ogg file and a .mp3 file in jPlayer.

Put this in your http://radiosmasher.com/js/main.js file instead of the current jPlayer implementation:

 $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.radiosmasher.com/test.mp3", ogg: "http://www.radiosmasher.com/test.ogg" }); }, swfPath: "/js", supplied: "mp3, ogg", cssSelectorAncestor: "", cssSelector: { play: "#play", pause: "#pause", stop: "#stop", mute: "#mute", unmute: "#unmute", currentTime: "#currentTime", duration: "#duration" }, size: { width: "320px", height: "180px" }, errorAlerts: true }); 

Answer 3

I just ran into (and fortunately solved) this exact problem. It turns out that the jPlay media key is waiting for OGG oga support (for OGG Audio) to fix this. I changed the jPlayer initialization code to this ( demo ):

 $("#jplayer_1").jPlayer({ ready: function() { /*My site specific init code*/ }, swfPath: "/js", supplied: "oga, mp3" }); 

And my multimedia code for this:

 $("#jplayer_1").jPlayer("setMedia", { "mp3": "/song.mp3", "oga": "/song.ogg" }).jPlayer("play"); 

I tested this on Chrome build Version 36.0.1985.125 for OSX, and so far it works very well :)

Answer 4

I had a problem when Chrome sometimes played our audio (mp3), and sometimes not. Worked fine in Safari, FireFox, etc.

What worked for me was to configure {solution: "flash, html"} in the config. Borrowing from .js that @Tyilo sent:

 $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.radiosmasher.com/test.mp3", ogg: "http://www.radiosmasher.com/test.ogg" }); }, swfPath: "/js", solution: "flash,html", supplied: "mp3, ogg", cssSelectorAncestor: "", cssSelector: { play: "#play", pause: "#pause", stop: "#stop", mute: "#mute", unmute: "#unmute", currentTime: "#currentTime", duration: "#duration" }, size: { width: "320px", height: "180px" }, errorAlerts: true });