Javascript mp3 player only working with some browsers

[jackfiasco]

I'm using a javascript/jquery based mp3 player called jplayer (jplayer.org) to stream mp3s. It works fine on Chrome and Safari only.

At first the player wouldn't even show up at all on other browsers but then I noticed a display:none line in the CSS that I removed which caused the buttons to show up but not the song name. When you press the next track button a song title will appear but nothing will play. I copied the player from mumfordandsons.com (where they have the display:none in their CSS and their player works fine on all browsers..?)

I created a stripped down page with nothing but my player on it for ease of troubleshooting which can be viewed here: www.thehordeandtheharem.com/test/

Any help you can give me would be greatly appreciated as I've been stuck on this for days, thanks!

[jscheuer1]

There could also be other problems, but here in jquery.client.js:

	$('#audio').jPlayer({
		ready: function() {
			initPlaylist(false);
		},
		swfPath: "jquery.jplayer",
		customCssIds: true
	})

The script expects to find the Jplayer.swf file at:

thehordeandtheharem.com/test/jquery.jplayer/Jplayer.swf

But it's a 404 Not Found. This file is required for Firefox, perhaps others to play mp3. Regardless, I see that Opera, and IE are both also trying to access the Jplayer.swf file. It works in Chrome and Safari because they can and do use the HTML 5 audio tag, which doesn't rely upon the Jplayer.swf file. IE 9 could and would do that too if the page were in standards mode.

However, you're going to need that Jplayer.swf file for Firefox either way, probably for Opera too. And that's not to mention Android and other non-iPhone/iPad type mobiles and touch devices. Theses also require the Jplayer.swf file, as do IE versions 8 and and less.

[jackfiasco]

Ah, thanks but that's still not fixing it. I hadn't realized I hadn't fixed that link to the swf file on that test page I had made - on my local hard drive I had already addressed that and it didn't change anything - anyway it's now updated online and still not working.. any other ideas? thanks..

[jscheuer1]

As I said, there could also be other problems. But this one hasn't been fixed yet, the Jplayer.swf file is still a 404 Not Found. What belongs there is not the name of the file, rather the path to it without the trailing slash. And even if that's configured properly, it will not work locally in some browsers. And some browsers require either the network or the absolute path. I see you have the file online now in this location:

thehordeandtheharem.com/test/js/Jplayer.swf

which means that in jquery.client.js it should be either (network path):

	$('#audio').jPlayer({
		ready: function() {
			initPlaylist(false);
		},
		swfPath: "/test/js",
		customCssIds: true
	})

or (absolute path):

	$('#audio').jPlayer({
		ready: function() {
			initPlaylist(false);
		},
		swfPath: "http://www.thehordeandtheharem.com/test/js",
		customCssIds: true
	})

Either will do.

I usually prefer the network path as it's valid regardless of whether or not the site is reached with the www part or not. But I see you're using the absolute path for the sound files, so I guess that doesn't matter. You could use the network path for those too though. Like the absolute path:

http://www.thehordeandtheharem.com/media/harvest/gold-rush.mp3

would be the network path:

/media/harvest/gold-rush.mp3

The network path always starts with a / which represents the root of the domain. Because of that, it will not work locally, but is often the best choice for live installations.

Edit: I see another problem. You're using version 1.2.0 of jquery.jplayer.min.js, but the Jplayer.swf file you have on the server is from the 2.0.0 distribution. That won't work even if you get the path to it right. What's more, the code you're using in jquery.client.js is for version 1.2.0 and won't work with version 2.0.0. But it would be a good idea to update. But not to 2.0.0, rather to 2.1.0. Make sure you're using both the jquery.jplayer.min.js and Jplayer.swf from the 2.1.0 version. It only requires one change in the code, change:

	function playerConfig(index) {
		playing = index;
		$('#audio').jPlayer("setFile", playlist[playing].mp3, playlist[playing].ogg);
		$('#meta span').text(playlist[playing].name);
	}

to:

	function playerConfig(index) {
		playing = index;
		$('#audio').jPlayer("setMedia", {mp3: playlist[playing].mp3});
		$('#meta span').text(playlist[playing].name);
	}

Once I got it working in either version (I did both), I noticed that this:

	function playerChange(index) {
		playerConfig(index);
		$('#audio').jPlayer("play");
	}

would start the selected sound even if the player was in paused mode, without updating the play/pause button's appearance. I decided it would be better to simply maintain the current play state, so I changed that function to:

	function playerChange(index) {
		playerConfig(index);
		if ($('#sampler').hasClass('playing')){
			$('#audio').jPlayer("play");
		}
	}

There's still one more issue, certain mobiles may require .ogg versions of the sound files. Let's get this much working first though.

[jackfiasco]

wow thanks so much for all your help!

I had been working with some other people on this issue and they brought to my attention the ogg file thing so I added ogg files and that didn't do anything but i'm sure that's due to the file version mismatch so let me clear all this up and see what happens, i'll keep you posted.. thanks again!

[jackfiasco]

YAY IT WORKS! Thanks so much for your help. Not working on mobile browsers, I think due in part to flash not being supported by most of them, and maybe the ogg thing too but I really don't care too much about that..

[jscheuer1]

The iPhone/Pad don't do Flash. Android does and should work with this current setup. I've tested it (actually had someone with an Android test it) on a very similar script and that worked.

The iDevices probably require the .ogg versions of the sound files, and would then be able to play them via the HTML 5 solution of jPlayer. I've had that tested too, and with the .ogg file also available as described below, that worked too.

The coding isn't that tricky, you just have to add the locations of the .ogg files to the playlist for each entry. For example:

{name:"Gold Rush",mp3:"http://www.thehordeandtheharem.com/media/harvest/gold-rush.mp3"}

would become:

{name:"Gold Rush",mp3:"http://www.thehordeandtheharem.com/media/harvest/gold-rush.mp3",oga:"http://www.thehordeandtheharem.com/media/harvest/gold-rush.ogg"}

Do that for each of the sounds in the playlist.

And for the setMedia command here:

	function playerConfig(index) {
		playing = index;
		$('#audio').jPlayer("setMedia", {mp3: playlist[playing].mp3});
		$('#meta span').text(playlist[playing].name);
	}

That would become:

	function playerConfig(index) {
		playing = index;
		$('#audio').jPlayer("setMedia", {mp3: playlist[playing].mp3, oga: playlist[playing].oga});
		$('#meta span').text(playlist[playing].name);
	}

Then all you need to do is make .ogg versions of each file and upload them to the server at those locations. There are free online utilities for that, as well as free programs you can download that can do that. Make sure you find one that can convert to .ogg at the same bitrate as your mp3 file. The .ogg file should then come in at slightly less bytes than the mp3. If not, use a different converter.

[jackfiasco]

awesome, i already made ogg files a while ago (when troubleshooting the original problem) and will pop that code in there now.

also, i tried the site on skyfire - an iphone browser that does support flash, and it didn't work.. but perhaps it will work with the ogg files..

[jscheuer1]

Well, if it supports Flash, it should support mp3. But it might not.

In any event, and I've been doing extensive testing on this - mobiles in general will not initiate playback of any media without user interaction. But, as I recall your code doesn't try that, so that shouldn't be an issue.