Ignore:
Timestamp:
2015-05-15T11:43:06+12:00 (9 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 edited

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>
Note: See TracChangeset for help on using the changeset viewer.