Changeset 29867

Show
Ignore:
Timestamp:
12.05.2015 14:57:02 (4 years ago)
Author:
davidb
Message:

Next round of improvements. More open-close bars. Drums with better images. Drums played on mousedown + key mappings. Playbar layout changed. Timing info when playing added.

Location:
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
Files:
2 added
6 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29863 r29867  
    280280        // avoid playing a note if some kind of control-key 
    281281        // combination (such a web page reload) is pressed 
    282         return; 
     282        return false; 
     283    } 
     284 
     285    if (e.shiftKey) { 
     286        return fnDrumKeyboard(e); 
    283287    } 
    284288     
     
    431435    }; 
    432436 
     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 
    433460    // Set up global event listeners 
    434461 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

    r29863 r29867  
    1919    $('#video').on('loadedmetadata', function() { 
    2020 
     21    displayDuration(this.duration);  
     22 
    2123    // Create a MediaElementAudioSourceNode 
    2224    // Feed the HTMLMediaElement into it 
     
    2729    // music and have the filter 'kick in' when 'Missing Out' button  
    2830    // pressed 
    29      
    3031 
    3132    var tinnyEffectNode = audioCtx.createScriptProcessor(bufferSize, 2, 2); 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js

    r29863 r29867  
    2525    var drum; 
    2626     
    27     $('.drum').click(function() { 
     27    $('.drum').mousedown(function() { 
    2828     
    29     //find the drum it and play the respective audio 
     29    //find the drum hit and play the respective audio 
    3030    drum = $(this).attr('id'); 
    3131    drum = eval(drum); 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29863 r29867  
    5757    mediaPlayer.addEventListener('play', function() { 
    5858        // Change the button to be a pause button 
    59         changeButtonType(playPauseBtn, 'pause'); 
     59        changeButtonType(playPauseBtn, 'buttonx2 pause'); 
    6060    }, false); 
    6161    mediaPlayer.addEventListener('pause', function() { 
    6262        // Change the button to be a play button 
    63         changeButtonType(playPauseBtn, 'play'); 
     63        changeButtonType(playPauseBtn, 'buttonx2 play'); 
    6464    }, false); 
    6565     
     
    6767    mediaPlayer.addEventListener('volumechange', function(e) {  
    6868        // 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'); 
    7171    }, false);   
    7272    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);  
     
    9292 
    9393        // Change the button to be a pause button 
    94         changeButtonType(playPauseBtn, 'pause'); 
     94        changeButtonType(playPauseBtn, 'buttonx2 pause'); 
    9595        // Play the media 
    9696        mediaPlayer.play(); 
     
    101101 
    102102        // Change the button to be a play button 
    103         changeButtonType(playPauseBtn, 'play'); 
     103        changeButtonType(playPauseBtn, 'buttonx2 play'); 
    104104        // Pause the media 
    105105        mediaPlayer.pause(); 
     
    109109} 
    110110 
     111function 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 
     117function 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 
     132function displayCurrentTime() 
     133{ 
     134    var currentTime = mediaPlayer.currentTime; 
     135    var formattedTime = convertSecsToTimeStr(currentTime); 
     136    $('#mediaPlayerCurrentTime').html(formattedTime); 
     137} 
     138 
     139function displayDuration(duration) 
     140{ 
     141     var formattedTime = convertSecsToTimeStr(duration); 
     142     $('#mediaPlayerTotalTime').html(formattedTime); 
     143} 
     144 
     145 
    111146// Stop the current media from playing, and return it to the start position 
    112 function stopPlayer() { 
    113     mediaPlayer.pause(); 
    114     mediaPlayer.currentTime = 0; 
     147function stopPlayer()  
     148{ 
     149    mediaPlayer.pause(); 
     150    mediaPlayer.currentTime = 0; 
     151    displayCurrentTime(); 
    115152} 
    116153 
     
    126163    if (mediaPlayer.muted) { 
    127164        // Change the cutton to be a mute button 
    128         changeButtonType(muteBtn, 'mute'); 
     165        changeButtonType(muteBtn, 'button mute'); 
    129166        // Unmute the media player 
    130167        mediaPlayer.muted = false; 
     
    132169    else { 
    133170        // Change the button to be an unmute button 
    134         changeButtonType(muteBtn, 'unmute'); 
     171        changeButtonType(muteBtn, 'button unmute'); 
    135172        // Mute the media player 
    136173        mediaPlayer.muted = true; 
     
    146183// Update the progress bar 
    147184function 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(); 
    154195} 
    155196 
     
    161202    // Update the video time 
    162203    mediaPlayer.currentTime = time; 
     204    displayCurrentTime(); 
    163205} 
    164206 
     
    195237// Resets the media player 
    196238function 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  
    2424} 
    2525 
    26 button { 
     26 
     27.button { 
    2728    text-indent:-9999px; 
    2829    width:16px; 
     
    3334} 
    3435 
     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/* 
    3548.pause { background-position:-19px 0; } 
    3649.stop { background-position:-38px 0; } 
     50*/ 
    3751.volume-plus { background-position:-57px 0; } 
    3852.volume-minus { background-position:-76px 0; } 
    3953.mute { background-position:-95px 0; } 
    4054.unmute { background-position:-114px 0; } 
     55/* 
    4156.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; } 
    4268 
    4369#progress-bar { 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29863 r29867  
    13151315<div> 
    13161316  <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> 
    13221333 
    13231334    <div id='media-controls'> 
     
    13281339 
    13291340      </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> 
    13371356      </div> 
    13381357    </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 
    13401495    <div class="turnstyle-bar"> 
    13411496 
     
    13501505      </div> 
    13511506 
    1352       <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;"> 
    1353     Popup Layers 
     1507      <div id="guitar-titlebar" style="background-image: none; background-color: #2E52A4; width: 30%; float: left;"> 
     1508    Guitar 
    13541509      </div> 
    13551510 
     
    14001555    </div> 
    14011556 
    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> 
    14031568    <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;"> 
    14051570        <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            &lt;Shift-C&gt; 
     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            &lt;Shift-B&gt; 
     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            &lt;Shift-N&gt; 
     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            &lt;Shift-M&gt; 
     1604          </div> 
     1605        </div> 
     1606          </div> 
    14101607          <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            &lt;Space-Bar&gt; 
     1614          </div> 
     1615        </div> 
     1616          </div> 
    14141617        </center> 
    14151618      </div> 
     
    14181621 
    14191622 
    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;"> 
    14311624          <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 
    14391626      </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 
    14441633 
    14451634    </div> 
     1635 
     1636 
     1637 
    14461638 
    14471639    <script> 
    14481640      <xsl:text disable-output-escaping="yes"> 
    14491641    $(function(){ 
     1642      transformToTurnstyleBlock("video"); 
     1643      transformToTurnstyleBlock("playlist"); 
     1644 
    14501645      transformToTurnstyleBlock("piano"); 
    1451       transformToTurnstyleBlock("playlist"); 
    14521646      transformToTurnstyleBlock("drumkit"); 
     1647      transformToTurnstyleBlock("guitar"); 
     1648 
     1649      transformToTurnstyleBlock("analysis"); 
     1650 
     1651      $('#video-openclose').trigger("click"); 
     1652 
    14531653    }); 
    14541654    var piano_keyboard = new AudioSynthView();