Source

Greattune Player / index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="description" content="Music player interface for Magnatune.com that allows you to play free music, browse the collection of albums and manage your personal playlists."/>
<meta name="keywords" content="music, magnatune, creative commons, streaming, alt rock, ambient, classical, electro rock, electronica, hard rock, hip hop, jazz, new age, world"/>
<meta name="author" content="Mathias Panzenb&ouml;ck"/>
<title>Greattune Player</title>
<link rel="shortcut icon" type="image/x-icon" href="http://magnatune.com/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="socialshareprivacy/socialshareprivacy.css"/>
<script type="text/javascript" src="javascripts/json2.js"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.dataset.js"></script>
<script type="text/javascript" src="javascripts/jQueryRotateCompressed.2.1.js"></script>
<script type="text/javascript" src="javascripts/shims.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.facebook.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.gplus.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.mail.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.pinterest.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.reddit.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.tumblr.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.twitter.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.stumbleupon.js"></script>
<script type="text/javascript" src="javascripts/jquery.socialshareprivacy.linkedin.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29687993-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script type="text/javascript" src="javascripts/magnatune.js"></script>
<!--[if IE]>
<script type="text/javascript" src="javascripts/magnatune-ie.js"></script>
<![endif]-->
</head>
<body>
<div class="about" id="description" style="display:none;">
	<h2>Greattune Player</h2>
	<div class="about-float">
	<a class="logo" title="Magnatune" href="http://magnatune.com/"><img alt="" src="images/logo.png"/></a>
	<span class="app installed" style="display:none;">App is installed</span>
	<a class="app button install" style="display:none;" draggable="false"
		href="javascript:Magnatune.App.install();void(0)">Install Browser App</a>
	<a class="app button uninstall" style="display:none;" draggable="false"
		href="javascript:Magnatune.App.uninstall();void(0)">Remove Browser App</a>
	<label class="notification-controls" style="display:none;">
		<input type="checkbox"
			onchange="Magnatune.setNotificationsEnabled($(this).is(':checked'));"/>
		Show notifications on song change
	</label>
	</div>
	<p><a id="start-tour" draggable="false" href="javascript:Magnatune.Tour.start();void(0)">Take a Tour</a> to
	get an overview of the features.</p>
	<div class="share"></div>
	<hr/>
	<h3>Technical Info</h3>
	<p>This is a music player that is backed by the collection of songs from
	<a href="http://magnatune.com/">magnatune.com</a>. It uses the
	<a href="http://www.sqlite.org/">SQLite</a> export from the
	<a href="http://magnatune.com/info/api">Magnatune API</a> and the
	<a href="http://dev.w3.org/html5/spec/the-audio-element.html">HTML5 Audio Element</a>.
	Depending on the browser HTML5 Audio is still not bug free, and therefore things like the buffer
	progress display or seeking might not work 100% reliable. In Internet Explorer previous to
	version 9 ActiveX is used to play music. However, the layout might look completely broken
	because of Internet Explorer's lacking standard support. If you want a good experience please
	use <a href="http://www.firefox.com/">Mozilla Firefox</a>,
	<a href="http://www.google.com/chrome/">Google Chrome</a>,
	<a href="http://www.apple.com/safari/">Apple Safari</a> or
	<a href="http://www.opera.com/">Opera</a>.</p>
	<p>You can download the source code of this web page on
	<a href="https://bitbucket.org/panzi/greattune-player">bitbucket</a>.
	Other experiments done by me can be found
	<a href="http://web.student.tuwien.ac.at/~e0427417/">here</a>.</p>
	<p>Copyright &copy; 2012 Mathias Panzenb&ouml;ck<br/>
	License <a rel="license" href="http://www.gnu.org/licenses/gpl-2.0.html" target="_blank">GPLv2+</a>:
	GNU GPL version 2 or later</p>
	<p>This is free software; you are free to change and redistribute it.<br/>
	There is NO WARRANTY, to the extent permitted by law.</p>
