Changeset 29877


Ignore:
Timestamp:
05/14/15 13:56:53 (6 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 edited

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