Mercurial > hg > webaudioevaluationtool
changeset 70:4924b57165c2
Version 1.0 Release!
| author | Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk> |
|---|---|
| date | Wed, 22 Apr 2015 18:37:04 +0100 |
| parents | 438468ff317e (current diff) c6bff12144a0 (diff) |
| children | 7f9da387e1ce |
| files | ape.js apeTool.html core.js |
| diffstat | 12 files changed, 1319 insertions(+), 333 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/ape.css Wed Apr 22 18:37:04 2015 +0100 @@ -0,0 +1,101 @@ +/* + * Hold any style information for APE interface. Customise if you like to make the interface your own! + * + */ +body { + /* Set the background colour (note US English spelling) to grey*/ + background-color: #ddd +} + +div.title { + /* Specify any colouring for the title */ +} + +div.pageTitle { + width: auto; + height: 20px; +} + +div.testHalt { + /* Specify any colouring during the test halt for pre/post questions */ + background-color: rgba(0,0,0,0.5); + /* Don't mess with this bit */ + z-index: 2; + width: 100%; + height: 100%; + position: absolute; + left: 0px; + top: 0px; +} + +button { + /* Specify any button structure or style */ + min-width: 20px; + background-color: #ddd +} + +div#slider { + /* Specify any structure for the slider holder interface */ + background-color: #eee; + height: 150px; + margin-bottom: 5px; +} + +div.sliderScale { + width: 100%; + min-height: 20px; +} + +div.sliderScale span { + /* Any formatting of text below scale */ + min-width: 5px; + height: 20px; + height: 100%; + position: absolute; +} + +div.track-slider { + /* Specify any strcture for the slider objects */ + position: absolute; + height: inherit; + width: 12px; + float: left; + background-color: rgb(100,200,100); +} + +div.comment-div { + border:#444444; + border-style:solid; + border-width:1px; + width: 624px; + float: left; + margin: 5px; +} + +div.comment-div span { + margin-left: 15px; +} + +div.popupHolder { + width: 500px; + height: 250px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0px 0px 50px #000; + z-index: 2; +} + +button.popupButton { + /* Button for popup window + */ + width: 50px; + height: 25px; + position: absolute; + left: 440px; + top: 215px; + border-radius: 5px; + border: #444; + border-width: 1px; + border-style: solid; + background-color: #fff; +}
--- a/ape.js Fri Apr 10 10:20:52 2015 +0100 +++ b/ape.js Wed Apr 22 18:37:04 2015 +0100 @@ -3,6 +3,14 @@ * Create the APE interface */ +var currentState; // Keep track of the current state (pre/post test, which test, final test? first test?) +// preTest - In preTest state +// testRun-ID - In test running, test Id number at the end 'testRun-2' +// testRunPost-ID - Post test of test ID +// testRunPre-ID - Pre-test of test ID +// postTest - End of test, final submission! + + // Once this is loaded and parsed, begin execution loadInterface(projectXML); @@ -12,9 +20,6 @@ var width = window.innerWidth; var height = window.innerHeight; - // Set background to grey #ddd - document.getElementsByTagName('body')[0].style.backgroundColor = '#ddd'; - // The injection point into the HTML page var insertPoint = document.getElementById("topLevelBody"); var testContent = document.createElement('div'); @@ -26,6 +31,104 @@ var xmlSetup = xmlDoc.find('setup'); // Should put in an error function here incase of malprocessed or malformed XML + // Extract the different test XML DOM trees + var audioHolders = xmlDoc.find('audioHolder'); + audioHolders.each(function(index,element) { + var repeatN = element.attributes['repeatCount'].value; + for (var r=0; r<=repeatN; r++) { + testXMLSetups[testXMLSetups.length] = element; + } + }); + + // New check if we need to randomise the test order + var randomise = xmlSetup[0].attributes['randomiseOrder']; + if (randomise != undefined) { + randomise = Boolean(randomise.value); + } else { + randomise = false; + } + if (randomise) + { + testXMLSetups = randomiseOrder(testXMLSetups); + } + + // Obtain the metrics enabled + var metricNode = xmlSetup.find('Metric'); + var metricNode = metricNode.find('metricEnable'); + metricNode.each(function(index,node){ + var enabled = node.textContent; + switch(enabled) + { + case 'testTimer': + sessionMetrics.prototype.enableTestTimer = true; + break; + case 'elementTimer': + sessionMetrics.prototype.enableElementTimer = true; + break; + case 'elementTracker': + sessionMetrics.prototype.enableElementTracker = true; + break; + case 'elementInitalPosition': + sessionMetrics.prototype.enableElementInitialPosition = true; + break; + case 'elementFlagListenedTo': + sessionMetrics.prototype.enableFlagListenedTo = true; + break; + case 'elementFlagMoved': + sessionMetrics.prototype.enableFlagMoved = true; + break; + case 'elementFlagComments': + sessionMetrics.prototype.enableFlagComments = true; + break; + } + }); + + // Create APE specific metric functions + audioEngineContext.metric.initialiseTest = function() + { + var sliders = document.getElementsByClassName('track-slider'); + for (var i=0; i<sliders.length; i++) + { + audioEngineContext.audioObjects[i].metric.initialised(convSliderPosToRate(i)); + } + }; + + audioEngineContext.metric.sliderMoveStart = function(id) + { + if (this.data == -1) + { + this.data = id; + } else { + console.log('ERROR: Metric tracker detecting two moves!'); + this.data = -1; + } + }; + audioEngineContext.metric.sliderMoved = function() + { + var time = audioEngineContext.timer.getTestTime(); + var id = this.data; + this.data = -1; + var position = convSliderPosToRate(id); + if (audioEngineContext.timer.testStarted) + { + audioEngineContext.audioObjects[id].metric.moved(time,position); + } + }; + + audioEngineContext.metric.sliderPlayed = function(id) + { + var time = audioEngineContext.timer.getTestTime(); + if (audioEngineContext.timer.testStarted) + { + if (this.lastClicked >= 0) + { + audioEngineContext.audioObjects[this.lastClicked].metric.listening(time); + } + this.lastClicked = id; + audioEngineContext.audioObjects[id].metric.listening(time); + } + }; + // Create the top div for the Title element var titleAttr = xmlSetup[0].attributes['title']; var title = document.createElement('div'); @@ -42,6 +145,13 @@ // Insert the titleSpan element into the title div element. title.appendChild(titleSpan); + var pagetitle = document.createElement('div'); + pagetitle.className = "pageTitle"; + pagetitle.align = "center"; + var titleSpan = document.createElement('span'); + titleSpan.id = "pageTitle"; + pagetitle.appendChild(titleSpan); + // Store the return URL path in global projectReturn projectReturn = xmlSetup[0].attributes['projectReturn'].value; @@ -57,6 +167,7 @@ // Create playback start/stop points var playback = document.createElement("button"); playback.innerHTML = 'Start'; + playback.id = 'playback-button'; // onclick function. Check if it is playing or not, call the correct function in the // audioEngine, change the button text to reflect the next state. playback.onclick = function() { @@ -71,10 +182,8 @@ // Create Submit (save) button var submit = document.createElement("button"); submit.innerHTML = 'Submit'; - submit.onclick = function() { - // TODO: Update this for postTest tags - createProjectSave(projectReturn) - }; + submit.onclick = buttonSubmitClick; + submit.id = 'submit-button'; // Append the interface buttons into the interfaceButtons object. interfaceButtons.appendChild(playback); interfaceButtons.appendChild(submit); @@ -93,26 +202,103 @@ canvas.id = 'slider'; // Must have a known EXACT width, as this is used later to determine the ratings canvas.style.width = width - 100 +"px"; - canvas.style.height = 150 + "px"; - canvas.style.marginBottom = "25px"; - canvas.style.backgroundColor = '#eee'; canvas.align = "left"; sliderBox.appendChild(canvas); + // Create the div to hold any scale objects + var scale = document.createElement('div'); + scale.className = 'sliderScale'; + scale.id = 'sliderScaleHolder'; + scale.align = 'left'; + sliderBox.appendChild(scale); + // Global parent for the comment boxes on the page var feedbackHolder = document.createElement('div'); - // Find the parent audioHolder object. - var audioHolder = xmlDoc.find('audioHolder'); - audioHolder = audioHolder[0]; // Remove from one field array + feedbackHolder.id = 'feedbackHolder'; + + testContent.style.zIndex = 1; + insertPoint.innerHTML = null; // Clear the current schema + + // Create pre and post test questions + var blank = document.createElement('div'); + blank.className = 'testHalt'; + + var popupHolder = document.createElement('div'); + popupHolder.id = 'popupHolder'; + popupHolder.className = 'popupHolder'; + popupHolder.style.position = 'absolute'; + popupHolder.style.left = (window.innerWidth/2)-250 + 'px'; + popupHolder.style.top = (window.innerHeight/2)-125 + 'px'; + insertPoint.appendChild(popupHolder); + insertPoint.appendChild(blank); + hidePopup(); + + var preTest = xmlSetup.find('PreTest'); + var postTest = xmlSetup.find('PostTest'); + preTest = preTest[0]; + postTest = postTest[0]; + + currentState = 'preTest'; + + // Create Pre-Test Box + if (preTest != undefined && preTest.children.length >= 1) + { + showPopup(); + preTestPopupStart(preTest); + } + + // Inject into HTML + testContent.appendChild(title); // Insert the title + testContent.appendChild(pagetitle); + testContent.appendChild(interfaceButtons); + testContent.appendChild(sliderBox); + testContent.appendChild(feedbackHolder); + insertPoint.appendChild(testContent); + + // Load the full interface + +} + +function loadTest(id) +{ + // Used to load a specific test page + var textXML = testXMLSetups[id]; + + var feedbackHolder = document.getElementById('feedbackHolder'); + var canvas = document.getElementById('slider'); + feedbackHolder.innerHTML = null; + canvas.innerHTML = null; + + // Setup question title + var interfaceObj = $(textXML).find('interface'); + var titleNode = interfaceObj.find('title'); + if (titleNode[0] != undefined) + { + document.getElementById('pageTitle').textContent = titleNode[0].textContent; + } + var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2); + var offset = 50-8; // Half the offset of the slider (window width -100) minus the body padding of 8 + // TODO: AUTOMATE ABOVE!! + var scale = document.getElementById('sliderScaleHolder'); + scale.innerHTML = null; + interfaceObj.find('scale').each(function(index,scaleObj){ + var position = Number(scaleObj.attributes['position'].value)*0.01; + var pixelPosition = (position*positionScale)+offset; + var scaleDOM = document.createElement('span'); + scaleDOM.textContent = scaleObj.textContent; + scale.appendChild(scaleDOM); + scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; + }); + // Extract the hostURL attribute. If not set, create an empty string. - var hostURL = audioHolder.attributes['hostURL']; + var hostURL = textXML.attributes['hostURL']; if (hostURL == undefined) { hostURL = ""; } else { hostURL = hostURL.value; } // Extract the sampleRate. If set, convert the string to a Number. - var hostFs = audioHolder.attributes['sampleRate']; + var hostFs = textXML.attributes['sampleRate']; if (hostFs != undefined) { hostFs = Number(hostFs.value); } @@ -125,215 +311,620 @@ return; } } + + var commentShow = textXML.attributes['elementComments']; + if (commentShow != undefined) { + if (commentShow.value == 'false') {commentShow = false;} + else {commentShow = true;} + } else {commentShow = true;} + + var loopPlayback = textXML.attributes['loop']; + if (loopPlayback != undefined) + { + loopPlayback = loopPlayback.value; + if (loopPlayback == 'true') { + loopPlayback = true; + } else { + loopPlayback = false; + } + } else { + loopPlayback = false; + } + audioEngineContext.loopPlayback = loopPlayback; + + // Create AudioEngine bindings for playback + if (loopPlayback) { + audioEngineContext.play = function() { + // Send play command to all playback buffers for synchronised start + // Also start timer callbacks to detect if playback has finished + if (this.status == 0) { + this.timer.startTest(); + // First get current clock + var timer = audioContext.currentTime; + // Add 3 seconds + timer += 3.0; + // Send play to all tracks + for (var i=0; i<this.audioObjects.length; i++) + { + this.audioObjects[i].play(timer); + } + this.status = 1; + } + }; + + audioEngineContext.stop = function() { + // Send stop and reset command to all playback buffers + if (this.status == 1) { + if (this.loopPlayback) { + for (var i=0; i<this.audioObjects.length; i++) + { + this.audioObjects[i].stop(); + } + } + this.status = 0; + } + }; + + audioEngineContext.selectedTrack = function(id) { + for (var i=0; i<this.audioObjects.length; i++) + { + if (id == i) { + this.audioObjects[i].outputGain.gain.value = 1.0; + } else { + this.audioObjects[i].outputGain.gain.value = 0.0; + } + } + }; + } else { + audioEngineContext.play = function() { + // Send play command to all playback buffers for synchronised start + // Also start timer callbacks to detect if playback has finished + if (this.status == 0) { + this.timer.startTest(); + this.status = 1; + } + }; + + audioEngineContext.stop = function() { + // Send stop and reset command to all playback buffers + if (this.status == 1) { + if (this.loopPlayback) { + for (var i=0; i<this.audioObjects.length; i++) + { + this.audioObjects[i].stop(); + } + } + this.status = 0; + } + }; + + audioEngineContext.selectedTrack = function(id) { + for (var i=0; i<this.audioObjects.length; i++) + { + if (id == i) { + this.audioObjects[i].outputGain.gain.value = 1.0; + this.audioObjects[i].play(audioContext.currentTime+0.01); + } else { + this.audioObjects[i].outputGain.gain.value = 0.0; + } + } + }; + } + + currentTestHolder = document.createElement('audioHolder'); + currentTestHolder.id = textXML.id; + currentTestHolder.repeatCount = textXML.attributes['repeatCount'].value; + var currentPreTestHolder = document.createElement('preTest'); + var currentPostTestHolder = document.createElement('postTest'); + currentTestHolder.appendChild(currentPreTestHolder); + currentTestHolder.appendChild(currentPostTestHolder); + + var randomise = textXML.attributes['randomiseOrder']; + if (randomise != undefined) {randomise = randomise.value;} + else {randomise = false;} + + var audioElements = $(textXML).find('audioElements'); + currentTrackOrder = []; + audioElements.each(function(index,element){ + // Find any blind-repeats + // Not implemented yet, but just incase + currentTrackOrder[index] = element; + }); + if (randomise) { + currentTrackOrder = randomiseOrder(currentTrackOrder); + } + + // Delete any previous audioObjects associated with the audioEngine + audioEngineContext.audioObjects = []; + // Find all the audioElements from the audioHolder - var audioElements = $(audioHolder).find('audioElements'); - audioElements.each(function(index,element){ + $(currentTrackOrder).each(function(index,element){ // Find URL of track // In this jQuery loop, variable 'this' holds the current audioElement. // Now load each audio sample. First create the new track by passing the full URL var trackURL = hostURL + this.attributes['url'].value; audioEngineContext.newTrack(trackURL); - // Create document objects to hold the comment boxes - var trackComment = document.createElement('div'); - // Create a string next to each comment asking for a comment - var trackString = document.createElement('span'); - trackString.innerHTML = 'Comment on track '+index; - // Create the HTML5 comment box 'textarea' - var trackCommentBox = document.createElement('textarea'); - trackCommentBox.rows = '4'; - trackCommentBox.cols = '100'; - trackCommentBox.name = 'trackComment'+index; - trackCommentBox.className = 'trackComment'; - // Add to the holder. - trackComment.appendChild(trackString); - trackComment.appendChild(trackCommentBox); - feedbackHolder.appendChild(trackComment); + + if (commentShow) { + // Create document objects to hold the comment boxes + var trackComment = document.createElement('div'); + trackComment.className = 'comment-div'; + // Create a string next to each comment asking for a comment + var trackString = document.createElement('span'); + trackString.innerHTML = 'Comment on track '+index; + // Create the HTML5 comment box 'textarea' + var trackCommentBox = document.createElement('textarea'); + trackCommentBox.rows = '4'; + trackCommentBox.cols = '100'; + trackCommentBox.name = 'trackComment'+index; + trackCommentBox.className = 'trackComment'; + var br = document.createElement('br'); + // Add to the holder. + trackComment.appendChild(trackString); + trackComment.appendChild(br); + trackComment.appendChild(trackCommentBox); + feedbackHolder.appendChild(trackComment); + } // Create a slider per track var trackSliderObj = document.createElement('div'); trackSliderObj.className = 'track-slider'; trackSliderObj.id = 'track-slider-'+index; - trackSliderObj.style.position = 'absolute'; // Distribute it randomnly var w = window.innerWidth - 100; w = Math.random()*w; trackSliderObj.style.left = Math.floor(w)+50+'px'; - trackSliderObj.style.height = "150px"; - trackSliderObj.style.width = "10px"; - trackSliderObj.style.backgroundColor = 'rgb(100,200,100)'; trackSliderObj.innerHTML = '<span>'+index+'</span>'; - trackSliderObj.style.float = "left"; trackSliderObj.draggable = true; trackSliderObj.ondragend = dragEnd; + trackSliderObj.ondragstart = function() + { + var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! + audioEngineContext.metric.sliderMoveStart(id); + }; // Onclick, switch playback to that track trackSliderObj.onclick = function() { // Get the track ID from the object ID var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99! + audioEngineContext.metric.sliderPlayed(id); audioEngineContext.selectedTrack(id); }; canvas.appendChild(trackSliderObj); }); + // Append any commentQuestion boxes + var commentQuestions = $(textXML).find('CommentQuestion'); + $(commentQuestions).each(function(index,element) { + // Create document objects to hold the comment boxes + var trackComment = document.createElement('div'); + trackComment.className = 'comment-div commentQuestion'; + trackComment.id = element.attributes['id'].value; + // Create a string next to each comment asking for a comment + var trackString = document.createElement('span'); + trackString.innerHTML = element.textContent; + // Create the HTML5 comment box 'textarea' + var trackCommentBox = document.createElement('textarea'); + trackCommentBox.rows = '4'; + trackCommentBox.cols = '100'; + trackCommentBox.name = 'commentQuestion'+index; + trackCommentBox.className = 'trackComment'; + var br = document.createElement('br'); + // Add to the holder. + trackComment.appendChild(trackString); + trackComment.appendChild(br); + trackComment.appendChild(trackCommentBox); + feedbackHolder.appendChild(trackComment); + }); - // Create pre and post test questions + // Now process any pre-test commands - // Inject into HTML - insertPoint.innerHTML = null; // Clear the current schema - testContent.appendChild(title); // Insert the title - testContent.appendChild(interfaceButtons); - testContent.appendChild(sliderBox); - testContent.appendChild(feedbackHolder); - insertPoint.appendChild(testContent); + var preTest = $(testXMLSetups[id]).find('PreTest')[0]; + if (preTest.children.length > 0) + { + currentState = 'testRunPre-'+id; + preTestPopupStart(preTest); + showPopup(); + } else { + currentState = 'testRun-'+id; + } +} + +function preTestPopupStart(preTest) +{ + var popupHolder = document.getElementById('popupHolder'); + popupHolder.innerHTML = null; + // Parse the first box + var preTestOption = document.createElement('div'); + preTestOption.id = 'preTest'; + preTestOption.style.marginTop = '25px'; + preTestOption.align = "center"; + var child = preTest.children[0]; + if (child.nodeName == 'statement') + { + preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>'; + } else if (child.nodeName == 'question') + { + var questionId = child.attributes['id'].value; + var textHold = document.createElement('span'); + textHold.innerHTML = child.innerHTML; + textHold.id = questionId + 'response'; + var textEnter = document.createElement('textarea'); + preTestOption.appendChild(textHold); + preTestOption.appendChild(textEnter); + } + var nextButton = document.createElement('button'); + nextButton.className = 'popupButton'; + nextButton.value = '0'; + nextButton.innerHTML = 'Next'; + nextButton.onclick = popupButtonClick; - var preTest = xmlDoc.find('PreTest'); - var postTest = xmlDoc.find('PostTest'); - preTest = preTest[0]; - postTest = postTest[0]; - if (preTest != undefined || postTest != undefined) + popupHolder.appendChild(preTestOption); + popupHolder.appendChild(nextButton); +} + +function popupButtonClick() +{ + // Global call from the 'Next' button click + if (currentState == 'preTest') { - testContent.style.zIndex = 1; - var blank = document.createElement('div'); - blank.id = 'testHalt'; - blank.style.zIndex = 2; - blank.style.width = window.innerWidth + 'px'; - blank.style.height = window.innerHeight + 'px'; - blank.style.position = 'absolute'; - blank.style.top = '0'; - blank.style.left = '0'; - insertPoint.appendChild(blank); + // At the start of the preTest routine! + var xmlTree = projectXML.find('setup'); + var preTest = xmlTree.find('PreTest')[0]; + this.value = preTestButtonClick(preTest,this.value); + } else if (currentState.substr(0,10) == 'testRunPre') + { + //Specific test pre-test + var testId = currentState.substr(11,currentState.length-10); + var preTest = $(testXMLSetups[testId]).find('PreTest')[0]; + this.value = preTestButtonClick(preTest,this.value); + } else if (currentState.substr(0,11) == 'testRunPost') + { + // Specific test post-test + var testId = currentState.substr(12,currentState.length-11); + var preTest = $(testXMLSetups[testId]).find('PostTest')[0]; + this.value = preTestButtonClick(preTest,this.value); + } else if (currentState == 'postTest') + { + // At the end of the test, running global post test + var xmlTree = projectXML.find('setup'); + var PostTest = xmlTree.find('PostTest')[0]; + this.value = preTestButtonClick(PostTest,this.value); } - - // Create Pre-Test Box - if (preTest != undefined && preTest.children.length >= 1) +} + +function preTestButtonClick(preTest,index) +{ + // Called on click of pre-test button + // Need to find and parse preTest again! + var preTestOption = document.getElementById('preTest'); + // Check if current state is a question! + if (preTest.children[index].nodeName == 'question') { + var questionId = preTest.children[index].attributes['id'].value; + var questionHold = document.createElement('comment'); + var questionResponse = document.getElementById(questionId + 'response'); + var mandatory = preTest.children[index].attributes['mandatory']; + if (mandatory != undefined){ + if (mandatory.value == 'true') {mandatory = true;} + else {mandatory = false;} + } else {mandatory = false;} + if (mandatory == true && questionResponse.value.length == 0) { + return index; + } + questionHold.id = questionId; + questionHold.innerHTML = questionResponse.value; + postPopupResponse(questionHold); + } + index++; + if (index < preTest.children.length) { - - var preTestHolder = document.createElement('div'); - preTestHolder.id = 'preTestHolder'; - preTestHolder.style.zIndex = 2; - preTestHolder.style.width = '500px'; - preTestHolder.style.height = '250px'; - preTestHolder.style.backgroundColor = '#fff'; - preTestHolder.style.position = 'absolute'; - preTestHolder.style.left = (window.innerWidth/2)-250 + 'px'; - preTestHolder.style.top = (window.innerHeight/2)-125 + 'px'; - // Parse the first box - var preTestOption = document.createElement('div'); - preTestOption.id = 'preTest'; - preTestOption.style.marginTop = '25px'; - preTestOption.align = "center"; - var child = preTest.children[0]; + // More to process + var child = preTest.children[index]; if (child.nodeName == 'statement') { preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>'; } else if (child.nodeName == 'question') { - var questionId = child.attributes['id'].value; var textHold = document.createElement('span'); textHold.innerHTML = child.innerHTML; - textHold.id = questionId + 'response'; var textEnter = document.createElement('textarea'); + textEnter.id = child.attributes['id'].value + 'response'; + var br = document.createElement('br'); + preTestOption.innerHTML = null; preTestOption.appendChild(textHold); + preTestOption.appendChild(br); preTestOption.appendChild(textEnter); } - var nextButton = document.createElement('button'); - nextButton.id = 'preTestNext'; - nextButton.value = '1'; - nextButton.innerHTML = 'next'; - nextButton.style.position = 'relative'; - nextButton.style.left = '450px'; - nextButton.style.top = '175px'; - nextButton.onclick = function() { - // Need to find and parse preTest again! - var preTest = projectXML.find('PreTest')[0]; - // Check if current state is a question! - if (preTest.children[this.value-1].nodeName == 'question') { - var questionId = preTest.children[this.value-1].attributes['id'].value; - var questionHold = document.createElement('comment'); - var questionResponse = document.getElementById(questionId + 'response'); - questionHold.id = questionId; - questionHold.innerHTML = questionResponse.value; - preTestQuestions.appendChild(questionHold); - } - if (this.value < preTest.children.length) - { - // More to process - var child = preTest.children[this.value]; - if (child.nodeName == 'statement') - { - preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>'; - } else if (child.nodeName == 'question') - { - var textHold = document.createElement('span'); - textHold.innerHTML = child.innerHTML; - var textEnter = document.createElement('textarea'); - textEnter.id = child.attributes['id'].value + 'response'; - preTestOption.innerHTML = null; - preTestOption.appendChild(textHold); - preTestOption.appendChild(textEnter); - } - } else { - // Time to clear - preTestHolder.style.zIndex = -1; - preTestHolder.style.visibility = 'hidden'; - var blank = document.getElementById('testHalt'); - blank.style.zIndex = -2; - blank.style.visibility = 'hidden'; - } - this.value++; - }; - - preTestHolder.appendChild(preTestOption); - preTestHolder.appendChild(nextButton); - insertPoint.appendChild(preTestHolder); + } else { + // Time to clear + preTestOption.innerHTML = null; + if (currentState != 'postTest') { + hidePopup(); + // Progress the state! + advanceState(); + } else { + a = createProjectSave(projectReturn); + preTestOption.appendChild(a); + } } + return index; +} +function postPopupResponse(response) +{ + if (currentState == 'preTest') { + preTestQuestions.appendChild(response); + } else if (currentState == 'postTest') { + postTestQuestions.appendChild(response); + } else { + // Inside a specific test + if (currentState.substr(0,10) == 'testRunPre') { + // Pre Test + var store = $(currentTestHolder).find('preTest'); + } else { + // Post Test + var store = $(currentTestHolder).find('postTest'); + } + store[0].appendChild(response); + } +} + +function showPopup() +{ + var popupHolder = document.getElementById('popupHolder'); + popupHolder.style.zIndex = 3; + popupHolder.style.visibility = 'visible'; + var blank = document.getElementsByClassName('testHalt')[0]; + blank.style.zIndex = 2; + blank.style.visibility = 'visible'; +} + +function hidePopup() +{ + var popupHolder = document.getElementById('popupHolder'); + popupHolder.style.zIndex = -1; + popupHolder.style.visibility = 'hidden'; + var blank = document.getElementsByClassName('testHalt')[0]; + blank.style.zIndex = -2; + blank.style.visibility = 'hidden'; } function dragEnd(ev) { // Function call when a div has been dropped - if (ev.x >= 50 && ev.x < window.innerWidth-50) { - this.style.left = (ev.x)+'px'; + var slider = document.getElementById('slider'); + var w = slider.style.width; + w = Number(w.substr(0,w.length-2)); + var x = ev.x; + if (x >= 42 && x < w+42) { + this.style.left = (x)+'px'; } else { - if (ev.x<50) { - this.style.left = '50px'; + if (x<42) { + this.style.left = '42px'; } else { - this.style.left = window.innerWidth-50 + 'px'; + this.style.left = (w+42) + 'px'; } } + audioEngineContext.metric.sliderMoved(); +} + +function advanceState() +{ + console.log(currentState); + if (currentState == 'preTest') + { + // End of pre-test, begin the test + loadTest(0); + } else if (currentState.substr(0,10) == 'testRunPre') + { + // Start the test + var testId = currentState.substr(11,currentState.length-10); + currentState = 'testRun-'+testId; + } else if (currentState.substr(0,11) == 'testRunPost') + { + var testId = currentState.substr(12,currentState.length-11); + testEnded(testId); + } else if (currentState.substr(0,7) == 'testRun') + { + var testId = currentState.substr(8,currentState.length-7); + // Check if we have any post tests to perform + var postXML = $(testXMLSetups[testId]).find('PostTest')[0]; + if (postXML == undefined) { + testEnded(testId); + } + else if (postXML.children.length > 0) + { + currentState = 'testRunPost-'+testId; + showPopup(); + preTestPopupStart(postXML); + } + else { + + + // No post tests, check if we have another test to perform instead + + } + } + console.log(currentState); +} + +function testEnded(testId) +{ + pageXMLSave(testId); + if (testXMLSetups.length-1 > testId) + { + // Yes we have another test to perform + testId = (Number(testId)+1); + currentState = 'testRun-'+testId; + loadTest(testId); + } else { + console.log('Testing Completed!'); + currentState = 'postTest'; + // Check for any post tests + var xmlSetup = projectXML.find('setup'); + var postTest = xmlSetup.find('PostTest')[0]; + showPopup(); + preTestPopupStart(postTest); + } +} + +function buttonSubmitClick() +{ + if (audioEngineContext.status == 1) { + var playback = document.getElementById('playback-button'); + playback.click(); + // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options + } else + { + if (audioEngineContext.timer.testStarted == false) + { + alert('You have not started the test! Please press start to begin the test!'); + return; + } + } + if (currentState.substr(0,7) == 'testRun') + { + audioEngineContext.timer.stopTest(); + advanceState(); + } +} + +function convSliderPosToRate(id) +{ + var w = document.getElementById('slider').style.width; + var maxPix = w.substr(0,w.length-2); + var slider = document.getElementsByClassName('track-slider')[id]; + var pix = slider.style.left; + pix = pix.substr(0,pix.length-2); + var rate = (pix-42)/maxPix; + return rate; +} + +function pageXMLSave(testId) +{ + // Saves a specific test page + var xmlDoc = currentTestHolder; + // Check if any session wide metrics are enabled + + var commentShow = testXMLSetups[testId].attributes['elementComments']; + if (commentShow != undefined) { + if (commentShow.value == 'false') {commentShow = false;} + else {commentShow = true;} + } else {commentShow = true;} + + var metric = document.createElement('metric'); + if (audioEngineContext.metric.enableTestTimer) + { + var testTime = document.createElement('metricResult'); + testTime.id = 'testTime'; + testTime.textContent = audioEngineContext.timer.testDuration; + metric.appendChild(testTime); + } + xmlDoc.appendChild(metric); + var trackSliderObjects = document.getElementsByClassName('track-slider'); + var commentObjects = document.getElementsByClassName('comment-div'); + for (var i=0; i<trackSliderObjects.length; i++) + { + var audioElement = document.createElement('audioElement'); + audioElement.id = currentTrackOrder[i].attributes['id'].value; + audioElement.url = currentTrackOrder[i].attributes['url'].value; + var value = document.createElement('value'); + value.innerHTML = convSliderPosToRate(i); + if (commentShow) { + var comment = document.createElement("comment"); + var question = document.createElement("question"); + var response = document.createElement("response"); + question.textContent = commentObjects[i].children[0].textContent; + response.textContent = commentObjects[i].children[2].value; + comment.appendChild(question); + comment.appendChild(response); + audioElement.appendChild(comment); + } + audioElement.appendChild(value); + // Check for any per element metrics + var metric = document.createElement('metric'); + var elementMetric = audioEngineContext.audioObjects[i].metric; + if (audioEngineContext.metric.enableElementTimer) { + var elementTimer = document.createElement('metricResult'); + elementTimer.id = 'elementTimer'; + elementTimer.textContent = elementMetric.listenedTimer; + metric.appendChild(elementTimer); + } + if (audioEngineContext.metric.enableElementTracker) { + var elementTrackerFull = document.createElement('metricResult'); + elementTrackerFull.id = 'elementTrackerFull'; + var data = elementMetric.movementTracker; + for (var k=0; k<data.length; k++) + { + var timePos = document.createElement('timePos'); + timePos.id = k; + var time = document.createElement('time'); + time.textContent = data[k][0]; + var position = document.createElement('position'); + position.textContent = data[k][1]; + timePos.appendChild(time); + timePos.appendChild(position); + elementTrackerFull.appendChild(timePos); + } + metric.appendChild(elementTrackerFull); + } + if (audioEngineContext.metric.enableElementInitialPosition) { + var elementInitial = document.createElement('metricResult'); + elementInitial.id = 'elementInitialPosition'; + elementInitial.textContent = elementMetric.initialPosition; + metric.appendChild(elementInitial); + } + if (audioEngineContext.metric.enableFlagListenedTo) { + var flagListenedTo = document.createElement('metricResult'); + flagListenedTo.id = 'elementFlagListenedTo'; + flagListenedTo.textContent = elementMetric.wasListenedTo; + metric.appendChild(flagListenedTo); + } + if (audioEngineContext.metric.enableFlagMoved) { + var flagMoved = document.createElement('metricResult'); + flagMoved.id = 'elementFlagMoved'; + flagMoved.textContent = elementMetric.wasMoved; + metric.appendChild(flagMoved); + } + if (audioEngineContext.metric.enableFlagComments) { + var flagComments = document.createElement('metricResult'); + flagComments.id = 'elementFlagComments'; + if (response.textContent.length == 0) {flag.textContent = 'false';} + else {flag.textContet = 'true';} + metric.appendChild(flagComments); + } + audioElement.appendChild(metric); + xmlDoc.appendChild(audioElement); + } + var commentQuestion = document.getElementsByClassName('commentQuestion'); + for (var i=0; i<commentQuestion.length; i++) + { + var cqHolder = document.createElement('CommentQuestion'); + var comment = document.createElement('comment'); + var question = document.createElement('question'); + cqHolder.id = commentQuestion[i].id; + comment.textContent = commentQuestion[i].children[2].value; + question.textContent = commentQuestion[i].children[0].textContent; + cqHolder.appendChild(question); + cqHolder.appendChild(comment); + xmlDoc.appendChild(cqHolder); + } + testResultsHolders[testId] = xmlDoc; } // Only other global function which must be defined in the interface class. Determines how to create the XML document. function interfaceXMLSave(){ // Create the XML string to be exported with results var xmlDoc = document.createElement("BrowserEvaluationResult"); - var trackSliderObjects = document.getElementsByClassName('track-slider'); - var commentObjects = document.getElementsByClassName('trackComment'); - var rateMin = 50; - var rateMax = window.innerWidth-50; - for (var i=0; i<trackSliderObjects.length; i++) + for (var i=0; i<testResultsHolders.length; i++) { - var trackObj = document.createElement("audioElement"); - trackObj.id = i; - trackObj.url = audioEngineContext.audioObjects[i].url; - var slider = document.createElement("Rating"); - var rate = Number(trackSliderObjects[i].style.left.substr(0,trackSliderObjects[i].style.left.length-2)); - rate = (rate-rateMin)/rateMax; - slider.innerHTML = Math.floor(rate*100); - var comment = document.createElement("Comment"); - comment.innerHTML = commentObjects[i].value; - trackObj.appendChild(slider); - trackObj.appendChild(comment); - xmlDoc.appendChild(trackObj); + xmlDoc.appendChild(testResultsHolders[i]); } - // Append Pre/Post Questions xmlDoc.appendChild(preTestQuestions); xmlDoc.appendChild(postTestQuestions); return xmlDoc; -} - +} \ No newline at end of file
--- a/apeTool.html Fri Apr 10 10:20:52 2015 +0100 +++ b/apeTool.html Wed Apr 22 18:37:04 2015 +0100 @@ -3,6 +3,7 @@ <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" /> @@ -17,7 +18,11 @@ <!-- 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> - + <script type="text/javascript"> + window.onbeforeunload = function() { + return "Please only leave this page once you have completed the tests. Are you sure you have completed all testing?"; + }; + </script> <!-- Uncomment the following script for automatic loading of projects --> <script> url = 'example_eval/project.xml'; //Project XML document location
--- a/core.js Fri Apr 10 10:20:52 2015 +0100 +++ b/core.js Wed Apr 22 18:37:04 2015 +0100 @@ -6,12 +6,20 @@ */ /* create the web audio API context and store in audioContext*/ -var audioContext; -var projectXML; -var audioEngineContext; -var projectReturn; -var preTestQuestions = document.createElement('PreTest'); -var postTestQuestions = document.createElement('PostTest'); +var audioContext; // Hold the browser web audio API +var projectXML; // Hold the parsed setup XML + +var testXMLSetups = []; // Hold the parsed test instances +var testResultsHolders =[]; // Hold the results from each test for publishing to XML +var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order +var currentTestHolder; // Hold any intermediate results during test - metrics +var audioEngineContext; // The custome AudioEngine object +var projectReturn; // Hold the URL for the return +var preTestQuestions = document.createElement('PreTest'); // Store any pre-test question response +var postTestQuestions = document.createElement('PostTest'); // Store any post-test question response + +// Add a prototype to the bufferSourceNode to reference to the audioObject holding it +AudioBufferSourceNode.prototype.owner = undefined; window.onload = function() { // Function called once the browser has loaded all files. @@ -50,6 +58,14 @@ interfaceJS.setAttribute("type","text/javascript"); if (interfaceType.value == 'APE') { interfaceJS.setAttribute("src","ape.js"); + + // APE comes with a css file + var css = document.createElement('link'); + css.rel = 'stylesheet'; + css.type = 'text/css'; + css.href = 'ape.css'; + + document.getElementsByTagName("head")[0].appendChild(css); } document.getElementsByTagName("head")[0].appendChild(interfaceJS); } @@ -74,6 +90,7 @@ var submitDiv = document.getElementById('download-point'); submitDiv.appendChild(a); } + return submitDiv; } function AudioEngine() { @@ -93,48 +110,19 @@ this.outputGain.connect(audioContext.destination); this.fooGain.connect(audioContext.destination); + // Create the timer Object + this.timer = new timer(); + // Create session metrics + this.metric = new sessionMetrics(this); + + this.loopPlayback = false; + // 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 - if (this.status == 0) { - // First get current clock - var timer = audioContext.currentTime; - // Add 3 seconds - timer += 3.0; - - // Send play to all tracks - for (var i=0; i<this.audioObjects.length; i++) - { - this.audioObjects[i].play(timer); - } - this.status = 1; - } - }; + this.play = function(){}; - this.stop = function() { - // Send stop and reset command to all playback buffers - if (this.status == 1) { - for (var i=0; i<this.audioObjects.length; i++) - { - this.audioObjects[i].stop(); - } - this.status = 0; - } - }; - - this.selectedTrack = function(id) { - for (var i=0; i<this.audioObjects.length; i++) - { - if (id == i) { - this.audioObjects[i].outputGain.gain.value = 1.0; - } else { - this.audioObjects[i].outputGain.gain.value = 0.0; - } - } - }; + this.stop = function(){}; this.newTrack = function(url) { @@ -142,7 +130,7 @@ // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin' // Create the audioObject with ID of the new track length; - audioObjectId = this.audioObjects.length + audioObjectId = this.audioObjects.length; this.audioObjects[audioObjectId] = new audioObject(audioObjectId); // AudioObject will get track itself. @@ -157,16 +145,16 @@ this.id = id; this.state = 0; // 0 - no data, 1 - ready this.url = null; // Hold the URL given for the output back to the results. + this.metric = new metricTracker(); // Create a buffer and external gain control to allow internal patching of effects and volume leveling. - this.bufferNode = audioContext.createBufferSource(); + this.bufferNode = undefined; this.outputGain = audioContext.createGain(); // Default output gain to be zero this.outputGain.gain.value = 0.0; // 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 @@ -174,15 +162,16 @@ this.buffer; this.play = function(startTime) { + this.bufferNode = audioContext.createBufferSource(); + this.bufferNode.connect(this.outputGain); + this.bufferNode.buffer = this.buffer; + this.bufferNode.loop = audioEngineContext.loopPlayback; 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; - this.bufferNode.loop = true; + this.bufferNode = undefined; }; this.constructTrack = function(url) { @@ -197,8 +186,6 @@ request.onloadend = function() { audioContext.decodeAudioData(request.response, function(decodedData) { audioObj.buffer = decodedData; - audioObj.bufferNode.buffer = audioObj.buffer; - audioObj.bufferNode.loop = true; audioObj.state = 1; }, function(){ // Should only be called if there was an error, but sometimes gets called continuously @@ -212,4 +199,115 @@ request.send(); }; +} + +function timer() +{ + /* Timer object used in audioEngine to keep track of session timings + * Uses the timer of the web audio API, so sample resolution + */ + this.testStarted = false; + this.testStartTime = 0; + this.testDuration = 0; + this.minimumTestTime = 0; // No minimum test time + this.startTest = function() + { + if (this.testStarted == false) + { + this.testStartTime = audioContext.currentTime; + this.testStarted = true; + this.updateTestTime(); + audioEngineContext.metric.initialiseTest(); + } + }; + this.stopTest = function() + { + if (this.testStarted) + { + this.testDuration = this.getTestTime(); + this.testStarted = false; + } else { + console.log('ERR: Test tried to end before beginning'); + } + }; + this.updateTestTime = function() + { + if (this.testStarted) + { + this.testDuration = audioContext.currentTime - this.testStartTime; + } + }; + this.getTestTime = function() + { + this.updateTestTime(); + return this.testDuration; + }; +} + +function sessionMetrics(engine) +{ + /* Used by audioEngine to link to audioObjects to minimise the timer call timers; + */ + this.engine = engine; + this.lastClicked = -1; + this.data = -1; + this.initialiseTest = function(){}; +} + +function metricTracker() +{ + /* Custom object to track and collect metric data + * Used only inside the audioObjects object. + */ + + this.listenedTimer = 0; + this.listenStart = 0; + this.initialPosition = -1; + this.movementTracker = []; + this.wasListenedTo = false; + this.wasMoved = false; + this.hasComments = false; + + this.initialised = function(position) + { + if (this.initialPosition == -1) { + this.initialPosition = position; + } + }; + + this.moved = function(time,position) + { + this.wasMoved = true; + this.movementTracker[this.movementTracker.length] = [time, position]; + }; + + this.listening = function(time) + { + if (this.listenStart == 0) + { + this.wasListenedTo = true; + this.listenStart = time; + } else { + this.listenedTimer += (time - this.listenStart); + this.listenStart = 0; + } + }; +} + +function randomiseOrder(input) +{ + // This takes an array of information and randomises the order + var N = input.length; + var K = N; + var holdArr = []; + for (var n=0; n<N; n++) + { + // First pick a random number + var r = Math.random(); + // Multiply and floor by the number of elements left + r = Math.floor(r*input.length); + // Pick out that element and delete from the array + holdArr.push(input.splice(r,1)[0]); + } + return holdArr; } \ No newline at end of file
--- a/docs/ProjectSpecificationDocument.tex Fri Apr 10 10:20:52 2015 +0100 +++ b/docs/ProjectSpecificationDocument.tex Wed Apr 22 18:37:04 2015 +0100 @@ -22,12 +22,7 @@ \section{Setup tag} The setup tag specifies certain global test settings including: the interface type to use, the project return location and any other setup instructions. - -An example of this tag could be: - -\texttt{<setup interface="APE" projectReturn="http://project.return.url/goes/here" />} - -The setup should not have any element or any children. +Any general pre/post test questions must be specified in the relevant children tag. Any enabled metrics must also be specified in the metric child node. \subsection{Attributes} \begin{itemize} @@ -51,6 +46,7 @@ \item \texttt{sampleRate} - Optional, Number. If your test requires a specific sample rate, this should be set to the desired sample rate in Hertz. This does not set the browser to the correct sample rate, but forces the browser to check the sample rate matches. If this is undefined, no sample rate matching will occur. \item \texttt{randomiseOrder} - Optional, Boolean String. Defaults to false. Determine if the track order should be randomised. Must be true or false. \item \texttt{repeatCount} - Optional, Number. Defaults to 0 (ie: no repeats). The number of times a test should be repeated. +\item \texttt{loop} - Optional, Boolean String. Defaults to false. Enable if audioElements should loop their playback or not. \end{itemize} \subsection{Elements} @@ -62,23 +58,21 @@ \subsection{Attributes} \begin{itemize} +\item \texttt{id} - Mandatory, String. Must give a string or number to identify each audio element. This id is used in the output to identify each track once randomised. \item \texttt{url} - Mandatory, String. Contain the full URL to the track. If the Tracks tag hostURL is set, concatenate this tag with the hostURL attribute to obtain the full URL. -\item \texttt{ID} - Optional, Number. Give the track a specific ID for the return. This will help if using multiple projects to spread a test across multiple sessions and/or locations, where each test will not use all the samples. If one audioElement is given the ID 3, the next audioElement (assuming it does not have an ID set itself) will have the ID of 4. This continues until the next audioElement with the ID attribute set is reached. \end{itemize} -\section{interfaceSetup} +\section{interface tag} -This is contained within the audioHolder tag and outlines test instance specific requirements. These include the following children tags: title - question title at the top of the page, scaleMin - minimum scale value text, scaleMax - maximum scale value text, scaleMid - halfway scale value text. There is also a preTest tag here allowing for specific questions/statements to be presented before running this specific test. +This is contained within the audioHolder tag and outlines test instance specific requirements. These include the following children tags: +\begin{itemize} +\item 'title' - Contains the test title to be shown at the top of the page. Can only be one title node per interface. +\item 'scale' - Takes the attribute position to be a value between 0 and 100 indicating where on the scale to place the text contained inside. Can be multiple scale tags per interface. +\end{itemize} \section {CommentQuestion tag} -This is a 1st level tag (same level as AudioHolder and setup). This allows another question and comment box to be presented on the page. The results of these are passed back in the results XML with both the comment and the question. - -\subsection{Attributes} -None. - -\subsection{Elements} -The question to be presented. +This is a 1st level tag (same level as AudioHolder and setup). This allows another question and comment box to be presented on the page. The results of these are passed back in the results XML with both the comment and the question. The id attribute is set to keep track at the results XML. \section {PreTest tag and PostTest tag} @@ -161,29 +155,51 @@ \begin{lstlisting} <?xml version="1.0" encoding="utf-8"?> <BrowserEvalProjectDocument> - <setup interface="APE" projectReturn="null" /> - <AudioHolder hostURL="example_eval/" sampleRate="44100" - sampleRateExplicit="true"> - <audioElements url="0.wav" ID="0"/> - <audioElements url="1.wav"/> - <audioElements url="2.wav"/> - <audioElements url="3.wav"/> - <audioElements url="4.wav"/> - <audioElements url="5.wav"/> - <audioElements url="6.wav"/> - <audioElements url="7.wav"/> - <audioElements url="8.wav"/> - <audioElements url="9.wav"/> - <audioElements url="10.wav"/> - </AudioHolder> - <CommentQuestion>What is your mixing experiance</CommentQuestion> - <PreTest> - <statement>Please listen to all mixes</statement> - </PreTest> - <PostTest> - <statement>Thank you for taking this listening test.</statement> - <question>Please enter your name.</question> - </PostTest> + <setup interface="APE" projectReturn="null" randomiseOrder='true' collectMetrics='true'> + <PreTest> + <statement>Please listen to all mixes</statement> + <question id="location" mandatory="true">Please enter your listening location</question> + </PreTest> + <PostTest> + <statement>Thank you for taking this listening test.</statement> + <question id="SessionID">Please enter your name.</question> + </PostTest> + <Metric> + <metricEnable>testTimer</metricEnable> + <metricEnable>elementTimer</metricEnable> + <metricEnable>elementTracker</metricEnable> + <metricEnable>elementFlagListenedTo</metricEnable> + <metricEnable>elementFlagMoved</metricEnable> + </Metric> + </setup> + <audioHolder id='0' hostURL="example_eval/" sampleRate="44100" randomiseOrder='true' repeatCount='1'> + <interface> + <title>Example Test Question</title> + <scale position="0">Min</scale> + <scale position="100">Max</scale> + <scale position="50">Middle</scale> + <scale position="20">20</scale> + </interface> + <audioElements url="0.wav" id="0"/> + <audioElements url="1.wav" id="1"/> + <audioElements url="2.wav" id="2"/> + <audioElements url="3.wav" id="3"/> + <audioElements url="4.wav" id="4"/> + <audioElements url="5.wav" id="5"/> + <audioElements url="6.wav" id="6"/> + <audioElements url="7.wav" id="7"/> + <audioElements url="8.wav" id="8"/> + <audioElements url="9.wav" id="9"/> + <audioElements url="10.wav" id="10"/> + <CommentQuestion id='mixingExperiance'>What is your mixing experiance</CommentQuestion> + <PreTest> + <statement>Start the Test 3</statement> + </PreTest> + <PostTest> + <statement>Please take a break before the next test</statement> + <question id="testComment">How did you find the test</question> + </PostTest> + </audioHolder> </BrowserEvalProjectDocument> \end{lstlisting}
--- a/docs/ResultsSpecificationDocument.tex Fri Apr 10 10:20:52 2015 +0100 +++ b/docs/ResultsSpecificationDocument.tex Wed Apr 22 18:37:04 2015 +0100 @@ -34,9 +34,7 @@ \end{itemize} \subsubsection{Value} -One of these elements per track, containing the value between 0 and 100 relating the user rating of the track. This is a mandatory element. -% float or int? (I, Brecht, am sort of indifferent here, it used to be down to .01 or something before, so maybe that or .1) -% Nick - Can be a float, was trying to remove/reduce ambiguity from pixel position. But can easily make it to .01 +One of these elements per track, containing the floating value between 0 and 1 relating the user rating of the track. This is a mandatory element. \subsubsection{Comment} One of these elements per track, containing any commenting data from the interface text boxes. Has the two following child nodes. @@ -64,7 +62,4 @@ This will contain any captured session data. Currently not implemented but here for future referencing. % I used to have a 'global' comment for each 'session' as well -\section{Globals} -Contains any comment boxes which were specified in the APE project specification with the comment ID, comment text and the comment results. - \end{document}
--- a/docs/SMC15/smc2015template.bbl Fri Apr 10 10:20:52 2015 +0100 +++ b/docs/SMC15/smc2015template.bbl Wed Apr 22 18:37:04 2015 +0100 @@ -21,9 +21,36 @@ \providecommand{\BIBdecl}{\relax} \BIBdecl +\bibitem{webaudioapi} +W3C, ``Web audio api,'' 2015, \url{http://webaudio.github.io/web-audio-api/} + [Accessed 22nd April, 2015]. + +\bibitem{webaudiodemo} +------, ``Web audio / midi demo list,'' 2015, + \url{http://webaudio.github.io/demo-list/} [Accessed 22nd April, 2015]. + +\bibitem{bbcradiophonics} +B.~R\&D, ``Recreating the sounds of the bbc radiophonic workshop using the web + audio api,'' 2012, \url{http://webaudio.prototyping.bbc.co.uk/} [Accessed + 22nd April, 2015]. + +\bibitem{bech} +S.~Bech and N.~Zacharov, \emph{Perceptual Audio Evaluation - Theory, Method and + Application}.\hskip 1em plus 0.5em minus 0.4em\relax John Wiley \& Sons, + 2007. + \bibitem{deman2014b} B.~De~Man and J.~D. Reiss, ``{APE}: {A}udio {P}erceptual {E}valuation toolbox for {MATLAB},'' in \emph{136th Convention of the Audio Engineering Society}, April 2014. +\bibitem{mushra} +\emph{Method for the subjective assessment of intermediate quality level of + coding systems}.\hskip 1em plus 0.5em minus 0.4em\relax Recommendation {ITU-R + BS.1534-1}, 2003. + +\bibitem{mozdevSupportedMedia} +Mozilla, ``Media formats supported by the html audio and video elements,'' + 2015. + \end{thebibliography}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/SMC15/smc2015template.bib Wed Apr 22 18:37:04 2015 +0100 @@ -0,0 +1,56 @@ +%% This BibTeX bibliography file was created using BibDesk. +%% http://bibdesk.sourceforge.net/ + +%% Created for Brecht De Man at 2015-04-20 18:22:49 +0100 + + +%% Saved with string encoding Unicode (UTF-8) + + + +@book{bech, + Author = {Bech, S. and Zacharov, N.}, + Publisher = {John Wiley \& Sons}, + Title = {Perceptual Audio Evaluation - Theory, Method and Application}, + Year = {2007}} + +@book{mushra, + Keywords = {standard}, + Publisher = {Recommendation {ITU-R BS.1534-1}}, + Title = {Method for the subjective assessment of intermediate quality level of coding systems}, + Year = {2003}} + +@conference{deman2014b, + Author = {De Man, Brecht and Joshua D. Reiss}, + Booktitle = {136th Convention of the Audio Engineering Society}, + Month = {April}, + Title = {{APE}: {A}udio {P}erceptual {E}valuation toolbox for {MATLAB}}, + Year = {2014}} + +@misc{webaudioapi, + Author = {W3C}, + Title = {Web Audio API}, + Year = {2015}, + Note = {\url{http://webaudio.github.io/web-audio-api/} [Accessed 22nd April, 2015]} + } + +@misc{webaudiodemo, + Author = {W3C}, + Title = {Web Audio / MIDI Demo List}, + Year = {2015}, + Note = {\url{http://webaudio.github.io/demo-list/} [Accessed 22nd April, 2015]} + } + +@misc{bbcradiophonics, + Author = {BBC R\&D}, + Title = {Recreating the sounds of the BBC Radiophonic Workshop using the Web Audio API}, + Year = {2012}, + Note = {\url{http://webaudio.prototyping.bbc.co.uk/} [Accessed 22nd April, 2015]} + } + +@misc{mozdevSupportedMedia, + Author = {Mozilla}, + Title = {Media formats supported by the HTML audio and video elements}, + Year = {2015}, + Node = {\url{https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats} [Accessed 22nd April, 2015]} + } \ No newline at end of file
--- a/docs/SMC15/smc2015template.tex Fri Apr 10 10:20:52 2015 +0100 +++ b/docs/SMC15/smc2015template.tex Wed Apr 22 18:37:04 2015 +0100 @@ -10,6 +10,8 @@ \usepackage[english]{babel} \usepackage{cite} +\hyphenation{Java-script} + %%%%%%%%%%%%%%%%%%%%%%%% Some useful packages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%% See related documentation %%%%%%%%%%%%%%%%%%%%%%%%%% %\usepackage{amsmath} % popular packages from Am. Math. Soc. Please use the @@ -25,7 +27,7 @@ %user defined variables -\def\papertitle{APE FOR WEB: A BROWSER-BASED EVALUATION TOOL FOR AUDIO} %? +\def\papertitle{WEB AUDIO EVALUATION TOOL: A BROWSER-BASED LISTENING TEST ENVIRONMENT} %? \def\firstauthor{Nicholas Jillings} \def\secondauthor{Brecht De Man} \def\thirdauthor{David Moffat} @@ -132,28 +134,42 @@ \capstarttrue % \begin{abstract} -Place your abstract at the top left column on the first page. -Please write about 150-200 words that specifically highlight the purpose of your work, -its context, and provide a brief synopsis of your results. -Avoid equations in this part.\\ -TOTAL PAPER: Minimum 4 pages, 6 preferred, max. 8 (6 for demos/posters)\\ +New functionality in HTML5, notably its Web Audio API, allow for increasingly powerful applications in the browser. % is this true? +Perceptual evaluation tests for audio, where the subject assesses certain qualities of different audio fragments through a graphical user interface and/or text boxes, require playback of audio and rapid switching between different files. % what else? +The advantage of a web application is easy deployment on any platform, without requiring any other application or library, easy storing of results on a server. +[...] +%Place your abstract at the top left column on the first page. +%Please write about 150-200 words that specifically highlight the purpose of your work, +%its context, and provide a brief synopsis of your results. +%Avoid equations in this part.\\ + \end{abstract} % \section{Introduction}\label{sec:introduction} +TOTAL PAPER: Minimum 4 pages, 6 preferred, max. 8 (6 for demos/posters)\\ + +%NICK: examples of what kind of audio applications HTML5 has made possible, with references to publications (or website)\\ + +The Web Audio API is a high-level JavaScript API designed for real-time processing audio inside the browser through various processing nodes \cite{webaudioapi}. Various web sites have used the web audio API for either creative purposes, such as drum machines and score creation tools \cite{webaudiodemo}, %http://webaudio.github.io/demo-list/ +others from the list show real-time captured audio processing such as room reverberation tools and a phase vocoder from the system microphone. The BBC Radiophonic Workshop shows effects used on famous TV shows such as Doctor Who, being simulated inside the browser \cite{bbcradiophonics}. %http://webaudio.prototyping.bbc.co.uk/ +Another example is the BBC R\&D automatic compressor which applies a dynamic range compressor on a radio station which dynamically adjusts the compressor settings to match the listener envrionment. % The paper for this has not been released yet by AES... + background (types of research where this type of perceptual evaluation of audio is relevant)\\ -multiple stimulus perceptual evaluation (reference to Bech etc.)\\ +multiple stimulus perceptual evaluation \cite{bech}\\ prior work: \cite{deman2014b} in MATLAB, much less easy to deploy, and often stops working due to version updates \\ goal, what are we trying to do? \\ +other background papers (some SMC?)\\ + [Previously, due to limited functionality of HTML, ..., it was not possible to design this type of interfaces with such high quality audio... ] -\section{Design considerations}\label{sec:designconsiderations} +%\section{Design considerations}\label{sec:designconsiderations} % not necessary? with next (/previous) section? We present a browser-based perceptual evaluation tool for audio that ... \\ @@ -167,74 +183,129 @@ %section with overview of the structure of the input and output files, perhaps with graph or table -The tool runs entirely inside the browser through the new HTML5 Web Audio API. The API is supported by most major web browsers (except Internet Explorer) and allows for constructing a chain of audio processing elements to produce a high quality, real time signal process to manipulate audio streams. The API supports multi-channel processing and has an accurate playback timer for precise scheduled playback control. The web audio API is controlled through the browser JavaScript and is therefore highly controllable. The Web Audio API processing is all controlled in a separate thread to the main JavaScript thread, meaning there is no blocking due to real time processing. +The tool runs entirely inside the browser through the new HTML5 Web Audio API. The API is supported by most major web browsers (with the exception of Internet Explorer) and allows for constructing a chain of audio processing elements to produce a high quality, real time signal process to manipulate audio streams. The API supports multi-channel processing and has an accurate playback timer for precise scheduled playback control. The Web Audio API is controlled through the browser JavaScript and is therefore highly configurable. The Web Audio API processing is all controlled in a separate thread to the main JavaScript thread, meaning there is no blocking due to real time processing. + +\subsection{Interface}\label{sec:interface} %elsewhere? + +At this point, we have implemented the interface of the MATLAB-based APE Perceptual Evaluation for Audio toolbox \cite{deman2014b}, which shows one marker for each simultaneously evaluated audio fragment on one or more horizontal axes (to rate/rank the respective fragments), as well as a comment box for every marker, and any extra text boxes for extra comments. See \ref{fig:interface} for an example of the interface, with 10 fragments and one axis. However, the back end of this test environment allows for many more established and novel interfaces for listening tests, particularly ones where the subject only assesses audio without manipulating it (i.e. method of adjustment, which would require additional features to be implemented). + +%\begin{figure*}[htbp] +%\begin{center} +%\includegraphics[width=0.9\textwidth]{interface.png} +%\caption{Example of interface, with 1 axis and 10 fragments} +%\label{fig:interface} +%\end{center} +%\end{figure*} + + \subsection{Architecture}\label{sec:architecture} The web tool itself is split into several files to operate: \begin{itemize} -\item apeTool.html: The main index file to load the scripts, this is the file the browser must request to load -\item core.js: Contains functions and objects to manage the audio control, audio objects for testing and loading of files -\item ape.js: Parses setup files to create the interface as instructed, following the same style chain as the MATLAB APE Tool. +\item \texttt{apeTool.html}: The main index file to load the scripts, this is the file the browser must request to load. %This should be renamed index.html, but will wait until the file is renamed in the repo. +\item \texttt{core.js}: Contains functions and objects to manage the audio control, audio objects for testing and loading of files. +\item \texttt{ape.js}: Parses setup files to create the interface as instructed, following the same style chain as the MATLAB APE Tool \cite{deman2014b}. \end{itemize} -The HTML file loads the core.js file with it along with a few other ancillary files (such as the jQuery javascript extensions), the browser JavaScript begins to execute the on page instructions, which gives the URL of the test setup XML document (outlined in the next section). The core.js parses this document and executes the function in ape.js to build the web page with the given audio files. The reason for separating these two files is to allow for further interface designs (such as Mushra or A-B tests) to be used, which would still require the same underlying core functions outlined in core.js +The HTML file loads the \texttt{core.js} file along with a few other ancillary files (such as the jQuery JavaScript extensions)% should we cite jQuery.... https://jquery.com/ +, at which point the browser JavaScript begins to execute the on-page instructions, which gives the URL of the test setup XML document (outlined in the next section). \texttt{core.js} parses this document and executes the function in \texttt{ape.js} to build the web page with the given audio files. The reason for separating these two files is to allow for further interface designs (such as MUSHRA \cite{mushra} or A-B tests \cite{bech}) to be used, which would still require the same underlying core functions outlined in \texttt{core.js}, see also Section \ref{sec:interface}. -The ape.js file has only two main functions: loadInterface(xmlDoc) and interfaceXMLSave(). The first function is called to build the interface once the setup document has been loaded. This includes creating the slider interface to rate the tracks and creating the comment boxes bellow. The bars in the slider ranking at the top of the page are randomly spaced. It also instructs the audio engine in the core.js to create the audio objects. The audio objects are custom built audio nodes built on the web audio API. They consist of a bufferSourceNode (a node which holds a buffer of audio samples for playback) and a gainNode. These are then connected to the audioEngine (itself a custom web audio node) containing a gainNode (where the various audio Objects connect to) for summation before passing the output to the destination Node, a fixed node created where the browser then passes the audio information to the system sound device. +The \texttt{ape.js} file has several main functions but the most important are \textit{loadInterface(xmlDoc)}, \textit{loadTest(id)}, \textit{pageXMLSave(testId)} and \textit{interfaceXMLSave()}. \textit{loadInterface(xmlDoc)} is called to decode the supplied project document in respect for the interface specified and define any global structures (such as the slider interface). It also identifies the number of pages in the test and randomises the order, if specified to do so. This is the only madatory function in any of the interface JavaScript files as this is called by \texttt{core.js} when the document is ready. The design style is such that \texttt{core.js} cannot 'see' any interface specific functions and therefore cannot assume any are available. Therefore the \textit{loadInterface(xmlDoc)} is very important to setup the entire test environment. It can therefore be assumed that the interface files can 'see' the \texttt{core.js} file and can therefore not only interact with it, but also modify it. -When an audioObject is created, the URL of the audio sample to load is given to it. This is downloaded into the browser asynchronously using the XMLHttpRequest object. This allows for downloading of any file into the JavaScript environment for further processing. It is particularly useful for the web audio API because it supports downloading of files in their binary form, allowing a perfect copy. Once the asynchronous download is complete, the file is then decoded using the web audio API offline decoder. This uses the browser available decoding schemes to decode the audio files into raw float32 arrays, which are in-turn passed to the relevant audioObject bufferSourceNode for playback. +Each test page is loaded using \textit{loadTest(id)} which performs two major tasks: to populate the interface with the slider elements and comment boxes; and secondly to load the audio fragments and construct the backend audio graph. The markers on the slider at the top of the page are positioned randomly, to minimise the bias that may be introduced when the initial positions are near the beginning, end or middle of the slider. While another approach is to place the markers outside of the slider bar at first and have the subject drag them in, the authors believe this doesn't encourage careful consideration and comparison of the different fragments as the implicit goal of the test becomes to audition and drag each fragment in just once, rather than to compare all fragments rigorously. -Browsers support various audio file formats and are not consistent in any format. One sure format that all browsers support is the WAV format. Although not a compact, web friendly format, most transport systems are of a high enough bandwidth this should not be a problem. However one problem is that of sample rate. On loading, the browser uses the sample rate assigned by the system sound device. The browser does not have the ability to request a different sound rate. Therefore the default operation when an audio file is loaded with a different sample rate to that of the system is to convert the sample rate. To provide a check for this, the desired sample rate can be supplied with the setup XML and checked against. If the sample rates do not match, a browser alert window is shown asking for the sample rate to be correctly adjusted. This happens before any loading or decoding of audio files. Only once the sample rates match will the system actually fetch any files, keeping down requests for the larger files until they are actually needed. +\textit{loadTest(id)} in \texttt{ape.js} also instructs the audio engine in \texttt{core.js} to create the \textit{audioObject} These are custom audio nodes, one representing each audio element specified in each page. +They consist of a \textit{bufferSourceNode} (a node which holds a buffer of audio samples for playback) and a \textit{gainNode}. There are various functions applied depending on metric collection which record the interaction with the audio element. These nodes are then connected to the \textit{audioEngine} (itself a custom web audio node) containing a \textit{gainNode} (where the various \textit{audioObject} connect to) for summation before passing the output to the \textit{destinationNode}, a permanent fixed node of the Web Audio API created as the master output where %through which? +the browser then passes the audio information to the system sound device. +% audio object/audioObject/Audio Object: consistency? -During playback, the playback nodes loop indefinitely until playback is stopped. The gain nodes in the audioObjects enable dynamic muting of nodes. When a bar in the sliding ranking is clicked, the audio engine mutes all audioObjects and un-mutes the clicked one. Therefore, if the audio samples are perfectly aligned up and of the same sample length, they will remain perfectly aligned with each other. +When an \textit{audioObject} is created, it is given the URL of the audio sample to load. This is downloaded into the browser asynchronously using the \textit{XMLHttpRequest} object. This allows for downloading of any file into the JavaScript environment for further processing. It is particularly useful for the Web Audio API because it supports downloading of files in their binary form for decoding by the Web Audio offline decoder. +Once the asynchronous download is complete, the file is then decoded using the Web Audio API offline decoder. This uses the browser available decoding schemes to decode the audio files into raw float32 arrays, which are in turn passed to the relevant audioObject \textit{bufferSourceNode} for playback. -\subsection{Setup and Results Formats}\label{sec:setupresultsformats} +Once each page of the test is completed, identified by pressing the Submit button, the \textit{pageXMLSave(testId)} is called to store all of the collected data until all pages of the test are completed. After the final test and any post-test questions are completed, the \textit{interfaceXMLSave()} function is called. This function generates the final XML file for submission as outlined in Section \ref{sec:setupresultsformats}. -Setup and the results both use the common XML document format to outline the various parameters. The setup file contains all the information needed to initialise a test session. Several Nodes can be defined to outline the audio samples to use, questions to be asked and any pre- or post-test questions or instructions. Having one document to modify allows for quick manipulation in a 'human readable' form to create new tests, or adjust current ones, without needing to edit which web files. +Browsers support various audio file formats and are not consistent in any format. Currently the Web Audio API is best supported in Chrome, Firefox, Opera and Safari. All of these support the use of the uncompressed WAV format. Although not a compact, web friendly format, most transport systems are of a high enough bandwidth this should not be a problem. Ogg Vorbis is another well supported format across the 4 supported major desktop browsers, as well as MP3 (although Firefox may not support all MP3 types) \cite{mozdevSupportedMedia}. %https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats +One potential issue is that the browser uses the sample rate assigned by the system sound device, % is this problem particular to WAV? Seems that way from the text +and does not have the ability to request a different one. Therefore, the default operation when an audio file is loaded with a different sample rate to that of the system is to convert the sample rate. To provide a check for this, the desired sample rate can be supplied with the setup XML and checked against. If the sample rates do not match, a browser alert window is shown asking for the sample rate to be correctly adjusted. +As this happens before any loading or decoding of audio files, the system will only fetch files as soon as the system's sample rate meets any requirements, avoiding requests for large files until they are actually needed. -The results file is dynamically generated by the interface upon clicking the submit button. There will be checks, depending on the setup file, to ensure that all tracks have been evaluated and their positions in the slider moved. The XML returned contains a node per audioObject and contains its rating in the slider and any comments written in its associated comment box. The rating returned is normalised to be within a integer range of 0 to 100. This normalises the pixel representation of different browser windows. If a window for instance is only 1280 wide, reporting its pixel position is not representative to a display with a width of 1920. +%During playback, the playback nodes loop indefinitely until playback is stopped. The gain nodes in the \textit{audioObject}s enable dynamic muting of nodes. When a bar in the sliding ranking is clicked, the audio engine mutes all \textit{audioObject}s and un-mutes the clicked one. Therefore, if the audio samples are perfectly aligned up and of the same sample length, they will remain perfectly aligned with each other. +% Don't think this is relevant anymore -The pre- and post-test options allow for comments or questions to be presented before or after the test. These are automatically generated based upon the given setup XML and allow nearly any form of question and comment to be included in a window on its own. Questions are stored and presented in the response section labelled 'pretest' and 'posttest' along with the question ID and its response. Questions can be made optionally mandatory. Example questions may involve entering mixing experience or listening environment. +\subsection{Setup and results formats}\label{sec:setupresultsformats} -The results will also contain information collected by any defined pre/post questions. These are referenced against the setup XML by using the same ID as well as printing in the same question, so readable responses can be obtained. Future development will also evolve to include any session data, such as the browser the tool was used in, how long the test took and any other metrics. Currently the results files are downloaded on the user side of the browser as a .xml file to be manually returned. However the end goal is to allow the XML files to be submitted over the web to a receiving server to store them, allowing for automated collection. +Setup and the results both use the common XML document format to outline the various parameters. The setup file determines which interface to use, the location of audio files, how many pages and other general setup rules to define the testing envrionment. Having one document to modify allows for quick manipulation in a `human readable' form to create new tests, or adjust current ones, without needing to edit multiple web files. % I mean the .js and .html files, though not sure if any better. +The setup document has several defined nodes and structure which are documented with the source code. For example there is a section for general setup options where the pre-test and post-test questions and statements are defined: -Here is an example of the setup XML and the results XML: -% Should we include an Example of the input and output XML structure?? +\texttt{<question id="location" mandatory="true"> Please enter your listening location \\ </question>} -\section{Applications}\label{sec:applications} %? -discussion of use of this toolbox (possibly based on a quick mock test using my research data, to be repeated with a large number of participants and more data later)\\ - -\subsection{Listening Environment Standardisation} - -In order to reduce the impact of having a non-standardised listening environment and unobservable participants, a series of pre-test standard questions have been put together to ask every participant. The first part of this is that every participant is asked to carry out the test, wherever possible, with a pair of quality headphones. +From the above example it can be seen that a question box should be generated, with the id 'location' and it is mandatory to answer. The question is in the PreTest node meaning it will appear before any testing will begin. When the result for the entire test is shown, then this will appear in the PreTest node of the response with the id 'location' allowing it to be found easily. This outlines the importance of having clear and meaningful ID values. Pre- and post-test dialog boxes allow for comments or questions to be presented before or after the test, to convey listening test instructions, gather information about the subject, listening environment, and overall experience of the test. + +Further options in the setup file are: \begin{itemize} -\item Name (text box) -\item I am happy for name to be used in an academic publication (check box) -\item First Language (text box) -\item Location eg. country, city (text box) -\item Playback System (ratio box (Headphones or Speaker)) -\item Make and Model of Playback System (text box) -\item Please assess how good you believe your hearing to be, where 1 is deaf, 10 is professional critical listener (Dropdown box 1-10) +\item \textbf{Snap to corresponding position}: When this is enabled, and a fragment is playing, the playhead skips to the same position in the next fragment that is clicked. If it is not enabled, every fragment is played from the start. +\item \textbf{Loop fragments}: Repeat current fragment when end is reached, until the `Stop audio' or `Submit' button is clicked. +\item \textbf{Comments}: Displays a separate comment box for each fragment in the page. +\item \textbf{General comment}: One comment box, additional to the individual comment boxes, to comment on the test or a feature that some or all of the fragments share. +\item \textbf{Resampling}: When this is enabled, tracks are resampled to match the subject's system's sample rate (a default feature of the Web Audio API). When it is not, an error is shown when the system does not match the requested sample rate. +\item \textbf{Randomise page order}: Randomises the order in which different `pages' are presented. % are we calling this 'pages'? +\item \textbf{Randomise fragment order}: Randomises the order and numbering of the markers and comment boxes corresponding with the fragments. This permutation is stored as well, to be able to interpret references to the numbers in the comments (such as `this is much [brighter] then 4'). +\item \textbf{Require playback}: Require that each fragment has been played at least once, if not in full. +\item \textbf{Require full playback}: If `Require playback' is active, require that each fragment has been played in full. +\item \textbf{Require moving}: Require that each marker is moved (dragged) at least once. +\item \textbf{Require comments}: This option allows requiring the subject to require a comment for each track. +\item \textbf{Repeat test}: Number of times test should be repeated (none by default), to allow familiarisation with the content and experiment, and to investigate consistency of user and variability due to familiarity. +% explanation on how this is implemented? \end{itemize} +When one of these options is not included in the setup file, they assume a default value. -There are also a series of considerations that have been made towards ensuring there is a standardised listening environment, so it is possible to -\begin{itemize} -\item Begin with standardised listening test - to confirm listening experience -\item Perform loudness equalisation on all tracks -\\** OR THIS SHOULD BE DONE BEFORE THE EXPERIMENT -\item Randomise order of tests -\item Randomise order of tracks in each test -\item Repeat each experiment a number of times -\\** TO REMOVE THE FAMILIARISATION WITH EXPERIMENT VARIABLE -\\** TO ENSURE CONSISTENCY OF USER -\item Track all user interactions with system -\end{itemize} +% loop, snap to corresponding position, comments, 'general' comment, require same sampling rate, different types of randomisation +The results file is dynamically generated by the interface upon clicking the `Submit' button. This also executes checks, depending on the setup file, to ensure that all tracks have been played back, rated and commented on. The XML output returned contains a node per audioObject and contains both the corresponding marker's position and any comments written in the associated comment box. The rating returned is normalised to be a value between 0 and 1, normalising the pixel representation of different browser windows. +The results will also contain information collected by any defined pre/post questions. These are referenced against the setup XML by using the same ID so readable responses can be obtained. Taking from the earlier example of setting up a pre-test question, an example reponse would be shown as the following. +\texttt{<comment id="location"> Queen Mary's \\ College </comment>} +Each page of testing is returned with the results of the entire page included in the structure. One 'audioElement' node is created per audio fragment per page, along with its ID. This includes several child nodes including the value holding the rating between 0 and 1, and any metrics collected. These include how long the element was listened for, the initial position, boolean flags if the element was listened to, if the element was moved and if the element comment box had any comment. Furthermore, each user action (manipulation of any interface element, such as playback or moving a marker) is logged along with a the corresponding time code and stored or sent along with the results. + +Future development will also evolve to include any session data, such as the browser the tool was used in. Currently the results files are downloaded on the user side of the browser as a .xml file to be manually returned. However the end goal is to allow the XML files to be submitted over the web to a receiving server to store them, allowing for automated collection. + + % right? + +%Here is an example of the setup XML and the results XML: % perhaps best to refer to each XML after each section (setup <> results) +% Should we include an Example of the input and output XML structure?? --> Sure. + +An example of the returned \textit{audioElement} node in the results XML file is as follows. + +\texttt{<audioelement id="8"> \\ +<comment> \\ +<question>Comment on track 0</question> \\ +<response> The drums were punchy </response> \\ +</comment> \\ +<value> 0.25169491525423726 </value> \\ +<metric> \\ +<metricresult id="elementTimer"> \\ 2.3278004535147385< /metricresult> \\ +<metricresult id="elementTrackerFull"> \\ +<timepos id="0"> \\ +<time>1.7937414965986385</time> \\ +<position>0.41694915254237286</position> \\ +</timepos> \\ +<timepos id="1"> \\ +<time>2.6993197278911563</time> \\ +<position>0.45847457627118643</position> \\ +</timepos> \\</metricresult> \\ +<metricresult id="elementInitialPosition"> 0.47796610169491527 </metricresult> \\ +<metricresult id="elementFlagListenedTo"> true< /metricresult> \\ +<metricresult id="elementFlagMoved"> true </metricresult> \\ +</metric> \\ +</audioelement>} + +As can be seen, the parent tag \texttt{audioelement} holds the id of the element passed in from the setup document. The first child element is \texttt{comment} and holds both the question shown and the response from the comment box inside. +The child element \texttt{value} holds the normalised ranking value. Next comes the metric node structure, there is one \texttt{metricresult} node per metric event collected. The id of the node identifies the type of data it contains. For example, the first holds the id \textit{elementTimer} and the data contained represents how long, in seconds, the audio element was listened to. The next holds the id \textit{elementTrackerFull} and contains a pair of elements per entry. This represents the entire movement of the elements' slider giving the time the event took place in seconds from when the current test page started, and the new position. In our example there are three \texttt{timepos} children with their id representing their order. There is one of these \texttt{audioelement} tags per audio element outlined on each test page. \section{Conclusions and future work}\label{sec:conclusions} @@ -243,16 +314,19 @@ The purpose of this paper is to outline the design of this tool, to describe our implementation using basic HTML5 functionality, and to discuss design challenges and limitations of our approach. % or something % future work -Further work may include the development of other common test designs, such as [...], and [...]. In addition, [...]. +Further work may include the development of other common test designs, such as MUSHRA \cite{mushra}, AB, ABX and method of adjustment tests. +In addition, [...]. -\begin{itemize} -\item Options for MUSHRA style experiment with vertical slide per track, APE style experiment where all tracks are on a single horizontal axis, or AB test -\end{itemize} +%\begin{itemize} +%\item Options for MUSHRA style experiment with vertical slide per track +%\item APE style experiment where all tracks are on a single horizontal axis % isn't that what we're doing now? +%\item AB test +%\item ABX test +%\item Method of adjustment tests +%\end{itemize} -... - -The source code of this tool can be found on \url{code.soundsoftware.ac.uk/projects/browserevaluationtool}. +The source code of this tool can be found on \url{code.soundsoftware.ac.uk/projects/webaudioevaluationtool}. The repository includes an issue tracker, where bug reports and feature requests can inform further development. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
--- a/example_eval/project.xml Fri Apr 10 10:20:52 2015 +0100 +++ b/example_eval/project.xml Wed Apr 22 18:37:04 2015 +0100 @@ -1,26 +1,49 @@ <?xml version="1.0" encoding="utf-8"?> <BrowserEvalProjectDocument> - <setup interface="APE" projectReturn="null" /> - <audioHolder hostURL="example_eval/" sampleRate="44100"> - <audioElements url="0.wav" ID="0"/> - <audioElements url="1.wav"/> - <audioElements url="2.wav"/> - <audioElements url="3.wav"/> - <audioElements url="4.wav"/> - <audioElements url="5.wav"/> - <audioElements url="6.wav"/> - <audioElements url="7.wav"/> - <audioElements url="8.wav"/> - <audioElements url="9.wav"/> - <audioElements url="10.wav"/> + <setup interface="APE" projectReturn="null" randomiseOrder='true' collectMetrics='true'> + <PreTest> + <statement>Please listen to all mixes</statement> + <question id="location" mandatory="true">Please enter your listening location</question> + </PreTest> + <PostTest> + <statement>Thank you for taking this listening test.</statement> + <question id="SessionID">Please enter your name.</question> + </PostTest> + <Metric> + <metricEnable>testTimer</metricEnable> + <metricEnable>elementTimer</metricEnable> + <metricEnable>elementInitalPosition</metricEnable> + <metricEnable>elementTracker</metricEnable> + <metricEnable>elementFlagListenedTo</metricEnable> + <metricEnable>elementFlagMoved</metricEnable> + </Metric> + </setup> + <audioHolder id='0' hostURL="example_eval/" sampleRate="44100" randomiseOrder='true' repeatCount='1' loop='true' elementComments='true'> + <interface> + <title>Example Test Question</title> + <scale position="0">Min</scale> + <scale position="100">Max</scale> + <scale position="50">Middle</scale> + <scale position="20">20</scale> + </interface> + <audioElements url="0.wav" id="0"/> + <audioElements url="1.wav" id="1"/> + <audioElements url="2.wav" id="2"/> + <audioElements url="3.wav" id="3"/> + <audioElements url="4.wav" id="4"/> + <audioElements url="5.wav" id="5"/> + <audioElements url="6.wav" id="6"/> + <audioElements url="7.wav" id="7"/> + <audioElements url="8.wav" id="8"/> + <audioElements url="9.wav" id="9"/> + <audioElements url="10.wav" id="10"/> + <CommentQuestion id='mixingExperiance'>What is your mixing experiance</CommentQuestion> + <PreTest> + <statement>Start the Test 3</statement> + </PreTest> + <PostTest> + <statement>Please take a break before the next test</statement> + <question id="testComment">How did you find the test</question> + </PostTest> </audioHolder> - <CommentQuestion>What is your mixing experiance</CommentQuestion> - <PreTest> - <statement>Please listen to all mixes</statement> - <question id="location" mandatory="true">Please enter your listening location</question> - </PreTest> - <PostTest> - <statement>Thank you for taking this listening test.</statement> - <question id="SessionID">Please enter your name.</question> - </PostTest> </BrowserEvalProjectDocument> \ No newline at end of file