Mercurial > hg > webaudioevaluationtool

changeset 75:3656025f2bfd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Paper: some changes and work delegation; apeTool.html changed into index.html
author Brecht De Man <b.deman@qmul.ac.uk>
date Thu, 23 Apr 2015 16:31:17 +0100
parents 69d7cfcc3450
children 94eacf4b03a9 7586646a6a05
files .hgignore ape.js apeTool.html docs/SMC15/interface.png docs/SMC15/smc2015template.bbl docs/SMC15/smc2015template.bib docs/SMC15/smc2015template.tex index.html
diffstat 8 files changed, 129 insertions(+), 78 deletions(-) [+]
line wrap: on
line diff
--- a/.hgignore	Thu Apr 23 16:00:55 2015 +0100
+++ b/.hgignore	Thu Apr 23 16:31:17 2015 +0100
@@ -11,3 +11,8 @@
 re:^docs/ExperimentVariableControl\.aux$
 re:^docs/ExperimentVariableControl\.log$
 re:^docs/ExperimentVariableControl\.synctex\.gz$
+*.aux
+*.bbl
+*.gz
+*.log
+*.blg
\ No newline at end of file
--- a/ape.js	Thu Apr 23 16:00:55 2015 +0100
+++ b/ape.js	Thu Apr 23 16:31:17 2015 +0100
@@ -140,7 +140,7 @@
 	if (titleAttr != undefined) {
 		titleSpan.innerHTML = titleAttr.value;
 	} else {
-		titleSpan.innerHTML =  'APE Tool';
+		titleSpan.innerHTML =  'Listening test';
 	}
 	// Insert the titleSpan element into the title div element.
 	title.appendChild(titleSpan);
--- a/apeTool.html	Thu Apr 23 16:00:55 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,41 +0,0 @@
-<!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>
-		<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
-			loadProjectSpec(url);
-		</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>
Binary file docs/SMC15/interface.png has changed
--- a/docs/SMC15/smc2015template.bbl	Thu Apr 23 16:00:55 2015 +0100
+++ b/docs/SMC15/smc2015template.bbl	Thu Apr 23 16:31:17 2015 +0100
@@ -1,5 +1,5 @@
 % Generated by IEEEtran.bst, version: 1.12 (2007/01/11)
