annotate core.js @ 996:902f22e182f6

Fixed Bug 1204: Multiple clicks creates multiple instances.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Fri, 01 May 2015 16:07:15 +0100
parents f378fb8286ae
children ffeef0ac7a5f
rev   line source
nicholas@1 1 /**
nicholas@1 2 * core.js
nicholas@1 3 *
nicholas@1 4 * Main script to run, calls all other core functions and manages loading/store to backend.
nicholas@1 5 * Also contains all global variables.
nicholas@1 6 */
nicholas@1 7
nicholas@1 8 /* create the web audio API context and store in audioContext*/
n@657 9 var audioContext; // Hold the browser web audio API
n@657 10 var projectXML; // Hold the parsed setup XML
n@662 11
n@668 12 var testXMLSetups = []; // Hold the parsed test instances
n@668 13 var testResultsHolders =[]; // Hold the results from each test for publishing to XML
n@669 14 var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order
n@670 15 var currentTestHolder; // Hold any intermediate results during test - metrics
n@657 16 var audioEngineContext; // The custome AudioEngine object
n@657 17 var projectReturn; // Hold the URL for the return
n@657 18 var preTestQuestions = document.createElement('PreTest'); // Store any pre-test question response
n@657 19 var postTestQuestions = document.createElement('PostTest'); // Store any post-test question response
n@656 20
n@681 21 // Add a prototype to the bufferSourceNode to reference to the audioObject holding it
n@681 22 AudioBufferSourceNode.prototype.owner = undefined;
nicholas@1 23
nicholas@1 24 window.onload = function() {
nicholas@1 25 // Function called once the browser has loaded all files.
nicholas@1 26 // This should perform any initial commands such as structure / loading documents
nicholas@1 27
nicholas@1 28 // Create a web audio API context
nicholas@705 29 // Fixed for cross-browser support
nicholas@705 30 var AudioContext = window.AudioContext || window.webkitAudioContext;
nicholas@7 31 audioContext = new AudioContext;
nicholas@1 32
nicholas@1 33 // Create the audio engine object
nicholas@1 34 audioEngineContext = new AudioEngine();
n@701 35 };
nicholas@1 36
nicholas@1 37 function loadProjectSpec(url) {
nicholas@1 38 // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data
nicholas@1 39 // If url is null, request client to upload project XML document
nicholas@2 40 var r = new XMLHttpRequest();
nicholas@2 41 r.open('GET',url,true);
nicholas@2 42 r.onload = function() {
nicholas@2 43 loadProjectSpecCallback(r.response);
n@701 44 };
nicholas@2 45 r.send();
n@701 46 };
nicholas@2 47
nicholas@2 48 function loadProjectSpecCallback(response) {
nicholas@2 49 // Function called after asynchronous download of XML project specification
nicholas@2 50 var decode = $.parseXML(response);
nicholas@2 51 projectXML = $(decode);
nicholas@2 52
nicholas@2 53 // Now extract the setup tag
nicholas@2 54 var xmlSetup = projectXML.find('setup');
n@701 55 // Detect the interface to use and load the relevant javascripts.
nicholas@2 56 var interfaceType = xmlSetup[0].attributes['interface'];
nicholas@2 57 var interfaceJS = document.createElement('script');
nicholas@2 58 interfaceJS.setAttribute("type","text/javascript");
nicholas@2 59 if (interfaceType.value == 'APE') {
nicholas@2 60 interfaceJS.setAttribute("src","ape.js");
n@657 61
n@657 62 // APE comes with a css file
n@657 63 var css = document.createElement('link');
n@657 64 css.rel = 'stylesheet';
n@657 65 css.type = 'text/css';
n@657 66 css.href = 'ape.css';
n@657 67
n@657 68 document.getElementsByTagName("head")[0].appendChild(css);
nicholas@2 69 }
nicholas@2 70 document.getElementsByTagName("head")[0].appendChild(interfaceJS);
nicholas@1 71 }
nicholas@1 72
nicholas@1 73 function createProjectSave(destURL) {
nicholas@1 74 // Save the data from interface into XML and send to destURL
nicholas@1 75 // If destURL is null then download XML in client
nicholas@7 76 // Now time to render file locally
nicholas@7 77 var xmlDoc = interfaceXMLSave();
nicholas@7 78 if (destURL == "null" || destURL == undefined) {
nicholas@7 79 var parent = document.createElement("div");
nicholas@7 80 parent.appendChild(xmlDoc);
nicholas@7 81 var file = [parent.innerHTML];
nicholas@7 82 var bb = new Blob(file,{type : 'application/xml'});
nicholas@7 83 var dnlk = window.URL.createObjectURL(bb);
nicholas@7 84 var a = document.createElement("a");
nicholas@7 85 a.hidden = '';
nicholas@7 86 a.href = dnlk;
nicholas@7 87 a.download = "save.xml";
nicholas@7 88 a.textContent = "Save File";
nicholas@7 89
nicholas@7 90 var submitDiv = document.getElementById('download-point');
nicholas@7 91 submitDiv.appendChild(a);
nicholas@7 92 }
n@667 93 return submitDiv;
nicholas@1 94 }
nicholas@1 95
nicholas@1 96 function AudioEngine() {
nicholas@1 97
nicholas@1 98 // Create two output paths, the main outputGain and fooGain.
nicholas@1 99 // Output gain is default to 1 and any items for playback route here
nicholas@1 100 // Foo gain is used for analysis to ensure paths get processed, but are not heard
nicholas@1 101 // because web audio will optimise and any route which does not go to the destination gets ignored.
nicholas@1 102 this.outputGain = audioContext.createGain();
nicholas@1 103 this.fooGain = audioContext.createGain();
nicholas@1 104 this.fooGain.gain = 0;
nicholas@1 105
nicholas@7 106 // Use this to detect playback state: 0 - stopped, 1 - playing
nicholas@7 107 this.status = 0;
nicholas@7 108
nicholas@1 109 // Connect both gains to output
nicholas@1 110 this.outputGain.connect(audioContext.destination);
nicholas@1 111 this.fooGain.connect(audioContext.destination);
nicholas@1 112
n@673 113 // Create the timer Object
n@673 114 this.timer = new timer();
n@673 115 // Create session metrics
n@673 116 this.metric = new sessionMetrics(this);
n@673 117
n@681 118 this.loopPlayback = false;
n@681 119
nicholas@1 120 // Create store for new audioObjects
nicholas@1 121 this.audioObjects = [];
nicholas@1 122
n@681 123 this.play = function(){};
nicholas@1 124
n@681 125 this.stop = function(){};
nicholas@8 126
nicholas@8 127
nicholas@1 128 this.newTrack = function(url) {
nicholas@1 129 // Pull data from given URL into new audio buffer
nicholas@1 130 // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin'
nicholas@7 131
nicholas@1 132 // Create the audioObject with ID of the new track length;
n@673 133 audioObjectId = this.audioObjects.length;
nicholas@1 134 this.audioObjects[audioObjectId] = new audioObject(audioObjectId);
nicholas@7 135
nicholas@7 136 // AudioObject will get track itself.
nicholas@7 137 this.audioObjects[audioObjectId].constructTrack(url);
n@701 138 };
nicholas@1 139
nicholas@1 140 }
nicholas@1 141
nicholas@1 142 function audioObject(id) {
nicholas@1 143 // The main buffer object with common control nodes to the AudioEngine
nicholas@1 144
nicholas@1 145 this.id = id;
nicholas@1 146 this.state = 0; // 0 - no data, 1 - ready
n@708 147 this.url = null; // Hold the URL given for the output back to the results.
n@673 148 this.metric = new metricTracker();
nicholas@1 149
nicholas@1 150 // Create a buffer and external gain control to allow internal patching of effects and volume leveling.
n@681 151 this.bufferNode = undefined;
nicholas@1 152 this.outputGain = audioContext.createGain();
nicholas@1 153
nicholas@8 154 // Default output gain to be zero
nicholas@8 155 this.outputGain.gain.value = 0.0;
nicholas@8 156
nicholas@1 157 // Connect buffer to the audio graph
nicholas@1 158 this.outputGain.connect(audioEngineContext.outputGain);
nicholas@1 159
nicholas@1 160 // the audiobuffer is not designed for multi-start playback
nicholas@1 161 // When stopeed, the buffer node is deleted and recreated with the stored buffer.
nicholas@1 162 this.buffer;
nicholas@1 163
nicholas@1 164 this.play = function(startTime) {
n@681 165 this.bufferNode = audioContext.createBufferSource();
n@681 166 this.bufferNode.connect(this.outputGain);
n@681 167 this.bufferNode.buffer = this.buffer;
n@681 168 this.bufferNode.loop = audioEngineContext.loopPlayback;
nicholas@1 169 this.bufferNode.start(startTime);
n@701 170 };
nicholas@1 171
nicholas@1 172 this.stop = function() {
n@996 173 if (this.bufferNode != undefined)
n@996 174 {
n@996 175 this.bufferNode.stop(0);
n@996 176 this.bufferNode = undefined;
n@996 177 }
n@701 178 };
nicholas@8 179
nicholas@7 180 this.constructTrack = function(url) {
nicholas@7 181 var request = new XMLHttpRequest();
n@708 182 this.url = url;
nicholas@7 183 request.open('GET',url,true);
nicholas@7 184 request.responseType = 'arraybuffer';
nicholas@7 185
nicholas@7 186 var audioObj = this;
nicholas@7 187
nicholas@7 188 // Create callback to decode the data asynchronously
nicholas@7 189 request.onloadend = function() {
nicholas@7 190 audioContext.decodeAudioData(request.response, function(decodedData) {
nicholas@7 191 audioObj.buffer = decodedData;
nicholas@7 192 audioObj.state = 1;
nicholas@7 193 }, function(){
nicholas@7 194 // Should only be called if there was an error, but sometimes gets called continuously
nicholas@7 195 // Check here if the error is genuine
nicholas@7 196 if (audioObj.state == 0 || audioObj.buffer == undefined) {
nicholas@7 197 // Genuine error
nicholas@7 198 console.log('FATAL - Error loading buffer on '+audioObj.id);
nicholas@7 199 }
nicholas@7 200 });
n@701 201 };
nicholas@7 202 request.send();
n@701 203 };
nicholas@7 204
n@673 205 }
n@673 206
n@673 207 function timer()
n@673 208 {
n@673 209 /* Timer object used in audioEngine to keep track of session timings
n@673 210 * Uses the timer of the web audio API, so sample resolution
n@673 211 */
n@673 212 this.testStarted = false;
n@673 213 this.testStartTime = 0;
n@673 214 this.testDuration = 0;
n@673 215 this.minimumTestTime = 0; // No minimum test time
n@673 216 this.startTest = function()
n@673 217 {
n@673 218 if (this.testStarted == false)
n@673 219 {
n@673 220 this.testStartTime = audioContext.currentTime;
n@673 221 this.testStarted = true;
n@673 222 this.updateTestTime();
n@676 223 audioEngineContext.metric.initialiseTest();
n@673 224 }
n@673 225 };
n@673 226 this.stopTest = function()
n@673 227 {
n@673 228 if (this.testStarted)
n@673 229 {
n@673 230 this.testDuration = this.getTestTime();
n@673 231 this.testStarted = false;
n@673 232 } else {
n@673 233 console.log('ERR: Test tried to end before beginning');
n@673 234 }
n@673 235 };
n@673 236 this.updateTestTime = function()
n@673 237 {
n@673 238 if (this.testStarted)
n@673 239 {
n@673 240 this.testDuration = audioContext.currentTime - this.testStartTime;
n@673 241 }
n@673 242 };
n@673 243 this.getTestTime = function()
n@673 244 {
n@673 245 this.updateTestTime();
n@673 246 return this.testDuration;
n@673 247 };
n@673 248 }
n@673 249
n@673 250 function sessionMetrics(engine)
n@673 251 {
n@673 252 /* Used by audioEngine to link to audioObjects to minimise the timer call timers;
n@673 253 */
n@673 254 this.engine = engine;
n@673 255 this.lastClicked = -1;
n@673 256 this.data = -1;
n@676 257 this.initialiseTest = function(){};
n@673 258 }
n@673 259
n@673 260 function metricTracker()
n@673 261 {
n@673 262 /* Custom object to track and collect metric data
n@673 263 * Used only inside the audioObjects object.
n@673 264 */
n@673 265
n@673 266 this.listenedTimer = 0;
n@673 267 this.listenStart = 0;
n@675 268 this.initialPosition = -1;
n@673 269 this.movementTracker = [];
n@673 270 this.wasListenedTo = false;
n@673 271 this.wasMoved = false;
n@673 272 this.hasComments = false;
n@673 273
n@673 274 this.initialised = function(position)
n@673 275 {
n@675 276 if (this.initialPosition == -1) {
n@675 277 this.initialPosition = position;
n@675 278 }
n@673 279 };
n@673 280
n@673 281 this.moved = function(time,position)
n@673 282 {
n@673 283 this.wasMoved = true;
n@673 284 this.movementTracker[this.movementTracker.length] = [time, position];
n@673 285 };
n@673 286
n@673 287 this.listening = function(time)
n@673 288 {
n@673 289 if (this.listenStart == 0)
n@673 290 {
n@673 291 this.wasListenedTo = true;
n@673 292 this.listenStart = time;
n@673 293 } else {
n@673 294 this.listenedTimer += (time - this.listenStart);
n@673 295 this.listenStart = 0;
n@673 296 }
n@673 297 };
n@678 298 }
n@678 299
n@678 300 function randomiseOrder(input)
n@678 301 {
n@678 302 // This takes an array of information and randomises the order
n@678 303 var N = input.length;
n@678 304 var K = N;
n@678 305 var holdArr = [];
n@678 306 for (var n=0; n<N; n++)
n@678 307 {
n@678 308 // First pick a random number
n@678 309 var r = Math.random();
n@678 310 // Multiply and floor by the number of elements left
n@678 311 r = Math.floor(r*input.length);
n@678 312 // Pick out that element and delete from the array
n@678 313 holdArr.push(input.splice(r,1)[0]);
n@678 314 }
n@678 315 return holdArr;
nicholas@7 316 }