Skip to content

Instantly share code, notes, and snippets.

@ArnaudLigny

ArnaudLigny/gist:5086220

Created March 4, 2013 22:21
Show Gist options
  • Save ArnaudLigny/5086220 to your computer and use it in GitHub Desktop.
Save ArnaudLigny/5086220 to your computer and use it in GitHub Desktop.
Download ZIP
audio.js "Muxtape" style
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<meta content="width=device-width, initial-scale=0.6" name="viewport">
<style>
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h1 {
background: #2C2828;
color: #fff;
font-size: 1.2em;
padding: 14px 20px 12px;
margin: 0;
}
h1 em {
font-style: normal;
color: #999;
}
a {
color: #888;
text-decoration: none;
}
#wrapper {
margin: 0;
padding: 0;
}
.audiojs {
height: 0;
}
ol {
padding: 0;
margin: 0;
list-style: decimal-leading-zero inside;
color: #ccc;
font-size: 1.5em;
}
ol li {
margin: 0;
padding: 10px 5px 10px 0;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ol li a {
padding: 0;
margin: 0;
}
li.playing {
color: #aaa;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
li.playing a {
color: #000;
}
</style>
<script src="jquery.min.js"></script>
<script src="audio.min.js"></script>
<script>
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.playPause();
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>wait what — notorious xx <em>(2009)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3">juicy-r</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">islands is the limit</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/07-everyday-shelter.mp3">everyday shelter</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/08-basic-hypnosis.mp3">basic hypnosis</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/09-infinite-victory.mp3">infinite victory</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
</ol>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment