Changeset 29877

Timestamp:

2015-05-14T13:56:53+12:00 (9 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:

• etc/collectionConfig.xml (modified) (1 diff)
• js/audiosynth.view.js (modified) (2 diffs)
• js/media-player.js (modified) (11 diffs)
• js/respool-midi.js (modified) (1 diff)
• style/images/guitar-plate-med.png (added)
• style/media-player.css (modified) (1 diff)
• transform/pages/document.xsl (modified) (13 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/etc/collectionConfig.xml

@@ -345 +345 @@
                 <gsf:script src="{$httpCollection}/js/jquery-drums.js" />
 
+                <gsf:style  src="{$httpCollection}/style/jam-guitar.css" />             
+                <gsf:script src="{$httpCollection}/js/jam-guitar.js"/>
+
 
                                 <!-- MIDI.js library -->

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/audiosynth.view.js

@@ -378 +378 @@
 
         mediaPlayedNotes[String(mediaStartPlayTime)].push( 
-        { 'midiPitch': playedMidiPitch, 
+        { 'midiPitch'   : playedMidiPitch, 
           'midiNoteOn'  : relativePlayedNoteStartTime,
           'midiNoteOff' : relativePlayedNoteEndTime,
-          'duration': playedDuration,
+          'duration    ': playedDuration,
           'humanReadble': playedNotePitch }
         );
@@ -402 +402 @@
 
             MIDI.noteOff(0, playedMidiPitch, 0);
-            calcMidiNoteInfo();
+            if (mediaPlaybackMode == "record") {
+            calcMidiNoteInfo();
+            }
 
             visualKeyboard[keyboard[e.keyCode]].style.backgroundColor = '';

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/media-player.js

@@ -1 @@
-// Sample Media Player using HTML5's Media API
+"use strict";
+
+// Based on: 
+//   Sample Media Player using HTML5's Media API
 // 
 // Ian Devlin (c) 2012
@@ -16 +19 @@
 var progressBar;
 
+var mediaPlaybackMode = null;
+
 var mediaStartPlayTime;
 var mediaStartPauseTime;
 var mediaPlayedNotes;
 
+var recordedNotesArray = null;
+
 function initialiseMediaPlayer() {
+
+    setPlaybackMode();
 
     mediaStartPlayTime  = null;
@@ -54 +63 @@
     });
 
-    // Add a listener for the play and pause events so the buttons state can be updated
-    mediaPlayer.addEventListener('play', function() {
-        // Change the button to be a pause button
-        changeButtonType(playPauseBtn, 'buttonx2 pause');
-    }, false);
-    mediaPlayer.addEventListener('pause', function() {
-        // Change the button to be a play button
-        changeButtonType(playPauseBtn, 'buttonx2 play');
-    }, false);
+    // Add a listener for the play and pause events so the buttons state can be updated
+    mediaPlayer.addEventListener('play', function() {
+    // Change the button to be a pause button
+    changeButtonType(playPauseBtn, 'buttonx2 pause');
+    }, false);
+    mediaPlayer.addEventListener('pause', function() {
+    // Change the button to be a play button
+    changeButtonType(playPauseBtn, 'buttonx2 play');
+    }, false);
     
-    // need to work on this one more...how to know it's muted?
-    mediaPlayer.addEventListener('volumechange', function(e) { 
-        // Update the button to be mute/unmute
-        if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
-        else changeButtonType(muteBtn, 'button mute');
-    }, false);  
-    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
+    // need to work on this one more...how to know it's muted?
+    mediaPlayer.addEventListener('volumechange', function(e) { 
+    // Update the button to be mute/unmute
+    if (mediaPlayer.muted) changeButtonType(muteBtn, 'button unmute');
+    else changeButtonType(muteBtn, 'button mute');
+    }, false);  
+
+    mediaPlayer.addEventListener('ended', stopPlayer, false);   
 }
 
 function togglePlayPause() {
-    // If the mediaPlayer is currently paused or has ended
+    // If the mediaPlayer is currently paused or has ended
+    console.log("togglePlayPause()");
+    //console.log("*** mediaPlayer (paused,ended): (" + mediaPlayer.paused + "," + mediaPlayer.ended + ")");
+    //console.log("*** currentTime = " + mediaPlayer.currentTime);
+
     if (mediaPlayer.paused || mediaPlayer.ended) {
         if (mediaStartPlayTime == null) {
+        // Fresh play start
+        console.log("**** mediaPlaybackMode = " + mediaPlaybackMode);
+
             mediaStartPlayTime = Date.now();
         //console.log("*** mediaStartPlayTime=" + mediaStartPlayTime);
@@ -83 +100 @@
         }
         else {
+        // Resume playing
         var mediaPauseBuildup = mediaStartPauseTime - Date.now();
 
@@ -98 +116 @@
     // Otherwise it must currently be playing
     else {
-        mediaPauseTime = Date.now();
+        // put into pause state
+
+        mediaStartPauseTime = Date.now();
 
         // Change the button to be a play button
@@ -109 +129 @@
 }
 
-function pad(n, width, z) {
+function _pad(n, width, z) {
   z = z || '0';
   n = n + '';
@@ -118 +138 @@
 {
     var int_mins = Math.floor(time / 60);   
-
     var float_secs = time % 60;
-    //var int_secs = Math.floor(float_secs); 
-    
-    //var float_sub_sec = float_secs - int_secs;
-    //var int_sub_sec = float_sub_sec.toFixed(2)
-
-    var padded_secs = pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
+
+    var padded_secs = _pad(float_secs.toFixed(1),4); // (2), 5 for 2 dec place
     return int_mins + ":" + padded_secs
 }
@@ -145 +160 @@
 
 // Stop the current media from playing, and return it to the start position
+
 function stopPlayer() 
 {
+    console.log("stopPlayer()");
     mediaPlayer.pause();
+
+    if (mediaPlaybackMode == "record") {
+    recordedNotesArray = mediaPlayedNotes[String(mediaStartPlayTime)];
+    if (recordedNotesArray.length>0) {
+        // non-trival data recorded
+        $('#save-recording-popup').dialog('open');
+    }
+    }
+
+    mediaStartPlayTime = null;
+    mediaStartPauseTime = null;
+
     mediaPlayer.currentTime = 0;
     displayCurrentTime();
+
 }
 
@@ -180 +210 @@
     mediaPlayer.play();
 }
+
+
+
 
 // Update the progress bar
@@ -235 +268 @@
 }
 
+
 // Resets the media player
 function resetPlayer() {
@@ -246 +280 @@
     displayCurrentTime();
     // Ensure that the play pause button is set as 'play'
-    changeButtonType(playPauseBtn, 'play');
-}
+    changeButtonType(playPauseBtn, 'buttonx2 play');
+}
+
+
+function setPlaybackMode() 
+{
+    //console.log("setPlaybackMode()");
+    mediaPlaybackMode = $('input[name=mpm-radio]:checked', '#mpmForm').val();
+}
+
+
+
+function saveRecording()
+{
+    var valid = true;
+
+    var $save_name_input = $("#save-recording-name");
+    var save_name = $save_name_input.val();
+    
+    if (save_name.match(/^\s*$/)) {
+    valid = false;
+    $save_name_input.addClass( "ui-state-error" );
+    }
+    else {
+    console.log("**** Saving under name '" + save_name +"': " + JSON.stringify(recordedNotesArray));
+
+    var $dialog = $('#save-recording-popup');
+
+    $dialog.dialog( "close" );
+    }
+
+    return valid;
+}
+
+
+$(document).ready(function() {
+    // Setup dialog
+
+    var dialog = $('#save-recording-popup').dialog({
+    width : 500,
+    height: 350,
+    autoOpen: false, // Do not open on page load
+    modal: true,     // Freeze the background behind the overlay
+
+    show: {
+            effect: "blind",
+            duration: 1000
+    },
+    hide: {
+            effect: "blind",
+            duration: 500
+    },
+
+    buttons: {
+            "Save Recording": saveRecording,
+            Cancel: function() {
+        dialog.dialog("close");
+            }
+    },
+    close: function() {
+            form[0].reset();
+            $( "#save-recording-name" ).removeClass( "ui-state-error" );
+    }
+    });
+
+    var form = dialog.find( "form" ).on( "submit", function( event ) {
+    event.preventDefault();
+    });
+ 
+
+});
+

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/respool-midi.js

@@ -151 +151 @@
 
 //var instrument_name = "lead 1 (square)";
-var instrument_name = "lead 2 (sawtooth)";
+//var instrument_name = "lead 2 (sawtooth)";
+//var instrument_name = "acoustic grand piano";
+//var instrument_name = "distortion guitar";
+var instrument_name = "overdriven guitar";
 
 window.onload = function () {

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/style/media-player.css

@@ -105 +105 @@
 
 
-
-
+.ui-widget-overlay {
+    height: 100%;
+    width: 100%;
+    opacity: 0.2;
+    filter: Alpha(Opacity=20);
+    background-color: black;
+}

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

@@ -1381 +1381 @@
     <div class="playlist-bar">
       <div id="playlist-titlebar" style="background-image: none; background-color: #2E52A4; width: 97%; float: left; margin-bottom: 10px;">
-    Controls
+    Layer Controls: Create, Edit, View
       </div>
 
@@ -1398 +1398 @@
     </div>
 -->
+
+         <div id="save-recording-popup" title="Save Recording">
+       <p>Do you want to name and save this recording?</p>
+ 
+       <form>
+         <fieldset>
+           <label for="name">Name</label>
+           <input type="text" name="save-recording-name" id="save-recording-name" value="My Recording" class="text ui-widget-content ui-corner-all"/>
+           
+           <!-- Allow form submission with keyboard without duplicating the dialog button -->
+           <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"/>
+         </fieldset>
+       </form>
+     </div>
+
           <div style="color: white;">
 
-        <form style="width:99%;">
+        <form id="mpmForm" style="width:99%;">
           <fieldset>
         <legend id="mpm-legend">Video Player Mode</legend>
@@ -1408 +1423 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-record" name="mpm-radio" />
+              <input type="radio" id="mpm-record" name="mpm-radio" onchange="setPlaybackMode()" value="record"/>
             </span>
             <label for="mpm-record" class="radio-label">
@@ -1419 +1434 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-neutral" name="mpm-radio" checked="checked"/>
+              <input type="radio" id="mpm-neutral" name="mpm-radio" onchange="setPlaybackMode()" value="neutral" checked="checked"/>
             </span>
             <label for="mpm-neutral" class="radio-label">
@@ -1430 +1445 @@
           <div class="radio-label-combo" style="display:inline-block; width: 32%">
             <span>
-              <input type="radio" id="mpm-game-on" name="mpm-radio" />
+              <input type="radio" id="mpm-game-on" name="mpm-radio" onchange="setPlaybackMode()" value="overlay"/>
             </span>
             <label for="mpm-game-on" class="radio-label">
@@ -1443 +1458 @@
         </form>
 
-        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px; background: black">
+        <form style="width: 99%; margin-top: 10px; margin-bottom: 10px;">
           <fieldset>
         <legend id="mpm-legend">Popup Layers</legend>
@@ -1452 +1467 @@
         
         <div style="padding: 8px;">
-          <button id="mpm-merge-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+          <button id="mpm-merge-overlay" 
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
             Merge Selected
           </button>
-          <button id="mpm-split-overlay" style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
+          <button id="mpm-split-overlay" 
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center; margin-right: 8px;">
             Split Selected
           </button>
-          <button id="mpm-edit-overlay"  style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
+          <button id="mpm-edit-overlay"  
+              classXX="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
+              style="background-color:#2E52A4; color:white; width:32%; text-align: center;">
           Edit Selected
           </button>
@@ -1561 +1582 @@
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
-        font-size: 150%;
+        font-size: 110%;
         color: #888888;
         pointer-events: onone;
@@ -1571 +1592 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="202" height="204"
+          <img style="position: relative;" width="148" height="148"
                src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
           <div class="drumcontainer" style="color: #555555">
@@ -1580 +1601 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="197" height="192" 
-              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
+          <img style="position: relative;" width="148" height="144" 
+              src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
           <div class="drumcontainer" >
             &lt;Shift-B&gt;
@@ -1589 +1610 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;"  width="197" height="192" 
-               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
+          <img style="position: relative;"  width="167" height="163" 
+               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
           <div class="drumcontainer" >
             &lt;Shift-N&gt;
@@ -1605 +1626 @@
         </div>
           </div>
-          <br />
           <div style="display:inline-block;">
         <div style="position: relative;">
-          <img style="position: relative;" width="240" height="234" 
+          <img style="position: relative;" width="216" height="211" 
                src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
           <div class="drumcontainer" >
@@ -1623 +1643 @@
     <div id="guitar-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
           <div style="color: white;">
-        Guitar area
+        <div id="jamWrapper">
+          <div id="jamStage">
+        <xsl:comment><!--jamStage--></xsl:comment>
+          </div>
+          <div id="jamPlate">
+        <xsl:comment><!--jamPlate--></xsl:comment>
+          </div>
+          <canvas id="jamStrings" width="750px" height="200px">
+        Your browser does not support the Canvas element
+          </canvas>
+        </div>
       </div>
     </div>