JPlayer mp3 not working (chrome)

问题

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?

回答1:

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]

回答2:

~~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
});

回答3:

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 :)

回答4:

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
});

来源：https://stackoverflow.com/questions/10565161/jplayer-mp3-not-working-chrome

标签

html5

google-chrome

audio

jplayer