Permalink
Browse files

take query parameters

  • Loading branch information...
1 parent 01382b5 commit d4f519f5a11cc8f4d3d1cca5ac2985bfe0072156 @substack committed Feb 7, 2012
Showing with 63 additions and 24 deletions.
  1. +10 −1 index.html
  2. +48 −22 play.js
  3. +5 −1 style.css
View
@@ -24,7 +24,7 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
- <h1>instrumental</h1>
+ <h1><a href="?">instrumental</a></h1>
<div id="container">
<div id="playlist">
<h3>playlist</h3>
@@ -36,6 +36,7 @@
<th></th>
<td></td>
<th>volume</th>
+ <th>offset</th>
</tr>
<tr>
<th>talk</th>
@@ -49,6 +50,10 @@
<input type="text" id="talk-volume" class="volume"
value="100">
</td>
+ <td>
+ <input type="text" id="talk-offset" class="offset"
+ value="0">
+ </td>
</tr>
<tr>
<th>music</th>
@@ -62,6 +67,10 @@
<input type="text" id="music-volume" class="volume"
value="30">
</td>
+ <td>
+ <input type="text" id="music-offset" class="offset"
+ value="0">
+ </td>
</tr>
</table>
View
70 play.js
@@ -2,24 +2,24 @@ var music, talk;
var instrumentals = {
lessig : {
- talk : [ 'http://www.youtube.com/watch?v=2YRCPTFjB3Q', 100 ],
- music : [ 'http://www.youtube.com/watch?v=6Hh3tciRim0', 30 ]
+ talk : [ 'http://www.youtube.com/watch?v=2YRCPTFjB3Q', 100, 11 ],
+ music : [ 'http://www.youtube.com/watch?v=6Hh3tciRim0', 30, 0 ]
},
acai : {
- talk : [ 'http://www.youtube.com/watch?v=gRmd3OXs-qE', 100 ],
- music : [ 'http://www.youtube.com/watch?v=DripIUEVjjA', 50 ]
+ talk : [ 'http://www.youtube.com/watch?v=gRmd3OXs-qE', 100, 0 ],
+ music : [ 'http://www.youtube.com/watch?v=DripIUEVjjA', 50, 0 ]
},
'manila slum' : {
- talk : [ 'http://www.youtube.com/watch?v=eYFzGkBqJ2c', 100 ],
- music : [ 'http://www.youtube.com/watch?v=pt9Ov4gYtew', 40 ]
+ talk : [ 'http://www.youtube.com/watch?v=eYFzGkBqJ2c', 100, 5 ],
+ music : [ 'http://www.youtube.com/watch?v=pt9Ov4gYtew', 40, 0 ]
},
'pop out' : {
- talk : [ 'http://www.youtube.com/watch?v=BnZks0BCCiw', 100 ],
- music : [ 'http://www.youtube.com/watch?v=_83pa-KJGTc', 50 ]
+ talk : [ 'http://www.youtube.com/watch?v=BnZks0BCCiw', 100, 0 ],
+ music : [ 'http://www.youtube.com/watch?v=_83pa-KJGTc', 50, 0 ]
},
'ryan dahl' : {
- talk : [ 'http://www.youtube.com/watch?v=L_JKb61EalQ', 100 ],
- music : [ 'http://www.youtube.com/watch?v=6Hh3tciRim0', 30 ]
+ talk : [ 'http://www.youtube.com/watch?v=L_JKb61EalQ', 100, 8 ],
+ music : [ 'http://www.youtube.com/watch?v=sNChulAdILY', 50, 0 ]
}
};
@@ -38,13 +38,27 @@ function talkOnstateChange (state) {
music[0].setVolume(Math.floor(v * 0.99));
}, 10);
}
+ else if (state === 5) {
+ talk[0].playVideo();
+ setTimeout(function () {
+ music[0].playVideo();
+ }, 1);
+ }
}
$(document).ready(function () {
for (var key in instrumentals) {
+ var ins = instrumentals[key];
var div = $('<div>').appendTo($('#playlist'));
$('<a>')
- .attr('href', '?' + escape(key))
+ .attr('href', '?' + [
+ 'talkUri=' + escape(ins.talk[0]),
+ 'talkVolume=' + escape(ins.talk[1]),
+ 'talkOffset=' + escape(ins.talk[2]),
+ 'musicUri=' + escape(ins.music[0]),
+ 'musicVolume=' + escape(ins.music[1]),
+ 'musicOffset=' + escape(ins.music[2])
+ ].join('&'))
.text(key)
.appendTo(div)
;
@@ -66,14 +80,25 @@ $(document).ready(function () {
});
var query = (window.location.search || '').replace(/^\?/, '');
- var params = instrumentals[unescape(query)];
- if (params) {
- $('#talk-uri').val(params.talk[0]);
- $('#talk-volume').val(params.talk[1]);
- $('#music-uri').val(params.music[0]);
- $('#music-volume').val(params.music[1]);
- $('#play').trigger('click');
- }
+ var params = query.split('&').reduce(function (acc, s) {
+ var xs = s.split('=');
+ var key = unescape(xs[0]);
+ var value = unescape(xs[1] || '');
+
+ if (value.match(/^\d+$/)) value = parseInt(value, 10);
+ acc[key] = value;
+ return acc;
+ }, {});
+
+ if (params.talkUri) $('#talk-uri').val(params.talkUri);
+ if (params.talkVolume) $('#talk-volume').val(params.talkVolume);
+ if (params.talkOffset) $('#talk-offset').val(params.talkOffset);
+
+ if (params.musicUri) $('#music-uri').val(params.musicUri);
+ if (params.musicVolume) $('#music-volume').val(params.musicVolume);
+ if (params.musicOffset) $('#music-offset').val(params.musicOffset);
+
+ if (query.length) $('#play').trigger('click');
$('#reload').click(reload);
@@ -83,15 +108,16 @@ $(document).ready(function () {
talk = $('#talk-api');
var talkUri = $('#talk-uri').val();
var talkId = talkUri.match(/\bv=([^&]+)/)[1];
- talk[0].loadVideoById(talkId);
+ talk[0].cueVideoById(talkId, parseInt($('#talk-offset').val(), 10));
+
talk[0].setVolume(parseInt($('#talk-volume').val(), 10));
talk[0].addEventListener('onStateChange', 'talkOnstateChange');
music = $('#music-api');
var musicUri = $('#music-uri').val();
var musicId = musicUri.match(/\bv=([^&]+)/)[1];
- music[0].loadVideoById(musicId);
- music[0].setVolume(parseInt($('#music-volume').val(), 10));
music[0].setLoop(true);
+ music[0].setVolume(parseInt($('#music-volume').val(), 10));
+ music[0].cueVideoById(musicId, parseInt($('#music-offset').val(), 10));
}
});
View
@@ -3,7 +3,7 @@ h1 {
}
#container {
- width: 600px;
+ width: 650px;
margin: auto;
}
@@ -21,6 +21,10 @@ h1 {
width: 50px;
}
+#player table input.offset {
+ width: 50px;
+}
+
#buttons {
text-align: center;
width: 425;

0 comments on commit d4f519f

Please sign in to comment.