annotate core.js @ 7:6a6272b06d34

Standalone version. Movable sliders with rating Comment boxes Submission to XML file TODO: Click track to listen
author Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
date Wed, 25 Mar 2015 12:48:29 +0000
parents 955d229b8a02
children a6364db4c2ea
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*/
nicholas@1 9 var audioContext;
nicholas@2 10 var projectXML;
nicholas@1 11 var audioEngineContext;
nicholas@7 12 var projectReturn;
nicholas@1 13
nicholas@1 14 window.onload = function() {
nicholas@1 15 // Function called once the browser has loaded all files.
nicholas@1 16 // This should perform any initial commands such as structure / loading documents
nicholas@1 17
nicholas@1 18 // Create a web audio API context
nicholas@1 19 // NORE: Currently this will only work with webkit browsers (Chrome/Safari)!
nicholas@7 20 audioContext = new AudioContext;
nicholas@1 21
nicholas@1 22 // Create the audio engine object
nicholas@1 23 audioEngineContext = new AudioEngine();
nicholas@1 24 }
nicholas@1 25
nicholas@1 26 function loadProjectSpec(url) {
nicholas@1 27 // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data
nicholas@1 28 // If url is null, request client to upload project XML document
nicholas@2 29 var r = new XMLHttpRequest();
nicholas@2 30 r.open('GET',url,true);
nicholas@2 31 r.onload = function() {
nicholas@2 32 loadProjectSpecCallback(r.response);
nicholas@2 33 }
nicholas@2 34 r.send();
nicholas@2 35 }
nicholas@2 36
nicholas@2 37 function loadProjectSpecCallback(response) {
nicholas@2 38 // Function called after asynchronous download of XML project specification
nicholas@2 39 var decode = $.parseXML(response);
nicholas@2 40 projectXML = $(decode);
nicholas@2 41
nicholas@2 42 // Now extract the setup tag
nicholas@2 43 var xmlSetup = projectXML.find('setup');
nicholas@2 44 var interfaceType = xmlSetup[0].attributes['interface'];
nicholas@2 45 var interfaceJS = document.createElement('script');
nicholas@2 46 interfaceJS.setAttribute("type","text/javascript");
nicholas@2 47 if (interfaceType.value == 'APE') {
nicholas@2 48 interfaceJS.setAttribute("src","ape.js");
nicholas@2 49 }
nicholas@2 50 document.getElementsByTagName("head")[0].appendChild(interfaceJS);
nicholas@1 51 }
nicholas@1 52
nicholas@1 53 function createProjectSave(destURL) {
nicholas@1 54 // Save the data from interface into XML and send to destURL
nicholas@1 55 // If destURL is null then download XML in client
nicholas@7 56 // Now time to render file locally
nicholas@7 57 var xmlDoc = interfaceXMLSave();
nicholas@7 58 if (destURL == "null" || destURL == undefined) {
nicholas@7 59 var parent = document.createElement("div");
nicholas@7 60 parent.appendChild(xmlDoc);
nicholas@7 61 var file = [parent.innerHTML];
nicholas@7 62 var bb = new Blob(file,{type : 'application/xml'});
nicholas@7 63 var dnlk = window.URL.createObjectURL(bb);
nicholas@7 64 var a = document.createElement("a");
nicholas@7 65 a.hidden = '';
nicholas@7 66 a.href = dnlk;
nicholas@7 67 a.download = "save.xml";
nicholas@7 68 a.textContent = "Save File";
nicholas@7 69
nicholas@7 70 var submitDiv = document.getElementById('download-point');
nicholas@7 71 submitDiv.appendChild(a);
nicholas@7 72 }
nicholas@1 73 }
nicholas@1 74
nicholas@1 75 function AudioEngine() {
nicholas@1 76
nicholas@1 77 // Create two output paths, the main outputGain and fooGain.
nicholas@1 78 // Output gain is default to 1 and any items for playback route here
nicholas@1 79 // Foo gain is used for analysis to ensure paths get processed, but are not heard
nicholas@1 80 // because web audio will optimise and any route which does not go to the destination gets ignored.
nicholas@1 81 this.outputGain = audioContext.createGain();
nicholas@1 82 this.fooGain = audioContext.createGain();
nicholas@1 83 this.fooGain.gain = 0;
nicholas@1 84
nicholas@7 85 // Use this to detect playback state: 0 - stopped, 1 - playing
nicholas@7 86 this.status = 0;
nicholas@7 87
nicholas@1 88 // Connect both gains to output
nicholas@1 89 this.outputGain.connect(audioContext.destination);
nicholas@1 90 this.fooGain.connect(audioContext.destination);
nicholas@1 91
nicholas@1 92 // Create store for new audioObjects
nicholas@1 93 this.audioObjects = [];
nicholas@1 94
nicholas@1 95 this.play = function() {
nicholas@1 96 // Send play command to all playback buffers for synchronised start
nicholas@1 97 // Also start timer callbacks to detect if playback has finished
nicholas@7 98 if (this.status == 0) {
nicholas@7 99 // First get current clock
nicholas@7 100 var timer = audioContext.currentTime;
nicholas@7 101 // Add 3 seconds
nicholas@7 102 timer += 3.0;
nicholas@7 103
nicholas@7 104 // Send play to all tracks
nicholas@7 105 for (var i=0; i<this.audioObjects.length; i++)
nicholas@7 106 {
nicholas@7 107 this.audioObjects[i].play(timer);
nicholas@7 108 }
nicholas@7 109 this.status = 1;
nicholas@7 110 }
nicholas@1 111 }
nicholas@1 112
nicholas@1 113 this.stop = function() {
nicholas@1 114 // Send stop and reset command to all playback buffers
nicholas@7 115 if (this.status == 1) {
nicholas@7 116 for (var i=0; i<this.audioObjects.length; i++)
nicholas@7 117 {
nicholas@7 118 this.audioObjects[i].stop();
nicholas@7 119 }
nicholas@7 120 this.status = 0;
nicholas@7 121 }
nicholas@1 122 }
nicholas@1 123
nicholas@1 124 this.newTrack = function(url) {
nicholas@1 125 // Pull data from given URL into new audio buffer
nicholas@1 126 // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin'
nicholas@7 127
nicholas@1 128 // Create the audioObject with ID of the new track length;
nicholas@1 129 audioObjectId = this.audioObjects.length
nicholas@1 130 this.audioObjects[audioObjectId] = new audioObject(audioObjectId);
nicholas@7 131
nicholas@7 132 // AudioObject will get track itself.
nicholas@7 133 this.audioObjects[audioObjectId].constructTrack(url);
nicholas@1 134 }
nicholas@1 135
nicholas@1 136 }
nicholas@1 137
nicholas@1 138 function audioObject(id) {
nicholas@1 139 // The main buffer object with common control nodes to the AudioEngine
nicholas@1 140
nicholas@1 141 this.id = id;
nicholas@1 142 this.state = 0; // 0 - no data, 1 - ready
nicholas@1 143
nicholas@1 144 // Create a buffer and external gain control to allow internal patching of effects and volume leveling.
nicholas@1 145 this.bufferNode = audioContext.createBufferSource();
nicholas@1 146 this.outputGain = audioContext.createGain();
nicholas@1 147
nicholas@1 148 // Connect buffer to the audio graph
nicholas@1 149 this.bufferNode.connect(this.outputGain);
nicholas@1 150 this.outputGain.connect(audioEngineContext.outputGain);
nicholas@1 151
nicholas@1 152 // the audiobuffer is not designed for multi-start playback
nicholas@1 153 // When stopeed, the buffer node is deleted and recreated with the stored buffer.
nicholas@1 154 this.buffer;
nicholas@1 155
nicholas@1 156 this.play = function(startTime) {
nicholas@1 157 this.bufferNode.start(startTime);
nicholas@1 158 }
nicholas@1 159
nicholas@1 160 this.stop = function() {
nicholas@1 161 this.bufferNode.stop(0);
nicholas@1 162 this.bufferNode = audioContext.createBufferSource();
nicholas@1 163 this.bufferNode.connect(this.outputGain);
nicholas@1 164 this.bufferNode.buffer = this.buffer;
nicholas@7 165 this.bufferNode.loop = true;
nicholas@1 166 }
nicholas@1 167
nicholas@7 168 this.constructTrack = function(url) {
nicholas@7 169 var request = new XMLHttpRequest();
nicholas@7 170 request.open('GET',url,true);
nicholas@7 171 request.responseType = 'arraybuffer';
nicholas@7 172
nicholas@7 173 var audioObj = this;
nicholas@7 174
nicholas@7 175 // Create callback to decode the data asynchronously
nicholas@7 176 request.onloadend = function() {
nicholas@7 177 audioContext.decodeAudioData(request.response, function(decodedData) {
nicholas@7 178 audioObj.buffer = decodedData;
nicholas@7 179 audioObj.bufferNode.buffer = audioObj.buffer;
nicholas@7 180 audioObj.bufferNode.loop = true;
nicholas@7 181 audioObj.state = 1;
nicholas@7 182 }, function(){
nicholas@7 183 // Should only be called if there was an error, but sometimes gets called continuously
nicholas@7 184 // Check here if the error is genuine
nicholas@7 185 if (audioObj.state == 0 || audioObj.buffer == undefined) {
nicholas@7 186 // Genuine error
nicholas@7 187 console.log('FATAL - Error loading buffer on '+audioObj.id);
nicholas@7 188 }
nicholas@7 189 });
nicholas@7 190 }
nicholas@7 191 request.send();
nicholas@7 192 }
nicholas@7 193
nicholas@7 194 }