Changeset 29883

Show
Ignore:
Timestamp:
15.05.2015 11:43:06 (4 years ago)
Author:
davidb
Message:

Next round of development. Fixed up clicking on text over drum images. Added guitar chords. Change that might help Safari web audio

Location:
main/trunk/model-sites-dev/respooled/collect/popup-video-respooled
Files:
5 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml

    r29877 r29883  
    308308                    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 
    309309                </gsf:variable> 
     310 
     311                                <gsf:script src="{$httpCollection}/js/pep.js"/> 
     312 
     313                <gsf:link src="{$httpCollection}/style/jtab-helper.css"/>                
     314                                <gsf:script src="{$httpCollection}/js/raphael.js"/> 
     315                                <gsf:script src="{$httpCollection}/js/jtab.js"/> 
    310316<!-- 
    311317                <xsl:call-template name="soundmanager2-header"/> 
     
    350356 
    351357                                <!-- MIDI.js library --> 
    352  
    353358 
    354359                                <gsf:script src="{$httpCollection}/js/midi/inc/shim/Base64.js"/> 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29877 r29883  
    243243    var playedNotePitch; 
    244244    var playedMidiPitch; 
     245 
    245246    var playedNoteStartTime; 
     247    var playedNoteStartCurrentTime; 
     248 
    246249    var playedDuration; 
     250 
    247251 
    248252    // Creates our audio player 
     
    252256 
    253257    playedNoteStartTime = Date.now(); 
     258    playedNoteStartCurrentTime = mediaPlayer.currentTime; 
     259 
    254260    playedNotePitch = "note = " + note + ",  octave = " + octave; 
    255261    playedMidiPitch = midiMiddleC + (12 * (octave-4)) +  midiOctaveMap[note]; 
     
    280286        // avoid playing a note if some kind of control-key 
    281287        // combination (such a web page reload) is pressed 
     288        return false; 
     289    } 
     290 
     291    if (e.key == " ") { 
     292        togglePlayPause(); 
     293        e.preventDefault(); 
    282294        return false; 
    283295    } 
     
    381393          'midiNoteOn'  : relativePlayedNoteStartTime, 
    382394          'midiNoteOff' : relativePlayedNoteEndTime, 
     395          'startCurrentTime' : playedNoteStartCurrentTime, 
    383396          'duration    ': playedDuration, 
    384397          'humanReadble': playedNotePitch } 
     
    442455        $('#drum1').trigger("mousedown"); 
    443456    } 
     457    else if (e.key == "V") { 
     458        $('#drum2').trigger("mousedown"); 
     459    } 
    444460    else if (e.key == "B") { 
    445         $('#drum2').trigger("mousedown"); 
     461        $('#drum3').trigger("mousedown"); 
    446462    } 
    447463    else if (e.key == "N") { 
    448         $('#drum3').trigger("mousedown"); 
     464        $('#drum4').trigger("mousedown"); 
    449465    } 
    450466    else if (e.key == "M") { 
    451         $('#drum4').trigger("mousedown"); 
    452     } 
    453     else if (e.key == " ") { 
    454467        $('#drum5').trigger("mousedown"); 
    455468    } 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/in-the-groove.js

    r29881 r29883  
    1 "use strict"; 
     1//"use strict"; 
    22 
    33// https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor 
     
    55var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
    66 
    7 //var InTheGroove = true; 
     7if( 'webkitAudioContext' in window) { 
     8    console.log("*** Web Audio found in webkit namespace"); 
     9    audioCtx = new webkitAudioContext(); 
     10} 
     11 
    812var InTheGroove = false; 
    913var MissingTheGroovePending = false; 
     
    4448         
    4549        for (var i = 0; i < bufferSize; i++) { 
    46             if (InTheGroove) { 
     50            if ( ((mediaPlaybackMode == "neutral") || (mediaPlaybackMode == "record")) 
     51             || InTheGroove) { 
    4752            output[i] = input[i]; 
    4853            } 
     
    5156            output[i] = input[i] - prev_input[c]; 
    5257            } 
    53             //if (i==128) { 
    54             //  console.log("*** input[128] = " + input[i]); 
    55             //} 
    5658 
    5759            prev_input[c] = input[i]; 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29877 r29883  
    1 "use strict"; 
     1//"use strict"; 
    22 
    33// Based on:  
     
    240240// Updates a button's title, innerHTML and CSS class to a certain value 
    241241function changeButtonType(btn, value) { 
    242     btn.title = value; 
     242    //btn.title = value; 
    243243    btn.innerHTML = value; 
    244244    btn.className = value; 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29877 r29883  
    7676 
    7777  <xsl:template name="javascript-dsp-header"> 
     78 
    7879    <gsf:script src="ext/js-dsp/dsp-custom.js"/> 
    7980    <gsf:script src="ext/js-dsp/dsp.js"/> 
     
    13241325      <div id="video-area" class="documenttext"  
    13251326       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>  
     1327    <center> 
     1328      <video id="video" width="60%" controls="true"> 
     1329        <source src="{$httpCollection}/index/assoc/{$assocFilePath}/{$streamablevideo}" /> 
     1330        Your browser does not support the video tag. 
     1331      </video> 
     1332    </center>  
    13311333      </div> 
    13321334    </div> 
     
    13421344    <div style="float:left; padding: 8px; "> 
    13431345      <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> 
     1346      <button id='play-pause-button' class='buttonx2 play' title='play/pause (or press space-bar on keyboard)' onclick='togglePlayPause();'>Play</button> 
    13451347      <button id='stop-button'       class='buttonx2 stop' title='stop' onclick='stopPlayer();'>Stop</button> 
    13461348    </div> 
     
    13501352        <span id="mediaPlayerTotalTime">0:00.0</span> 
    13511353      </div> 
     1354      <button id='volume-dec-button' class='button volume-minus' title='decrease volume' onclick="changeVolume('-');">Decrease volume</button> 
    13521355      <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> 
    13541356      <button id='mute-button'       class='button mute' title='mute' onclick="toggleMute('true');">Mute</button>    
    13551357    </div> 
    13561358      </div> 
    13571359    </div> 
    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  
    13771360 
    13781361 
     
    14691452          <button id="mpm-merge-overlay"  
    14701453              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1471               style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1454              style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    14721455            Merge Selected 
    14731456          </button> 
    14741457          <button id="mpm-split-overlay"  
    14751458              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1476               style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1459              style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    14771460            Split Selected 
    14781461          </button> 
    14791462          <button id="mpm-edit-overlay"   
    14801463              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    1481               style="background-color:#2E52A4; color:white; width:32%; text-align: center;"> 
     1464              style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    14821465          Edit Selected 
     1466          </button> 
     1467          <button id="mpm-delete-overlay"   
     1468              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
     1469              style="background-color:#2E52A4; color:white; width:24%; text-align: center;"> 
     1470          Delete Selected 
    14831471          </button> 
    14841472        </div> 
     
    14931481         
    14941482        <div style="padding: 8px;"> 
    1495           <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1483          <button id="pam-merge-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    14961484            Merge Selected 
    14971485          </button> 
    1498           <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1486          <button id="pam-split-overlay" style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    14991487            Split Selected 
    15001488          </button> 
    1501           <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;"> 
     1489          <button id="pam-edit-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center; margin-right: 8px;"> 
    15021490          Edit Selected 
     1491          </button> 
     1492          <button id="pam-delete-overlay"  style="background-color:#2E52A4; color:white; width:24%; text-align: center;"> 
     1493          Delete Selected 
    15031494          </button> 
    15041495        </div> 
     
    15111502    </div> 
    15121503    </div> 
     1504 
     1505 
     1506    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 
     1507 
     1508    <div class="analysis-bar"> 
     1509      <div id="analysis-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 
     1510    Game On 
     1511      </div> 
     1512 
     1513 
     1514    <div id="analysis-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 
     1515          <div style="color: white; width:100%; height: 400px;"> 
     1516        <xsl:comment>filler</xsl:comment> 
     1517      </div> 
     1518       
     1519    </div> 
     1520    </div> 
     1521 
    15131522 
    15141523    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 
     
    15821591        left: 50%; 
    15831592        transform: translateX(-50%) translateY(-50%); 
    1584         font-size: 110%; 
     1593        -webkit-transform: translateX(-50%) translateY(-50%); 
     1594        font-size: 100%; 
    15851595        color: #888888; 
    1586         pointer-events: onone; 
     1596        pointer-events: none; 
    15871597      } 
    15881598    </style> 
     
    15951605               src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" /> 
    15961606          <div class="drumcontainer" style="color: #555555"> 
    1597             &lt;Shift-C&gt; 
     1607            <span style="white-space: nowrap;">&lt;Shift-C&gt;</span> 
    15981608          </div> 
    15991609        </div> 
     
    16041614              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" /> 
    16051615          <div class="drumcontainer" > 
    1606             &lt;Shift-B&gt; 
     1616            <span style="white-space: nowrap;">&lt;Shift-V&gt;</span> 
    16071617          </div> 
    16081618        </div> 
     
    16131623               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" /> 
    16141624          <div class="drumcontainer" > 
    1615             &lt;Shift-N&gt; 
     1625            <span style="white-space: nowrap;">&lt;Shift-B&gt;</span> 
    16161626          </div> 
    16171627        </div> 
     
    16221632               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" /> 
    16231633          <div class="drumcontainer" > 
    1624             &lt;Shift-M&gt; 
     1634            <span style="white-space: nowrap;">&lt;Shift-N&gt;</span> 
    16251635          </div> 
    16261636        </div> 
     
    16311641               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" /> 
    16321642          <div class="drumcontainer" > 
    1633             &lt;Space-Bar&gt; 
     1643           <span style="white-space: nowrap;"> &lt;Space-M&gt;</span> 
    16341644          </div> 
    16351645        </div> 
     
    16551665        </div> 
    16561666      </div> 
     1667 
     1668 
     1669      <div style="position: relative; background-color: white;"> 
     1670        <div style="display:inline-block; width: 150px; height: 200px;"> 
     1671          <form style="position: absolute; top: 60px; left: 10px;"> 
     1672 
     1673        <fieldset> 
     1674          <legend id="clm-legend">Show Chords</legend> 
     1675           
     1676          <div id="clm-div" class="radio-div"> 
     1677             
     1678            <div class="radio-label-combo"> 
     1679              <span> 
     1680            <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj" 
     1681                   checked="checked"/> 
     1682              </span> 
     1683              <label for="clm-maj" class="radio-label"> 
     1684            <span> 
     1685              Major 
     1686            </span> 
     1687              </label> 
     1688            </div> 
     1689             
     1690          <div class="radio-label-combo"> 
     1691            <span> 
     1692              <input type="radio" id="clm-maj" name="clm-radio" onchange="setChordLineupMode()" value="Maj"/> 
     1693            </span> 
     1694            <label for="clm-maj" class="radio-label"> 
     1695              <span> 
     1696            Minor 
     1697              </span> 
     1698            </label> 
     1699          </div> 
     1700          </div> 
     1701          </fieldset> 
     1702          </form> 
     1703        </div> 
     1704 
     1705        <div id="mytab" style="display:inline-block; height: 160px; width: 780px;"> 
     1706          <svg class="graph" xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%"> 
     1707        <g id="scaled-mytab-group" transform="scale(0.5,0.6)"> 
     1708          <foreignobject id="scaled-mytab" width="2000px" height="300px"><xsl:comment>filler</xsl:comment></foreignobject> 
     1709        </g> 
     1710          </svg> 
     1711        </div> 
     1712      </div> 
     1713 
     1714 
    16571715    </div> 
    16581716 
    16591717      </div> 
    16601718 
     1719      <div style="position: absolute; top: -300px; background-color: white;"> 
     1720    <style> 
     1721      .chordLineup { 
     1722        -webkit-transform-style: preserve-3d; 
     1723        -moz-transform-style: preserve-3d; 
     1724        transform-style: preserve-3d; 
     1725      } 
     1726 
     1727      .chordLineupBlock { 
     1728        display: inline-block; 
     1729      } 
     1730       
     1731      .chordLineupBlockVerticalCenter { 
     1732        position: relative; 
     1733        top: 50%; 
     1734        transform: translataeY(-50%); 
     1735        -webkit-transform: translataeY(-50%); 
     1736        -ms-transform: translataeY(-50%); 
     1737      } 
     1738 
     1739    </style> 
     1740    <div id="offscreen-jtab-chord-lineup"> 
     1741 
     1742      <div id="offscreen-jtab-chord-C" class="chordLineupBlock"> 
     1743        <xsl:comment>filler</xsl:comment> 
     1744      </div> 
     1745 
     1746      <div class="chordLineupBlock"> 
     1747        <div id="offscreen-jtab-chord-Db"> 
     1748          <xsl:comment>filler</xsl:comment> 
     1749        </div> 
     1750        <div id="offscreen-jtab-chord-Cs"> 
     1751          <xsl:comment>filler</xsl:comment> 
     1752        </div> 
     1753      </div> 
     1754       
     1755      <div id="offscreen-jtab-chord-D" class="chordLineupBlock"> 
     1756        <xsl:comment>filler</xsl:comment> 
     1757      </div> 
     1758 
     1759      <div class="chordLineupBlock"> 
     1760        <div id="offscreen-jtab-chord-Eb"> 
     1761          <xsl:comment>filler</xsl:comment> 
     1762        </div> 
     1763        <div id="offscreen-jtab-chord-Ds"> 
     1764          <xsl:comment>filler</xsl:comment> 
     1765        </div> 
     1766      </div> 
     1767       
     1768      <div id="offscreen-jtab-chord-E" class="chordLineupBlock"> 
     1769        <xsl:comment>filler</xsl:comment> 
     1770      </div> 
     1771       
     1772      <div id="offscreen-jtab-chord-F" class="chordLineupBlock"> 
     1773        <xsl:comment>filler</xsl:comment> 
     1774      </div> 
     1775       
     1776      <div class="chordLineupBlock"> 
     1777        <div id="offscreen-jtab-chord-Gb"> 
     1778          <xsl:comment>filler</xsl:comment> 
     1779        </div> 
     1780        <div id="offscreen-jtab-chord-Fs"> 
     1781          <xsl:comment>filler</xsl:comment> 
     1782        </div> 
     1783      </div> 
     1784 
     1785      <div id="offscreen-jtab-chord-G" class="chordLineupBlock"> 
     1786        <xsl:comment>filler</xsl:comment> 
     1787      </div> 
     1788       
     1789      <div class="chordLineupBlock"> 
     1790        <div id="offscreen-jtab-chord-Ab"> 
     1791          <xsl:comment>filler</xsl:comment> 
     1792        </div> 
     1793        <div id="offscreen-jtab-chord-Gs"> 
     1794          <xsl:comment>filler</xsl:comment> 
     1795        </div> 
     1796      </div> 
     1797 
     1798      <div id="offscreen-jtab-chord-A" class="chordLineupBlock"> 
     1799        <xsl:comment>filler</xsl:comment> 
     1800      </div> 
     1801       
     1802      <div class="chordLineupBlock"> 
     1803        <div id="offscreen-jtab-chord-Bb"> 
     1804          <xsl:comment>filler</xsl:comment> 
     1805        </div> 
     1806        <div id="offscreen-jtab-chord-As"> 
     1807          <xsl:comment>filler</xsl:comment> 
     1808        </div> 
     1809      </div> 
     1810 
     1811      <div id="offscreen-jtab-chord-B" class="chordLineupBlock"> 
     1812        <xsl:comment>filler</xsl:comment> 
     1813      </div> 
     1814       
     1815    </div> 
     1816 
     1817    <gsf:script> 
     1818      $(document).ready(function() { 
     1819 
     1820        jtab.render($('#offscreen-jtab-chord-C') ,'C'); 
     1821        jtab.render($('#offscreen-jtab-chord-Cs'),'C#'); 
     1822        jtab.render($('#offscreen-jtab-chord-Db'),'Db'); 
     1823        jtab.render($('#offscreen-jtab-chord-D') ,'D'); 
     1824        jtab.render($('#offscreen-jtab-chord-Ds'),'D#'); 
     1825        jtab.render($('#offscreen-jtab-chord-Eb'),'Eb'); 
     1826        jtab.render($('#offscreen-jtab-chord-F') ,'F'); 
     1827        jtab.render($('#offscreen-jtab-chord-Fs'),'F#'); 
     1828        jtab.render($('#offscreen-jtab-chord-Gb'),'Gb'); 
     1829        jtab.render($('#offscreen-jtab-chord-G') ,'G'); 
     1830        jtab.render($('#offscreen-jtab-chord-Gs'),'G#'); 
     1831        jtab.render($('#offscreen-jtab-chord-Ab'),'Ab'); 
     1832        jtab.render($('#offscreen-jtab-chord-A') ,'A'); 
     1833        jtab.render($('#offscreen-jtab-chord-As'),'A#'); 
     1834        jtab.render($('#offscreen-jtab-chord-Bb'),'Bb'); 
     1835        jtab.render($('#offscreen-jtab-chord-B') ,'B'); 
     1836 
     1837        $('#scaled-mytab').append($('#offscreen-jtab-chord-lineup')); 
     1838 
     1839      }); 
     1840    </gsf:script> 
     1841      </div> 
     1842 
    16611843    <div style="clear: both;"><xsl:comment>clear floats</xsl:comment></div> 
    1662  
    16631844 
    16641845    </div>