mcrmfc.github.com/scratchzone.html at master · mcrmfc/mcrmfc.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<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>