-\begin{thebibliography}{1}
+\begin{thebibliography}{10}
 \providecommand{\url}[1]{#1}
 \csname url@samestyle\endcsname
 \providecommand{\newblock}{\relax}
@@ -21,6 +21,21 @@
 \providecommand{\BIBdecl}{\relax}
 \BIBdecl
 
+\bibitem{de2013real}
+A.~de~G{\"o}tzen, E.~Sikstr{\"o}m, F.~Grani, and S.~Serafin, ``Real, foley or
+  synthetic? an evaluation of everyday walking sounds,'' in \emph{Proceedings
+  of SMC 2013 : 10th Sound and Music Computing Conference}, 2013.
+
+\bibitem{schoeffler2013impact}
+M.~Schoeffler and J.~Herre, ``About the impact of audio quality on overall
+  listening experience,'' in \emph{Proceedings of Sound and Music Computing
+  Conference}, 2013, pp. 48--53.
+
+\bibitem{friberg2011comparison}
+A.~Friberg and A.~Hedblad, ``A comparison of perceptual ratings and computed
+  audio features,'' in \emph{Proceedings of the SMC2011, 8th Sound and Music
+  Computing Conference}, 2011, pp. 122--127.
+
 \bibitem{webaudioapi}
 W3C, ``Web audio api,'' 2015, \url{http://webaudio.github.io/web-audio-api/}
   [Accessed 22nd April, 2015].
@@ -30,10 +45,16 @@
   \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
+{BBC 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{mason2015compression}
+A.~Mason, N.~Jillings, Z.~Ma, J.~D. Reiss, and F.~Melchior, ``Adaptive audio
+  reproduction using personalized compression,'' in \emph{Audio Engineering
+  Society Conference: 57th International Conference: The Future of Audio
+  Entertainment Technology -- Cinema, Television and the Internet}, Mar 2015.
+
 \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},
--- a/docs/SMC15/smc2015template.bib	Thu Apr 23 16:00:55 2015 +0100
+++ b/docs/SMC15/smc2015template.bib	Thu Apr 23 16:31:17 2015 +0100
@@ -42,7 +42,7 @@
 	}
 	
 @misc{bbcradiophonics,
-	Author = {BBC R\&D},
+	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]}
@@ -53,4 +53,34 @@
 	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
+	}
+
+@inproceedings{de2013real,
+  title={Real, Foley or synthetic? An evaluation of everyday walking sounds},
+  author={de G{\"o}tzen, Amalia and Sikstr{\"o}m, Erik and Grani, Francesco and Serafin, Stefania},
+  year={2013},
+  booktitle={Proceedings of SMC 2013 : 10th Sound and Music Computing Conference},
+}
+
+@inproceedings{friberg2011comparison,
+  title={A comparison of perceptual ratings and computed audio features},
+  author={Friberg, Anders and Hedblad, Anton},
+  booktitle={Proceedings of the SMC2011, 8th Sound and Music Computing Conference},
+  pages={122--127},
+  year={2011}
+}
+
+@conference{mason2015compression,
+	Author = {Mason, Andrew and Jillings, Nick and Ma, Zheng and Reiss, Joshua D. and Melchior, Frank},
+	Booktitle = {Audio Engineering Society Conference: 57th International Conference: The Future of Audio Entertainment Technology -- Cinema, Television and the Internet},
+	Month = {Mar},
+	Title = {Adaptive Audio Reproduction Using Personalized Compression},
+	Year = {2015}}
+	
+@inproceedings{schoeffler2013impact,
+  title={About the Impact of Audio Quality on Overall Listening Experience},
+  author={Schoeffler, Michael and Herre, J{\"u}rgen},
+  booktitle={Proceedings of Sound and Music Computing Conference},
+  pages={48--53},
+  year={2013}
+}
\ No newline at end of file
--- a/docs/SMC15/smc2015template.tex	Thu Apr 23 16:00:55 2015 +0100
+++ b/docs/SMC15/smc2015template.tex	Thu Apr 23 16:31:17 2015 +0100
@@ -151,20 +151,19 @@
 
 %NICK: examples of what kind of audio applications HTML5 has made possible, with references to publications (or website)\\
 
+Perceptual evaluation of audio plays an important role in a wide range of research including audio effect design \cite{}, sound synthesis \cite{de2013real}, source separation \cite{}, codec design \cite{}, general perception of audio \cite{schoeffler2013impact}, and many others \cite{friberg2011comparison}. \\ % EXPAND
+
 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's environment.\\ % The paper for this has not been released yet by AES...
+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's environment \cite{mason2015compression}.\\ % The paper for this has not been released yet by AES...
 
-This work is based on the APE audio perceptual evaluation interface for MATLAB \cite{deman2014b}. An important drawback of this toolbox is the need to have MATLAB to create a test and even to run (barring the use of an executable generated by MATLAB), and limited compatibility with both earlier and newer versions of MATLAB, which makes it hard to maintain. On the other hand, a web application generally has the advantage of running in most browsers on most applications, and we present a tool that requires no specialised software or even programming knowledge to set up. 
-%prior work: \cite{deman2014b} in MATLAB, much less easy to deploy, and often stops working due to version updates \\ 
+This work is based in part on the APE audio perceptual evaluation interface for MATLAB \cite{deman2014b}. An important drawback of this toolbox is the need to have MATLAB to create a test and even to run (barring the use of an executable generated by MATLAB), and limited compatibility with both earlier and newer versions of MATLAB, which makes it hard to maintain. On the other hand, a web application generally has the advantage of running in most browsers on most applications, and we present a tool that requires no specialised software or even programming knowledge to set up. 
 
+BRECHT: We present a browser-based perceptual evaluation tool for audio that ... \\
+what can we do with this: multiple stimulus perceptual evaluation \cite{bech}, commenting, rating, ranking, (no AB) - can also be single \\ % also in abstract
+goal, what are we trying to do? \\
 
-
-background (types of research where this type of perceptual evaluation of audio is relevant)\\
-
-multiple stimulus perceptual evaluation \cite{bech}\\
-
-goal, what are we trying to do? \\
+DAVE: justify:
 \begin{itemize}
 \item Easy deployment - no propitiatory software required
 \item Entirely scalable
@@ -175,27 +174,13 @@
 
 
 
-other background papers (some SMC?)\\
-
-%\section{Design considerations}\label{sec:designconsiderations} % not necessary? with next (/previous) section?
-
-We present a browser-based perceptual evaluation tool for audio that ... \\
 
 see \cite{deman2014b}: requirements informed by research on music production (see my work and that of others' in the group), such as randomisation, playback of high quality audio, some degree of flexibility in terms of configuration, ... \\
 
 
-\section{Implementation}\label{sec:implementation}
-%[Nick???]
+\section{Interface}\label{sec:interface}
 
-%section on overall architecture\\
-
-%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 (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). 
+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 eleven 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}
@@ -204,14 +189,19 @@
 \label{fig:interface}
 \end{center}
 \end{figure*}
+[DAVE to make new picture]
 
+[BRECHT to expand]
 
 
-\subsection{Architecture}\label{sec:architecture}
+
+\section{Architecture}\label{sec:architecture} % or implementation? 
+
+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. 
 
 The web tool itself is split into several files to operate:
 \begin{itemize}
-\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{index.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}
@@ -219,7 +209,7 @@
 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 \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.
+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.
 
 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.
 
@@ -241,7 +231,9 @@
 %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
 
-\subsection{Setup and results formats}\label{sec:setupresultsformats}
+\section{Setup and results formats}\label{sec:setupresultsformats}
+
+[DAVE: somewhere add input file]
 
 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:
@@ -250,6 +242,8 @@
 
 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.
  
+[BRECHT to say we try to cater to as many audiences as possible, simple yet tweakable)
+
 Further options in the setup file are: 
 
 \begin{itemize}
@@ -276,9 +270,9 @@
 
 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>}
+\texttt{<comment id="location"> Queen Mary \\University of London </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.
+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.
 
@@ -324,6 +318,7 @@
 % future work
 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, [...]. 
+[BRECHT to correct and expand]
 
 %\begin{itemize}
 %\item Options for MUSHRA style experiment with vertical slide per track
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Thu Apr 23 16:31:17 2015 +0100
@@ -0,0 +1,41 @@
+<!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>
+		<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
+			loadProjectSpec(url);
+		</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>