JPlayer mp3 not working (chrome)

4
votes

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

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

If I set the media to mp3 supplied and the mp3 path, it doesn't work. If I do the same for the ogg file, it works. I also can hit www.website.com/test.ogg and it plays the audio. However, if I hit www.website.com/test.mp3, it doesn't play the mp3 audio.

Here is my HTACCESS: AddType audio/mpeg mp3

Server appears to accept range requests: Response Headersview source Accept-Ranges:bytes

Is there something minor wrong w/ my htaccess or am I overlooking something else? I've looked into nearly every solution I've found so far w/ no avail.

The website is: radiosmasher.com (radiosmasher.com/test.ogg, etc.)

EDIT: It appears the requests for the MP3's are getting cancelled, if they are of a certain size. They get cancelled after downloading around 2MB of a 10MB song. Any clue?

4
htmlgoogle-chromeaudiojplayer
Your Content-Type header is fine, so nothing wrong there. - Brad
Is there a reason you need to use JPlayer? There are lots of good tutorials out there on using the audio tag and I've been successful with it in some projects. - Miles
I'm basically looking for an audio player that can play MP3's and does it well in a cross-browser environment. JPlayer seemed to fit the critera. Is there anything you recommend? - kclem06
@kclem06 It works fine for me now. - Tyilo
Just edited the main post - appears there is something else going on. - kclem06

4 Answers

2
votes

I have had the same problem with both jPlayer and MediaElement. Thanks to the comments elsewhere on this page, I discovered that the order matters for Chrome, but not for Firefox. This is possibly a bug in Chrome.

So 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 putting the ogg first this problem is hidden.

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

1
votes

MP3 isn't supported in Chrome.

You could however provide both the .ogg and .mp3 file in jPlayer.

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

$("#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
});
1
votes

I just faced (and thankfully solved) this exact problem. It turns out the media key jPlay is expecting for OGG support is oga (for OGG Audio) to fix this I changed my jPlayer init code to this (demo):

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

And my set media code to this:

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

I've tested this on Chrome build Version 36.0.1985.125 for OSX and so far it seems to work quite well :)

0
votes

I was running into an issue where Chrome would sometimes play our audio (mp3), and sometimes not. Worked fine in Safari, FireFox, etc.

What wound up working for me was setting up the {solution: "flash,html"} in the config. Borrowing from the .js that @Tyilo posted:

$("#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
});