Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (94 sloc) 4.22 KB
<html>
<head>
<title>Matt's Scratchzone</title>
<script src="/javascripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/javascripts/soundmanager2-jsmin.js"></script>
</head>
<body>
<div id="mylist">
</div>
<script>
var ITUNES_URL = 'http://itunes.apple.com/search?entity=album&limit=40&callback=?';
var ITUNES_ARTIST = '&term=';
var artists = ['miles davis','john coltrane','marvin gaye'];
var mysounds = [];
var mySound;
var aidivcount = 0;
soundManager.url = '/swf/'; // directory where SM2 .SWFs live
soundManager.flashVersion = 9; /*required for mp4 support in soundmanager2*/
soundManager.debugMode = false;
soundManager.debugFlash = false;
soundManager.onready(function(){
// SM2 has loaded
$.each(artists, function(i,v) {
$.getJSON(ITUNES_URL + ITUNES_ARTIST + v,
{
format: "json"
},
function(data) {
$.each(data.results, function(i,item){
$('<img />').attr("src", item.artworkUrl60).load(function() {
$(this).appendTo('#mylist').wrap('<div id="ai' + aidivcount++ + '" class="albumimg">'+ '</div>');
$(this).parent().append('<div style="opacity: 0"><p>' + (item.artistName).toLowerCase() + '</p><p>' + (item.collectionName).toLowerCase() + '</p></div>');
var $imgcontainer = $(this).parent();
$.getJSON("http://itunes.apple.com/lookup?id=" + item.collectionId + "&entity=song&callback=?",
{
format: "JSON"
},
function(data) {
mysounds.push(data.results[1].previewUrl);
$($imgcontainer).hover(
function() {
$($imgcontainer).children("img").fadeTo(500,0.4);
$($imgcontainer).children("div").fadeTo(500,1);
var numericid = parseInt(this.id.replace(/^ai/g,""));
mySound = soundManager.createSound({
id: numericid.toString(),
url: mysounds[numericid]
});
mySound.play();
},
function() {
$($imgcontainer).children("img").fadeTo(500,1);
$($imgcontainer).children("div").fadeTo(500,0);
mySound.stop();
});
});
});
});
});
});
});
</script>
<style type="text/css">
#mylist {
width:640px;
margin:0 auto; /*css standard for centering - note may not work in IE*/
}
img {
width: 60px;
height: 60px;
}
p {
font-family:"Courier New", monospace;
font-style: normal;
font-size: 9px;
margin: 0;
padding: 0;
border: 0;
}
div.albumimg {
display: inline-block;
overflow: hidden;
position: relative; /*has to be relative position for the child absolute positioning to work*/
}
div.albumimg > div {
position: absolute;
overflow: hidden;
height:60px; width:60px;
top: 0px;
left: 0px;
}
</style>
</body>
</html>