</div>
<div id="main">
	<div id="player-wrapper">
		<div id="player">
			<div id="play-progress-container">
				<canvas id="buffer-progress" width="420" height="1"></canvas>
				<div id="play-progress" style="width:0px;"><div id="play-progress-knob"></div></div>
				<div id="seek-tooltip" style="display:none;">
					<div id="seek-position">--:--</div>
					<img draggable="false" src="images/seek-tooltip-arrow.png" alt=""/>
				</div>
			</div>

			<div id="play-control-buttons">
				<a id="stop-button" draggable="false" href="javascript:Magnatune.Player.stop();void(0)" title="Stop">&#x25A0;</a>
				<a id="previous-button" draggable="false" href="javascript:Magnatune.Playlist.previous();void(0)" title="Previous">&#x25AE;&#x25C0;</a>
				<a id="next-button" draggable="false" href="javascript:Magnatune.Playlist.next();void(0)" title="Next">&#x25B6;&#x25AE;</a>
			</div>
				
			<a id="volume-button" class="button" draggable="false" href="javascript:Magnatune.Player.toggleVolume();void(0)"
				title="Change Volume"><img draggable="false" src="images/volume.png" alt="Volume"/></a>
			<div id="volume-control" class="popup-menu" data-button="volume-button" style="display:none;">
				<div id="volume">100%</div>
				<div id="volume-bar-container"><div id="volume-bar" style="height:100%;"></div></div>
			</div>

			<div id="member-container" title="Check if you are a stream member.">
				<input id="member" type="checkbox" autocomplete="off"/>
				<label for="member">Member</label>
			</div>
			<form action="javascript:Magnatune.login();void(0)" id="credentials" class="popup-menu popup-form"
					data-button="member-container" data-hide-action="Magnatune.Player.cancelCredentials();" style="display:none;">
				<div class="text-input-container">
					<input id="username" type="text" placeholder="Username" title="Enter your username"/>
				</div>
				<div class="text-input-container">
					<input id="password" type="password" placeholder="Password" title="Enter your password"/>
				</div>
				<div title="This will save your username and password as plain text in your browser profile.">
					<input type="checkbox" id="remember-login"/>
					<label for="remember-login">remember</label>
				</div>
				<div class="popup-buttons">
					<img draggable="false" id="login-spinner" title="Login in Progress..." style="display:none;" src="images/spinner.png" alt=""/>
					<button type="submit">Login</button>
				</div>
			</form>
			
			<div id="waiting-wrapper">
				<img draggable="false" id="waiting" title="Buffering..." style="display:none;" src="images/spinner.png" alt=""/>
			</div>

			<div id="status">
				<span id="current-time-duration" onclick="$('#time-left').toggle();$('#current-time').toggle();">
					<span id="time-left" style="display:none;">---:--</span>
					<span id="current-time">--:--</span> /
					<span id="current-duration">--:--</span>
				</span>
			</div>

			<div id="currently-playing">
				<a draggable="false" href="javascript:Magnatune.Playlist.randomAlbum();void(0)">[Play Random Album]</a>
			</div>

			<div class="slide-expand top">
				<a id="player-hide" draggable="false" href="javascript:Magnatune.Player.hide();" title="Hide Player">&#x25B4;</a>
				<a id="player-show" draggable="false" href="javascript:Magnatune.Player.show();" title="Show Player" style="display:none;">&#x25BE;</a>
			</div>
			
			<a id="play-button" draggable="false" href="javascript:Magnatune.Player.playPause();void(0)"><img
				id="play-image" draggable="false" src="images/play.png" alt="Play" title="Play"/><img
				id="pause-image" draggable="false" src="images/pause.png" alt="Pause" title="Pause" style="display:none;"/></a>
		</div>
	</div>

	<div id="body">
		<div id="navigation">
			<div class="navigation-head">
				<span class="search-container text-input-container">
					<input id="search" type="text" autocomplete="off" title="Enter Search Terms"/>
					<a class="input-clear" draggable="false" href="javascript:Magnatune.Navigation.clear();void(0)" title="Clear">&times;</a>
				</span>

				<a class="navigation-head-button button" id="tree-mode-button" draggable="false" href="javascript:Magnatune.Navigation.toggleModeSelect();void(0)" title="Change Grouping of the Collection">Group</a>
				<ul id="tree-mode-select" class="popup-menu pulldown-menu" data-button="tree-mode-button" style="display:none;">
					<li id="mode-album" class="first"><a draggable="false" href="javascript:Magnatune.Navigation.setMode('album');void(0)">Album</a></li>
					<li id="mode-artist-album"><a draggable="false" href="javascript:Magnatune.Navigation.setMode('artist/album');void(0)">Artist / Album</a></li>
					<li id="mode-genre-album"><a draggable="false" href="javascript:Magnatune.Navigation.setMode('genre/album');void(0)">Genre / Album</a></li>
					<li id="mode-genre-artist-album" class="last active"><a draggable="false" href="javascript:Magnatune.Navigation.setMode('genre/artist/album');void(0)">Genre / Artist / Album</a></li>
				</ul>

				<a class="navigation-head-button button" id="tree-order-button" draggable="false" href="javascript:Magnatune.Navigation.toggleOrderSelect();void(0)" title="Change Sorting">Order</a>
				<ul id="tree-order-select" class="popup-menu pulldown-menu" data-button="tree-order-button" style="display:none;">
					<li id="order-by-name" class="first active"><a draggable="false" href="javascript:Magnatune.Navigation.setOrder('name');void(0)">By Name</a></li>
					<li id="order-by-date" class="last"><a draggable="false" href="javascript:Magnatune.Navigation.setOrder('date');void(0)">By Date</a></li>
				</ul>
			</div>
			<div id="tree">
			</div>
			
			<div class="slide-expand left">
				<a id="navigation-hide" draggable="false" href="javascript:Magnatune.Navigation.hide();void(0)" title="Hide Collection">&#x25C2;</a>
				<a id="navigation-show" draggable="false" href="javascript:Magnatune.Navigation.show();void(0)" title="Show Collection" style="display:none;">&#x25B8;</a>
			</div>
		</div>

		<div id="content">
			<ul id="tabs">
				<li id="info-button" class="active first"><a href="#/about">Info</a></li>
				<li id="playlist-button" class="last"><a href="#/playlist">Playlist</a></li>
			</ul>

			<div id="info" class="tab">
				<div class="tab-head">
					<ul id="breadcrumbs">
						<li class="first"><a href="#/about">Home</a></li>
					</ul>
				</div>

				<div id="info-content" class="tab-content">
				</div>
			</div>

			<div id="playlist-container" style="display:none;" class="tab">
				<div class="tab-head">
					<a class="button" draggable="false" href="javascript:Magnatune.Playlist.clear();void(0)" title="Clear Playlist"><img draggable="false" src="images/clear.png" alt="Clear Playlist"/></a>
					<a class="button" draggable="false" href="javascript:Magnatune.Playlist.removeSelected();void(0)" title="Remove Selected"><img draggable="false" src="images/remove.png" alt="Remove Selected"/></a>
					<a class="button" draggable="false" href="javascript:Magnatune.Playlist.toggleSelectAll();void(0)" title="Select All/None"><img draggable="false" src="images/all-none.png" alt="Select All/None"/></a>
					<a id="show-current" class="button" draggable="false" href="javascript:Magnatune.Playlist.showCurrent();void(0)" title="Show Active Track"><img draggable="false" src="images/current.png" alt="Show Active Track"/></a>
					<a class="button" draggable="false" href="javascript:Magnatune.Playlist.randomAlbum();void(0)" title="Play Random Album"><img draggable="false" src="images/random.png" alt="Play Random Album"/></a>

					<span id="playlists-controls">
						<a class="button" id="playlists-button" draggable="false" href="javascript:Magnatune.Playlist.togglePlaylistMenu();void(0)"
								title="Load Playlist..."><img draggable="false" src="images/playlists.png" alt="Load Playlists..."/></a>
						<table id="playlists-menu" class="popup-menu pulldown-menu" data-button="playlists-button" style="display:none;">
							<tbody>
								<tr class="first last"><td><span class="empty">(No Saved Playlists)</span></td></tr>
							</tbody>
						</table>
						<a class="button" id="save-button" draggable="false" href="javascript:Magnatune.Playlist.toggleSaveDialog();void(0)" title="Save Playlist..."><img draggable="false" src="images/save.png" alt="Save Playlist..."/></a>
						<form action="javascript:Magnatune.Playlist.dialogSave();void(0)" id="save-popup" class="popup-menu popup-form" data-button="save-button" style="display:none;">
							<div class="text-input-container">
								<input id="save-playlist-name" type="text" placeholder="Playlist Name" title="Enter name of new playlist"/>
							</div>
							<div class="popup-buttons">
								<button type="submit">Save</button>
							</div>
						</form>
					</span>
					<a id="export-button" class="button" draggable="false" href="javascript:Magnatune.Playlist.toggleExportMenu();void(0)">Export...</a>
					<form action="javascript:Magnatune.Playlist.showExport();void(0)"
						id="export-menu" class="popup-menu popup-form" data-button="export-button" style="display:none;">

						<label for="export-what" class="left">What:</label>
						<select id="export-what" onchange="
								var e = $('#export-playlist-options');
								if (this.value === 'saved') {e.hide();} else {e.show();}
								e = $('#export-playlist-single-options');
								if (this.value === 'single') {e.show();} else {e.hide();}">
							<option value="current" selected>Current Playlist</option>
							<option value="saved">All Saved Playlists</option>
							<option value="single" disabled>Single Saved Playlist</option>
						</select>

						<div id="export-playlist-options">
							<div id="export-playlist-single-options" style="display:none;">
								<label for="export-playlist-name" class="left">Playlist:</label>
								<select id="export-playlist-name"></select>
							</div>

							<div id="export-playlist-format-options">
								<label for="export-playlist-format" class="left">Playlist format:</label>
								<select id="export-playlist-format" onchange="
										var e = $('#export-track-format-options');
										if (this.value === 'json' || this.value === 'html') {e.hide();} else {e.show();}
										e = $('#export-member-options');
										if (this.value === 'json') {e.hide();} else {e.show();}">
									<option value="xspf" selected>XSPF</option>
									<option value="m3u">M3U</option>
									<option value="pls">PLS</option>
									<option value="json" title="Special format of Greattune Player. Use it to import the playlist in Greattune Player again.">JSON</option>
									<option value="html">HTML5</option>
								</select>
							</div>

							<div id="export-track-format-options">
								<label for="export-track-format" class="left">Track format:</label>
								<select id="export-track-format">
									<option value="ogg">Ogg Vorbis (.ogg)</option>
									<option value="m4a">MPEG4 (.m4a)</option>
									<option value="mp3" selected>MP3 (.mp3)</option>
								</select>
							</div>

							<div id="export-member-options" style="display:none;" title="This option will require your audio player to support HTTP authentication.">
								<span class="left">
									<input type="checkbox" id="export-member"/>
								</span>
								<label for="export-member">member streams</label>
							</div>
						</div>

						<div class="popup-buttons">
							<span draggable="true" id="export-drag" class="draggable" title="Drag this into another Greattune Player window, a file browser or text editor."></span>
							<button type="submit">Export</button>
						</div>
					</form>

					<span id="import-button" class="button" title="Import anything someone has exported using Greattune Player.">
						<span>Import...</span>
						<div id="import-wrapper"><input type="file" id="import" onchange="Magnatune.Playlist.importFiles(this.files);$(this).replaceWith($(this).clone());"/></div>
					</span>
				</div>
				<div class="tab-content">
					<table class="playlist" id="playlist">
						<thead>
							<tr>
								<th>Nr.</th>
								<th>Title</th>
								<th>Duration</th>
								<th>Album</th>
								<th>Artist</th>
								<th>&nbsp;</th>
								<th>&nbsp;</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>