Changeset 29877

Show
Ignore:
Timestamp:
14.05.2015 13:56:53 (4 years ago)
Author:
davidb
Message:

Work developing a guitar to play, and recording notes on piano when played (with the radio button set to record)

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

Legend:

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

    r29873 r29877  
    345345                <gsf:script src="{$httpCollection}/js/jquery-drums.js" /> 
    346346 
     347                <gsf:style  src="{$httpCollection}/style/jam-guitar.css" />              
     348                <gsf:script src="{$httpCollection}/js/jam-guitar.js"/> 
     349 
    347350 
    348351                                <!-- MIDI.js library --> 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

    r29867 r29877  
    378378 
    379379        mediaPlayedNotes[String(mediaStartPlayTime)].push(  
    380         { 'midiPitch': playedMidiPitch,  
     380        { 'midiPitch'   : playedMidiPitch,  
    381381          'midiNoteOn'  : relativePlayedNoteStartTime, 
    382382          'midiNoteOff' : relativePlayedNoteEndTime, 
    383           'duration': playedDuration, 
     383          'duration    ': playedDuration, 
    384384          'humanReadble': playedNotePitch } 
    385385        ); 
     
    402402 
    403403            MIDI.noteOff(0, playedMidiPitch, 0); 
    404             calcMidiNoteInfo(); 
     404            if (mediaPlaybackMode == "record") { 
     405            calcMidiNoteInfo(); 
     406            } 
    405407 
    406408            visualKeyboard[keyboard[e.keyCode]].style.backgroundColor = ''; 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

    r29867 r29877  
    1 // Sample Media Player using HTML5's Media API 
     1"use strict"; 
     2 
     3// Based on:  
     4//   Sample Media Player using HTML5's Media API 
    25//  
    36// Ian Devlin (c) 2012 
     
    1619var progressBar; 
    1720 
     21var mediaPlaybackMode = null; 
     22 
    1823var mediaStartPlayTime; 
    1924var mediaStartPauseTime; 
    2025var mediaPlayedNotes; 
    2126 
     27var recordedNotesArray = null; 
     28 
    2229function initialiseMediaPlayer() { 
     30 
     31    setPlaybackMode(); 
    2332 
    2433    mediaStartPlayTime  = null; 
     
    5463    }); 
    5564 
    56     // Add a listener for the play and pause events so the buttons state can be updated 
    57     mediaPlayer.addEventListener('play', function() { 
    58         // Change the button to be a pause button 
    59         changeButtonType(playPauseBtn, 'buttonx2 pause'); 
    60     }, false); 
    61     mediaPlayer.addEventListener('pause', function() { 
    62         // Change the button to be a play button 
    63         changeButtonType(playPauseBtn, 'buttonx2 play'); 
    64     }, false); 
     65    // Add a listener for the play and pause events so the buttons state can be updated 
     66    mediaPlayer.addEventListener('play', function() { 
     67    // Change the button to be a pause button 
     68    changeButtonType(playPauseBtn, 'buttonx2 pause'); 
     69    }, false); 
     70    mediaPlayer.addEventListener('pause', function() { 
     71    // Change the button to be a play button 
     72    changeButtonType(playPauseBtn, 'buttonx2 play'); 
     73    }, false); 
    6574     
    66     // need to work on this one more...how to know it's muted? 
    67     mediaPlayer.addEventListener('volumechange', function(e) {  
    68         // Update the button to be mute/unmute 
    69         if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute'); 
    70         else changeButtonType(muteBtn, 'button mute'); 
    71     }, false);   
    72     mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);  
     75    // need to work on this one more...how to know it's muted? 
     76    mediaPlayer.addEventListener('volumechange', function(e) {  
     77    // Update the button to be mute/unmute 
     78    if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute'); 
     79    else changeButtonType(muteBtn, 'button mute'); 
     80    }, false);   
     81 
     82    mediaPlayer.addEventListener('ended', stopPlayer, false);    
    7383} 
    7484 
    7585function togglePlayPause() { 
    76     // If the mediaPlayer is currently paused or has ended 
     86    // If the mediaPlayer is currently paused or has ended 
     87    console.log("togglePlayPause()"); 
     88    //console.log("*** mediaPlayer (paused,ended): (" + mediaPlayer.paused + "," + mediaPlayer.ended + ")"); 
     89    //console.log("*** currentTime = " + mediaPlayer.currentTime); 
     90 
    7791    if (mediaPlayer.paused || mediaPlayer.ended) { 
    7892        if (mediaStartPlayTime == null) { 
     93        // Fresh play start 
     94        console.log("**** mediaPlaybackMode = " + mediaPlaybackMode); 
     95 
    7996            mediaStartPlayTime = Date.now(); 
    8097        //console.log("*** mediaStartPlayTime=" + mediaStartPlayTime); 
     
    83100        } 
    84101        else { 
     102        // Resume playing 
    85103        var mediaPauseBuildup = mediaStartPauseTime - Date.now(); 
    86104 
     
    98116    // Otherwise it must currently be playing 
    99117    else { 
    100         mediaPauseTime = Date.now(); 
     118        // put into pause state 
     119 
     120        mediaStartPauseTime = Date.now(); 
    101121 
    102122        // Change the button to be a play button 
     
    109129} 
    110130 
    111 function pad(n, width, z) { 
     131function _pad(n, width, z) { 
    112132  z = z || '0'; 
    113133  n = n + ''; 
     
    118138{ 
    119139    var int_mins = Math.floor(time / 60);    
    120  
    121140    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 
     141 
     142    var padded_secs = _pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place 
    128143    return int_mins + ":" + padded_secs 
    129144} 
     
    145160 
    146161// Stop the current media from playing, and return it to the start position 
     162 
    147163function stopPlayer()  
    148164{ 
     165    console.log("stopPlayer()"); 
    149166    mediaPlayer.pause(); 
     167 
     168    if (mediaPlaybackMode == "record") { 
     169    recordedNotesArray = mediaPlayedNotes[String(mediaStartPlayTime)]; 
     170    if (recordedNotesArray.length>0) { 
     171        // non-trival data recorded 
     172        $('#save-recording-popup').dialog('open'); 
     173    } 
     174    } 
     175 
     176    mediaStartPlayTime = null; 
     177    mediaStartPauseTime = null; 
     178 
    150179    mediaPlayer.currentTime = 0; 
    151180    displayCurrentTime(); 
     181 
    152182} 
    153183 
     
    180210    mediaPlayer.play(); 
    181211} 
     212 
     213 
     214 
    182215 
    183216// Update the progress bar 
     
    235268} 
    236269 
     270 
    237271// Resets the media player 
    238272function resetPlayer() { 
     
    246280    displayCurrentTime(); 
    247281    // Ensure that the play pause button is set as 'play' 
    248     changeButtonType(playPauseBtn, 'play'); 
    249 } 
     282    changeButtonType(playPauseBtn, 'buttonx2 play'); 
     283} 
     284 
     285 
     286function setPlaybackMode()  
     287{ 
     288    //console.log("setPlaybackMode()"); 
     289    mediaPlaybackMode = $('input[name=mpm-radio]:checked', '#mpmForm').val(); 
     290} 
     291 
     292 
     293 
     294function saveRecording() 
     295{ 
     296    var valid = true; 
     297 
     298    var $save_name_input = $("#save-recording-name"); 
     299    var save_name = $save_name_input.val(); 
     300     
     301    if (save_name.match(/^\s*$/)) { 
     302    valid = false; 
     303    $save_name_input.addClass( "ui-state-error" ); 
     304    } 
     305    else { 
     306    console.log("**** Saving under name '" + save_name +"': " + JSON.stringify(recordedNotesArray)); 
     307 
     308    var $dialog = $('#save-recording-popup'); 
     309 
     310    $dialog.dialog( "close" ); 
     311    } 
     312 
     313    return valid; 
     314} 
     315 
     316 
     317$(document).ready(function() { 
     318    // Setup dialog 
     319 
     320    var dialog = $('#save-recording-popup').dialog({ 
     321    width : 500, 
     322    height: 350, 
     323    autoOpen: false, // Do not open on page load 
     324    modal: true,     // Freeze the background behind the overlay 
     325 
     326    show: { 
     327            effect: "blind", 
     328            duration: 1000 
     329    }, 
     330    hide: { 
     331            effect: "blind", 
     332            duration: 500 
     333    }, 
     334 
     335    buttons: { 
     336            "Save Recording": saveRecording, 
     337            Cancel: function() { 
     338        dialog.dialog("close"); 
     339            } 
     340    }, 
     341    close: function() { 
     342            form[0].reset(); 
     343            $( "#save-recording-name" ).removeClass( "ui-state-error" ); 
     344    } 
     345    }); 
     346 
     347    var form = dialog.find( "form" ).on( "submit", function( event ) { 
     348    event.preventDefault(); 
     349    }); 
     350  
     351 
     352}); 
     353 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js

    r29863 r29877  
    151151 
    152152//var instrument_name = "lead 1 (square)"; 
    153 var instrument_name = "lead 2 (sawtooth)"; 
     153//var instrument_name = "lead 2 (sawtooth)"; 
     154//var instrument_name = "acoustic grand piano"; 
     155//var instrument_name = "distortion guitar"; 
     156var instrument_name = "overdriven guitar"; 
    154157 
    155158window.onload = function () { 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css

    r29867 r29877  
    105105 
    106106 
    107  
    108  
     107.ui-widget-overlay { 
     108    height: 100%; 
     109    width: 100%; 
     110    opacity: 0.2; 
     111    filter: Alpha(Opacity=20); 
     112    background-color: black; 
     113} 
  • main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

    r29874 r29877  
    13811381    <div class="playlist-bar"> 
    13821382      <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;"> 
    1383     Controls 
     1383    Layer Controls: Create, Edit, View 
    13841384      </div> 
    13851385 
     
    13981398    </div> 
    13991399--> 
     1400 
     1401         <div id="save-recording-popup" title="Save Recording"> 
     1402       <p>Do you want to name and save this recording?</p> 
     1403  
     1404       <form> 
     1405         <fieldset> 
     1406           <label for="name">Name</label> 
     1407           <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/> 
     1408            
     1409           <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     1410           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/> 
     1411         </fieldset> 
     1412       </form> 
     1413     </div> 
     1414 
    14001415          <div style="color: white;"> 
    14011416 
    1402         <form style="width:99%;"> 
     1417        <form id="mpmForm" style="width:99%;"> 
    14031418          <fieldset> 
    14041419        <legend id="mpm-legend">Video Player Mode</legend> 
     
    14081423          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    14091424            <span> 
    1410               <input type="radio" id="mpm-record" name="mpm-radio" /> 
     1425              <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/> 
    14111426            </span> 
    14121427            <label for="mpm-record" class="radio-label"> 
     
    14191434          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    14201435            <span> 
    1421               <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/> 
     1436              <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/> 
    14221437            </span> 
    14231438            <label for="mpm-neutral" class="radio-label"> 
     
    14301445          <div class="radio-label-combo" style="display:inline-block; width: 32%"> 
    14311446            <span> 
    1432               <input type="radio" id="mpm-game-on" name="mpm-radio" /> 
     1447              <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/> 
    14331448            </span> 
    14341449            <label for="mpm-game-on" class="radio-label"> 
     
    14431458        </form> 
    14441459 
    1445         <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black"> 
     1460        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;"> 
    14461461          <fieldset> 
    14471462        <legend id="mpm-legend">Popup Layers</legend> 
     
    14521467         
    14531468        <div style="padding: 8px;"> 
    1454           <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1469          <button id="mpm-merge-overlay"  
     1470              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;"> 
    14551472            Merge Selected 
    14561473          </button> 
    1457           <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;"> 
     1474          <button id="mpm-split-overlay"  
     1475              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;"> 
    14581477            Split Selected 
    14591478          </button> 
    1460           <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;"> 
     1479          <button id="mpm-edit-overlay"   
     1480              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;"> 
    14611482          Edit Selected 
    14621483          </button> 
     
    15611582        left: 50%; 
    15621583        transform: translateX(-50%) translateY(-50%); 
    1563         font-size: 150%; 
     1584        font-size: 110%; 
    15641585        color: #888888; 
    15651586        pointer-events: onone; 
     
    15711592          <div style="display:inline-block;"> 
    15721593        <div style="position: relative;"> 
    1573           <img style="position: relative;" width="202" height="204" 
     1594          <img style="position: relative;" width="148" height="148" 
    15741595               src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" /> 
    15751596          <div class="drumcontainer" style="color: #555555"> 
     
    15801601          <div style="display:inline-block;"> 
    15811602        <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" /> 
     1603          <img style="position: relative;" width="148" height="144"  
     1604              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" /> 
    15841605          <div class="drumcontainer" > 
    15851606            &lt;Shift-B&gt; 
     
    15891610          <div style="display:inline-block;"> 
    15901611        <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" /> 
     1612          <img style="position: relative;"  width="167" height="163"  
     1613               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" /> 
    15931614          <div class="drumcontainer" > 
    15941615            &lt;Shift-N&gt; 
     
    16051626        </div> 
    16061627          </div> 
    1607           <br /> 
    16081628          <div style="display:inline-block;"> 
    16091629        <div style="position: relative;"> 
    1610           <img style="position: relative;" width="240" height="234"  
     1630          <img style="position: relative;" width="216" height="211"  
    16111631               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" /> 
    16121632          <div class="drumcontainer" > 
     
    16231643    <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;"> 
    16241644          <div style="color: white;"> 
    1625         Guitar area 
     1645        <div id="jamWrapper"> 
     1646          <div id="jamStage"> 
     1647        <xsl:comment><!--jamStage--></xsl:comment> 
     1648          </div> 
     1649          <div id="jamPlate"> 
     1650        <xsl:comment><!--jamPlate--></xsl:comment> 
     1651          </div> 
     1652          <canvas id="jamStrings" width="750px" height="200px"> 
     1653        Your browser does not support the Canvas element 
     1654          </canvas> 
     1655        </div> 
    16261656      </div> 
    16271657    </div>