Changeset 29867 for main/trunk/model-sites-dev
- Timestamp:
- 2015-05-12T14:57:02+12:00 (9 years ago)
- Location:
- main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
- Files:
-
- 2 added
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js
r29863 r29867 280 280 // avoid playing a note if some kind of control-key 281 281 // combination (such a web page reload) is pressed 282 return; 282 return false; 283 } 284 285 if (e.shiftKey) { 286 return fnDrumKeyboard(e); 283 287 } 284 288 … … 431 435 }; 432 436 437 var fnDrumKeyboard = function(e) { 438 //console.log("*** drum pressed: " + e.key); 439 if (e.key == "C") { 440 $('#drum1').trigger("mousedown"); 441 } 442 else if (e.key == "B") { 443 $('#drum2').trigger("mousedown"); 444 } 445 else if (e.key == "N") { 446 $('#drum3').trigger("mousedown"); 447 } 448 else if (e.key == "M") { 449 $('#drum4').trigger("mousedown"); 450 } 451 else if (e.key == " ") { 452 $('#drum5').trigger("mousedown"); 453 } 454 455 e.preventDefault(); 456 return false; 457 } 458 459 433 460 // Set up global event listeners 434 461 -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js
r29863 r29867 19 19 $('#video').on('loadedmetadata', function() { 20 20 21 displayDuration(this.duration); 22 21 23 // Create a MediaElementAudioSourceNode 22 24 // Feed the HTMLMediaElement into it … … 27 29 // music and have the filter 'kick in' when 'Missing Out' button 28 30 // pressed 29 30 31 31 32 var tinnyEffectNode = audioCtx.createScriptProcessor(bufferSize, 2, 2); -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js
r29863 r29867 25 25 var drum; 26 26 27 $('.drum'). click(function() {27 $('.drum').mousedown(function() { 28 28 29 //find the drum it and play the respective audio29 //find the drum hit and play the respective audio 30 30 drum = $(this).attr('id'); 31 31 drum = eval(drum); -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js
r29863 r29867 57 57 mediaPlayer.addEventListener('play', function() { 58 58 // Change the button to be a pause button 59 changeButtonType(playPauseBtn, ' pause');59 changeButtonType(playPauseBtn, 'buttonx2 pause'); 60 60 }, false); 61 61 mediaPlayer.addEventListener('pause', function() { 62 62 // Change the button to be a play button 63 changeButtonType(playPauseBtn, ' play');63 changeButtonType(playPauseBtn, 'buttonx2 play'); 64 64 }, false); 65 65 … … 67 67 mediaPlayer.addEventListener('volumechange', function(e) { 68 68 // Update the button to be mute/unmute 69 if (mediaPlayer.muted) changeButtonType(muteBtn, ' unmute');70 else changeButtonType(muteBtn, ' mute');69 if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute'); 70 else changeButtonType(muteBtn, 'button mute'); 71 71 }, false); 72 72 mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); … … 92 92 93 93 // Change the button to be a pause button 94 changeButtonType(playPauseBtn, ' pause');94 changeButtonType(playPauseBtn, 'buttonx2 pause'); 95 95 // Play the media 96 96 mediaPlayer.play(); … … 101 101 102 102 // Change the button to be a play button 103 changeButtonType(playPauseBtn, ' play');103 changeButtonType(playPauseBtn, 'buttonx2 play'); 104 104 // Pause the media 105 105 mediaPlayer.pause(); … … 109 109 } 110 110 111 function pad(n, width, z) { 112 z = z || '0'; 113 n = n + ''; 114 return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; 115 } 116 117 function convertSecsToTimeStr(time) 118 { 119 var int_mins = Math.floor(time / 60); 120 121 var float_secs = time % 60; 122 //var int_secs = Math.floor(float_secs); 123 124 //var float_sub_sec = float_secs - int_secs; 125 //var int_sub_sec = float_sub_sec.toFixed(2) 126 127 var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place 128 return int_mins + ":" + padded_secs 129 } 130 131 132 function displayCurrentTime() 133 { 134 var currentTime = mediaPlayer.currentTime; 135 var formattedTime = convertSecsToTimeStr(currentTime); 136 $('#mediaPlayerCurrentTime').html(formattedTime); 137 } 138 139 function displayDuration(duration) 140 { 141 var formattedTime = convertSecsToTimeStr(duration); 142 $('#mediaPlayerTotalTime').html(formattedTime); 143 } 144 145 111 146 // Stop the current media from playing, and return it to the start position 112 function stopPlayer() { 113 mediaPlayer.pause(); 114 mediaPlayer.currentTime = 0; 147 function stopPlayer() 148 { 149 mediaPlayer.pause(); 150 mediaPlayer.currentTime = 0; 151 displayCurrentTime(); 115 152 } 116 153 … … 126 163 if (mediaPlayer.muted) { 127 164 // Change the cutton to be a mute button 128 changeButtonType(muteBtn, ' mute');165 changeButtonType(muteBtn, 'button mute'); 129 166 // Unmute the media player 130 167 mediaPlayer.muted = false; … … 132 169 else { 133 170 // Change the button to be an unmute button 134 changeButtonType(muteBtn, ' unmute');171 changeButtonType(muteBtn, 'button unmute'); 135 172 // Mute the media player 136 173 mediaPlayer.muted = true; … … 146 183 // Update the progress bar 147 184 function updateProgressBar() { 148 // Work out how much of the media has played via the duration and currentTime parameters 149 var percentage = (100 / mediaPlayer.duration) * mediaPlayer.currentTime; 150 // Update the progress bar's value 151 progressBar.value = percentage; 152 // Update the progress bar's text (for browsers that don't support the progress element) 153 progressBar.innerHTML = Math.floor(percentage) + '% played'; 185 // Work out how much of the media has played via the duration and currentTime parameters 186 var percentage = (100 / mediaPlayer.duration) * mediaPlayer.currentTime; 187 188 // Update the progress bar's value 189 progressBar.value = percentage; 190 191 // Update the progress bar's text (for browsers that don't support the progress element) 192 progressBar.innerHTML = Math.floor(percentage) + '% played'; 193 194 displayCurrentTime(); 154 195 } 155 196 … … 161 202 // Update the video time 162 203 mediaPlayer.currentTime = time; 204 displayCurrentTime(); 163 205 } 164 206 … … 195 237 // Resets the media player 196 238 function resetPlayer() { 197 mediaStartPlayTime = null; 198 mediaStartPauseTime = null; 199 200 // Reset the progress bar to 0 201 progressBar.value = 0; 202 // Move the media back to the start 203 mediaPlayer.currentTime = 0; 204 // Ensure that the play pause button is set as 'play' 205 changeButtonType(playPauseBtn, 'play'); 206 } 239 mediaStartPlayTime = null; 240 mediaStartPauseTime = null; 241 242 // Reset the progress bar to 0 243 progressBar.value = 0; 244 // Move the media back to the start 245 mediaPlayer.currentTime = 0; 246 displayCurrentTime(); 247 // Ensure that the play pause button is set as 'play' 248 changeButtonType(playPauseBtn, 'play'); 249 } -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css
r29863 r29867 24 24 } 25 25 26 button { 26 27 .button { 27 28 text-indent:-9999px; 28 29 width:16px; … … 33 34 } 34 35 36 37 38 .buttonx2 { 39 text-indent:-9999px; 40 width:32px; 41 height:32px; 42 border:none; 43 cursor:pointer; 44 background:transparent url('images/buttons_x2.png') no-repeat 0 0; 45 } 46 47 /* 35 48 .pause { background-position:-19px 0; } 36 49 .stop { background-position:-38px 0; } 50 */ 37 51 .volume-plus { background-position:-57px 0; } 38 52 .volume-minus { background-position:-76px 0; } 39 53 .mute { background-position:-95px 0; } 40 54 .unmute { background-position:-114px 0; } 55 /* 41 56 .replay { background-position:-133px 0; } 57 */ 58 59 .pause { background-position:-38px 0; } 60 .stop { background-position:-76px 0; } 61 /* 62 .volume-plus { background-position:-114px 0; } 63 .volume-minus { background-position:-152px 0; } 64 .mute { background-position:-190px 0; } 65 .unmute { background-position:-228px 0; } 66 */ 67 .replay { background-position:-266px 0; } 42 68 43 69 #progress-bar { -
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl
r29863 r29867 1315 1315 <div> 1316 1316 <div id='media-player' style="width: 96%"> 1317 <video id="video" width="100%" controls="true"> 1318 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" /> 1319 Your browser does not support the video tag. 1320 </video> 1321 1317 1318 1319 <div class="video-player-bar"> 1320 <div id="video-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 1321 Video Display 1322 </div> 1323 1324 <div id="video-area" class="documenttext" 1325 style="display: none; position: absolute: left: 0px; top: 0px;"> 1326 1327 <video id="video" width="100%" controls="true"> 1328 <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" /> 1329 Your browser does not support the video tag. 1330 </video> 1331 </div> 1332 </div> 1322 1333 1323 1334 <div id='media-controls'> … … 1328 1339 1329 1340 </div> 1330 <div style="padding: 8px"> 1331 <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button> 1332 <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button> 1333 <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button> 1334 <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button> 1335 <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button> 1336 <button id='mute-button' class='mute' title='mute' onclick="toggleMute('true');">Mute</button> 1341 <div style="width: 100%;"> 1342 <div style="float:left; padding: 8px; "> 1343 <button id='replay-button' class='buttonx2 replay' title='replay' onclick='replayMedia();'>Replay</button> 1344 <button id='play-pause-button' class='buttonx2 play' title='play' onclick='togglePlayPause();'>Play</button> 1345 <button id='stop-button' class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button> 1346 </div> 1347 <div style="float:right; padding: 8px; "> 1348 <div style="display: inline; font-family: Arial,Helvetica,sans-serif; color: white"> 1349 <span id="mediaPlayerCurrentTime">0:00.0</span>/ 1350 <span id="mediaPlayerTotalTime">0:00.0</span> 1351 </div> 1352 <button id='volume-inc-button' class='button volume-plus' title='increase volume' onclick="changeVolume('+');">Increase volume</button> 1353 <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button> 1354 <button id='mute-button' class='button mute' title='mute' onclick="toggleMute('true');">Mute</button> 1355 </div> 1337 1356 </div> 1338 1357 </div> 1339 1358 1359 1360 1361 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 1362 1363 <div class="analysis-bar"> 1364 <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 1365 Play Along 1366 </div> 1367 1368 1369 <div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 1370 <div style="color: white; width:100%; height: 400px;"> 1371 <xsl:comment>filler</xsl:comment> 1372 </div> 1373 1374 </div> 1375 </div> 1376 1377 1378 1379 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 1380 1381 <div class="playlist-bar"> 1382 <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 1383 Controls 1384 </div> 1385 1386 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 1387 1388 <div id="playlist-area" class="documenttext" 1389 style="display: none; position: absolute: left: 0px; top: 0px;"> 1390 <!-- 1391 <div id='media-play-list'> 1392 <h2>Play list</h2> 1393 <ul id='play-list'> 1394 <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li> 1395 <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li> 1396 <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li> 1397 </ul> 1398 </div> 1399 --> 1400 <div style="color: white;"> 1401 1402 <form style="width:99%;"> 1403 <fieldset> 1404 <legend id="mpm-legend">Video Player Mode</legend> 1405 1406 <div id="mpm-div" class="radio-div"> 1407 1408 <div class="radio-label-combo" style="display:inline-block; width: 32%"> 1409 <span> 1410 <input type="radio" id="mpm-record" name="mpm-radio" /> 1411 </span> 1412 <label for="mpm-record" class="radio-label"> 1413 <span style="color: red;"> 1414 Lay down new track (record) 1415 </span> 1416 </label> 1417 </div> 1418 1419 <div class="radio-label-combo" style="display:inline-block; width: 32%"> 1420 <span> 1421 <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/> 1422 </span> 1423 <label for="mpm-neutral" class="radio-label"> 1424 <span style="color: orange;"> 1425 Put into Neutral 1426 </span> 1427 </label> 1428 </div> 1429 1430 <div class="radio-label-combo" style="display:inline-block; width: 32%"> 1431 <span> 1432 <input type="radio" id="mpm-game-on" name="mpm-radio" /> 1433 </span> 1434 <label for="mpm-game-on" class="radio-label"> 1435 <span style="color: green;"> 1436 Game on! 1437 </span> 1438 </label> 1439 </div> 1440 1441 </div> 1442 </fieldset> 1443 </form> 1444 1445 <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black"> 1446 <fieldset> 1447 <legend id="mpm-legend">Popup Layers</legend> 1448 <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br /> 1449 <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br /> 1450 <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br /> 1451 <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br /> 1452 1453 <div style="padding: 8px;"> 1454 <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 1455 Merge Selected 1456 </button> 1457 <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 1458 Split Selected 1459 </button> 1460 <button id="mpm-edit-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center;"> 1461 Edit Selected 1462 </button> 1463 </div> 1464 </fieldset> 1465 </form> 1466 1467 <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; "> 1468 <fieldset> 1469 <legend id="pam-legend">Play Along Layers</legend> 1470 <input type="checkbox" name="PianoHero" value="PianoHero" />Piano Hero<br /> 1471 <input type="checkbox" name="DrumHero" value="DrumHero" />Drum-beat Hero<br /> 1472 1473 <div style="padding: 8px;"> 1474 <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 1475 Merge Selected 1476 </button> 1477 <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 1478 Split Selected 1479 </button> 1480 <button id="pam-edit-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center;"> 1481 Edit Selected 1482 </button> 1483 </div> 1484 </fieldset> 1485 </form> 1486 1487 1488 </div> 1489 1490 </div> 1491 </div> 1492 1493 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 1494 1340 1495 <div class="turnstyle-bar"> 1341 1496 … … 1350 1505 </div> 1351 1506 1352 <div id=" playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;">1353 Popup Layers1507 <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;"> 1508 Guitar 1354 1509 </div> 1355 1510 … … 1400 1555 </div> 1401 1556 1402 1557 <style> 1558 .drumcontainer { 1559 position: absolute; 1560 top: 50%; 1561 left: 50%; 1562 transform: translateX(-50%) translateY(-50%); 1563 font-size: 150%; 1564 color: #888888; 1565 pointer-events: onone; 1566 } 1567 </style> 1403 1568 <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 1404 <div id='jquery-drums' >1569 <div id='jquery-drums' style="padding: 8px;"> 1405 1570 <center> 1406 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum1" border="0" /> 1407 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum2" border="0" /> 1408 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum3" border="0" /> 1409 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum4" border="0" /> 1571 <div style="display:inline-block;"> 1572 <div style="position: relative;"> 1573 <img style="position: relative;" width="202" height="204" 1574 src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" /> 1575 <div class="drumcontainer" style="color: #555555"> 1576 <Shift-C> 1577 </div> 1578 </div> 1579 </div> 1580 <div style="display:inline-block;"> 1581 <div style="position: relative;"> 1582 <img style="position: relative;" width="197" height="192" 1583 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" /> 1584 <div class="drumcontainer" > 1585 <Shift-B> 1586 </div> 1587 </div> 1588 </div> 1589 <div style="display:inline-block;"> 1590 <div style="position: relative;"> 1591 <img style="position: relative;" width="197" height="192" 1592 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" /> 1593 <div class="drumcontainer" > 1594 <Shift-N> 1595 </div> 1596 </div> 1597 </div> 1598 <div style="display:inline-block;"> 1599 <div style="position: relative;"> 1600 <img style="position: relative;" width="197" height="192" 1601 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" /> 1602 <div class="drumcontainer" > 1603 <Shift-M> 1604 </div> 1605 </div> 1606 </div> 1410 1607 <br /> 1411 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum5" border="0" /> 1412 <img src="{$httpCollection}/images/drum.png" class="drum" id="drum6" border="0" /> 1413 <br /> 1608 <div style="display:inline-block;"> 1609 <div style="position: relative;"> 1610 <img style="position: relative;" width="240" height="234" 1611 src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" /> 1612 <div class="drumcontainer" > 1613 <Space-Bar> 1614 </div> 1615 </div> 1616 </div> 1414 1617 </center> 1415 1618 </div> … … 1418 1621 1419 1622 1420 <div id="playlist-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 1421 <!-- 1422 <div id='media-play-list'> 1423 <h2>Play list</h2> 1424 <ul id='play-list'> 1425 <li><span class='play-item' onclick="loadVideo('parrots.webm', 'parrots.mp4');">Parrots</span></li> 1426 <li><span class='play-item' onclick="loadVideo('paddle-wheel.webm', 'paddle-wheel.mp4');">Paddle Steamer Wheel</span></li> 1427 <li><span class='play-item' onclick="loadVideo('grass.webm', 'grass.mp4');">Grass</span></li> 1428 </ul> 1429 </div> 1430 --> 1623 <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 1431 1624 <div style="color: white;"> 1432 <form style="padding: 20px;"> 1433 <input type="checkbox" name="PopupTrivia" value="PopupTrivia" />Popup Trivia<br /> 1434 <input type="checkbox" name="Lyrics" value="Lyrics" />Lyrics<br /> 1435 <input type="checkbox" name="MisheardLyrics" value="MisheardLyrics" />Misheard Lyrics<br /> 1436 <input type="checkbox" name="GuitarChords" value="GuitarChords" />Play-along Guitar Chords<br /> 1437 <input type="checkbox" name="PianoHere" value="PianoHero" />Play-along Piano Hero<br /> 1438 </form> 1625 Guitar area 1439 1626 </div> 1440 1441 </div> 1442 1443 </div> 1627 </div> 1628 1629 </div> 1630 1631 <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 1632 1444 1633 1445 1634 </div> 1635 1636 1637 1446 1638 1447 1639 <script> 1448 1640 <xsl:text disable-output-escaping="yes"> 1449 1641 $(function(){ 1642 transformToTurnstyleBlock("video"); 1643 transformToTurnstyleBlock("playlist"); 1644 1450 1645 transformToTurnstyleBlock("piano"); 1451 transformToTurnstyleBlock("playlist");1452 1646 transformToTurnstyleBlock("drumkit"); 1647 transformToTurnstyleBlock("guitar"); 1648 1649 transformToTurnstyleBlock("analysis"); 1650 1651 $('#video-openclose').trigger("click"); 1652 1453 1653 }); 1454 1654 var piano_keyboard = new AudioSynthView();
Note:
See TracChangeset
for help on using the changeset viewer.