HTML5 Music Player

There are several ways to play music on web such as using Quicktime, flash, and so on. However those ways have a big problem regarding cross-platform. To use a Quicktime player which is one of iWeb internal features, will not be compatible with some platforms such as Windows, Chrome OS, and Android. In addition, Flash can not be also supported in iOS. This widget blows away those compatibility issues. Make your own music playlists to your website with this excellent HTML5 mp3 player. This music player is originally created by jPlayer. We have fixed and updated their original source code for better performance.

Preview

* This widget is also included in Pro Pack. Pro versions enable users to save and load their code with additional customizable options (+ sync Podcast RSS feed, supporting m4a format, playlist color, and resizing album artworks).

Build your own

Input data in the fields below. (Your contents such as images, videos, and music can be anywhere on web. DropBox is recommended.)
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can get an iFrame code by clicking "Make an iFrame" button.)
We'd highly recommend to use free cloud services like Dropbox / Google Drive to host your multimedia because they provide more stable and speedy connection.

* Customize styles

widget width widget height font family

font size

* Optional settings

auto play auto repeat

* Insert contents (available music format: mp3)

mp3 path song title

cover path

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://googledrive.com/host/0B6W2C3whvuZddjlZbVFDVHRkYVE/jplayer.blue.monday.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.jplayer.min.js"></script>

<style type="text/css">
.jplayer-container {
	/*widget_width*/width:466px;
	/*widget_height*/height:82px;
}

div.jp-audio,
div.jp-video {
	/*font_size*/font-size:14px;
	/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;
	width:100%;
	white-space:nowrap;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {background: url('https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/current-play-bullet.gif') no-repeat center left;}
div.jp-playlist li img {width:32px;height:32px;border:none;margin-right:10px;vertical-align:middle;}
ul.jp-controls li a.disabled {cursor: default;opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);}
</style>

<script type="text/javascript">
/*var_poster_use*/var poster_use=true;
/*var_repeat*/var repeat=false;

$(document).ready(function() {
	var Playlist = function(instance, playlist, options) {
		var self = this;

		this.instance = instance; // String: To associate specific HTML with this playlist
		this.playlist = playlist; // Array of Objects: The playlist
		this.options = options; // Object: The jPlayer constructor options for this playlist

		this.current = 0;

		this.cssId = {
			jPlayer: "jquery_jplayer_",
			interface: "jp_interface_",
			playlist: "jp_playlist_"
		};
		this.cssSelector = {};

		$.each(this.cssId, function(entity, id) {
			self.cssSelector[entity] = "#" + id + self.instance;
		});

		if(!this.options.cssSelectorAncestor) {
			this.options.cssSelectorAncestor = this.cssSelector.interface;
		}

		$(this.cssSelector.jPlayer).jPlayer(this.options);
		
		$(this.cssSelector.interface + " .jp-previous").click(function() {
			if (self.playlist.length > 1)
				self.playlistPrev();
			$(this).blur();
			return false;
		});

		$(this.cssSelector.interface + " .jp-next").click(function() {
			if (self.playlist.length > 1)
				self.playlistNext(false);
			$(this).blur();
			return false;
		});
		
		if (this.playlist.length == 1) {
			$(this.cssSelector.interface + " .jp-previous").addClass("disabled").removeAttr('href');
			$(this.cssSelector.interface + " .jp-next").addClass("disabled").removeAttr('href');
		}
	};

	Playlist.prototype = {
		displayPlaylist: function() {
			var self = this;
			$(this.cssSelector.playlist + " ul").empty();
			for (i=0; i < this.playlist.length; i++) {
				var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
				
				if (poster_use) {
					if (this.playlist[i].poster.length)
						listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ "<img src='" +this.playlist[i].poster+"' />"+ this.playlist[i].name +"</a>";
					else
						listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ "<img src='https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/default-audio-poster.png' />"+ this.playlist[i].name +"</a>";
				} else {
					listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
				}
				// Create links to free media
				if(this.playlist[i].free) {
					var first = true;
					listItem += "<div class='jp-free-media'>(";
					$.each(this.playlist[i], function(property,value) {
						if($.jPlayer.prototype.format[property]) { // Check property is a media format.
							if(first) {
								first = false;
							} else {
								listItem += " | ";
							}
							listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
						}
					});
					listItem += ")</span>";
				}

				listItem += "</li>";

				// Associate playlist items with their media
				$(this.cssSelector.playlist + " ul").append(listItem);
				$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
					var index = $(this).data("index");
					if(self.current !== index) {
						self.playlistChange(index);
					} else {
						$(self.cssSelector.jPlayer).jPlayer("play");
					}
					$(this).blur();
					return false;
				});

				// Disable free media links to force access via right click
				if(this.playlist[i].free) {
					$.each(this.playlist[i], function(property,value) {
						if($.jPlayer.prototype.format[property]) { // Check property is a media format.
							$(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
								var index = $(this).data("index");
								$(self.cssSelector.playlist + "_item_" + index).click();
								$(this).blur();
								return false;
							});
						}
					});
				}
			}
		},
		playlistInit: function(autoplay) {
			if(autoplay) {
				this.playlistChange(this.current);
			} else {
				this.playlistConfig(this.current);
			}
		},
		playlistConfig: function(index) {
			$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
			$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
			this.current = index;
			$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
		},
		playlistChange: function(index) {
			this.playlistConfig(index);
			$(this.cssSelector.jPlayer).jPlayer("play");
		},
		playlistNext: function(end) {
			var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
			if (!end || repeat || this.playlist.length <= 1 || index != 0)
				this.playlistChange(index);
		},
		playlistPrev: function() {
			var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
			this.playlistChange(index);
		}
	}
	
	var audioPlaylist = new Playlist("1", [/*begin to insert contents*/
	/*end to insert contents*/],
	{
		ready: function() {
			audioPlaylist.displayPlaylist();
			audioPlaylist.playlistInit(/*var_auto_play*/false);
		},
		ended: function() {
			if (repeat || audioPlaylist.playlist.length > 1){
				audioPlaylist.playlistNext(true);
			}
		},
		play: function() {
			$(this).jPlayer("pauseOthers");
			
		},
		swfPath:"http://dl.dropboxusercontent.com/s/5qcxaqorg7e1249/",
		/*supplied*/supplied:"mp3"
	});
});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
	<div class="jplayer-container"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-audio"><div class="jp-type-playlist"><div id="jp_interface_1" class="jp-interface"><ul class="jp-controls">
    <li><a href="#" class="jp-play" tabindex="1">play</a></li>
    <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
    <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
    <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
    <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
    <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
	<li><a href="#" class="jp-next" tabindex="1">next</a></li>
	</ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div>
    <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-current-time"></div><div class="jp-duration"></div></div>
    <div id="jp_playlist_1" class="jp-playlist"><ul></ul></div></div></div></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

- iFrame code for non-iWebsites (other tools except for iWeb)

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.