Mercurial > hg > webaudioevaluationtool
changeset 1:d7d1aa6d3558
Added intial files. apeTool.html is main index html document to be loaded. core.js contains core functions and classes including audioEngine and audioObjects. graphics.css and structure.css for css style definitions.
| author | Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk> |
|---|---|
| date | Sun, 08 Mar 2015 12:30:25 +0000 |
| parents | 3156674c7bb3 |
| children | 955d229b8a02 |
| files | apeTool.html core.js graphics.css structure.css |
| diffstat | 4 files changed, 159 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/apeTool.html Sun Mar 08 12:30:25 2015 +0000 @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + + <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame + Remove this if you use the .htaccess --> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + + <title>apeTool</title> + <meta name="description" content="" /> + <meta name="author" content="" /> + + <!-- Load up the default core JS and CSS files--> + <link rel='stylesheet' type='text/css' href='graphics.css'> + <link rel='stylesheet' type='text/css' href='structure.css'> + <!-- Use jQuery hosted from Google CDN --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> + <script src='core.js'></script> + + + </head> + + <body> + <!-- Load up the default page interface allowing for project setting loads, even if hard-coded--> + <!-- Actual test interface design should be contained in the .js for ease of dynamic content--> + <div id='topLevelBody'> + <p>HTML5 APE Tool</p> + </div> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/core.js Sun Mar 08 12:30:25 2015 +0000 @@ -0,0 +1,114 @@ +/** + * core.js + * + * Main script to run, calls all other core functions and manages loading/store to backend. + * Also contains all global variables. + */ + +/* create the web audio API context and store in audioContext*/ +var audioContext; + +var audioEngineContext; + +window.onload = function() { + // Function called once the browser has loaded all files. + // This should perform any initial commands such as structure / loading documents + + // Create a web audio API context + // NORE: Currently this will only work with webkit browsers (Chrome/Safari)! + audioContext = new webkitAudioContext; + + // Create the audio engine object + audioEngineContext = new AudioEngine(); +} + +function loadProjectSpec(url) { + // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data + // If url is null, request client to upload project XML document +} + +function createProjectSave(destURL) { + // Save the data from interface into XML and send to destURL + // If destURL is null then download XML in client +} + +function AudioEngine() { + + // Create two output paths, the main outputGain and fooGain. + // Output gain is default to 1 and any items for playback route here + // Foo gain is used for analysis to ensure paths get processed, but are not heard + // because web audio will optimise and any route which does not go to the destination gets ignored. + this.outputGain = audioContext.createGain(); + this.fooGain = audioContext.createGain(); + this.fooGain.gain = 0; + + // Connect both gains to output + this.outputGain.connect(audioContext.destination); + this.fooGain.connect(audioContext.destination); + + // Create store for new audioObjects + this.audioObjects = []; + + this.play = function() { + // Send play command to all playback buffers for synchronised start + // Also start timer callbacks to detect if playback has finished + } + + this.stop = function() { + // Send stop and reset command to all playback buffers + } + + this.newTrack = function(url) { + // Pull data from given URL into new audio buffer + // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin' + var request = new XMLHttpRequest(); + request.open('GET',url,true); + request.responseType = 'arraybuffer'; + // Create the audioObject with ID of the new track length; + audioObjectId = this.audioObjects.length + this.audioObjects[audioObjectId] = new audioObject(audioObjectId); + + // Create callback to decode the data asynchronously + request.onload = function() { + audioContext.decodeAudioData(request.response, function(decodedData) { + audioObj = audioEngineContext.audioObjects[audioObjectId]; + audioObj.buffer = decodedData; + audioObj.bufferNode.buffer = audioObj.buffer; + audioObj.state = 1; + }, console.log("Err - Buffer not added to " + audioObjectId)); + } + request.send(); + } + +} + +function audioObject(id) { + // The main buffer object with common control nodes to the AudioEngine + + this.id = id; + this.state = 0; // 0 - no data, 1 - ready + + // Create a buffer and external gain control to allow internal patching of effects and volume leveling. + this.bufferNode = audioContext.createBufferSource(); + this.outputGain = audioContext.createGain(); + + // Connect buffer to the audio graph + this.bufferNode.connect(this.outputGain); + this.outputGain.connect(audioEngineContext.outputGain); + + // the audiobuffer is not designed for multi-start playback + // When stopeed, the buffer node is deleted and recreated with the stored buffer. + this.buffer; + + this.play = function(startTime) { + this.bufferNode.start(startTime); + } + + this.stop = function() { + this.bufferNode.stop(0); + this.bufferNode = audioContext.createBufferSource(); + this.bufferNode.connect(this.outputGain); + this.bufferNode.buffer = this.buffer; + } + +}