-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
56 lines (56 loc) · 2.15 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<title>DataTunes: What tune does your data sing?</title>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script>
$(document).ready(function(){
$.getJSON( "https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20*%20FROM%201O6hT62FNqs3h0akn1QLoA4lRQzyf7xOH6uuYJLto&key=AIzaSyBhnCW_Pr6MrOCfQgw6-Ef13bOqeys-Egs", function( data ) {
var newData=[];
var template = $('#song_template').html();
var jsonHtml;
var jsonS;
for (var i = 0; i<data.rows.length; i++){
jsonS = {'song_title': data.rows[i][0], 'notes': data.rows[i][1]};
newData.push(jsonS);
jsonHtml = Mustache.to_html(template, newData[i]);
$("#playlist").append(jsonHtml);
};
});
});
</script>
</head>
<body>
<article class="content">
<section id="ready">
<header>
<h1>DataTunes: Making music with Data!</h1>
</header>
<p>
Select a song from the playlist pulldown menu or past your own chunk of text in the textarea below and click the <em>Tunify the Data!</em> button.
</p>
<p>
<select id="playlist" name="playlist">
<option value="default">Select a Song</option>
</select>
</p>
<form>
<textarea id="text" class="textarea" rows="8">g c z Cc ag c A g feefgc d e g c z Cc ag c A feefgc d c G C c Cc AG c E g feefgc d e G C c Cc AG c E feefgc d c</textarea>
<p>
faster<input type="range" id="tempo" name="tempo" min="100" max="1000" value="300" step="100">slower
</p>
<p>
<a href="#" class="play">Tunify the Data!</a><a href="#" class="stop">Stop Music</a>
</p>
</form>
</section>
<script id="song_template" type="text/template">
<option value="{{notes}}">{{song_title}}</option>
</script>
</article>
<script type="text/javascript" src="howler.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>