annotate core.js @ 1701:86bad9132601

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