Skip to content

Commit

Permalink
Examples cleanups #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertrypula
robertrypula committed Aug 17, 2017
1 parent 6734e46 commit 06bc95b
Show file tree
Hide file tree
Showing 17 changed files with 334 additions and 173 deletions.
27 changes: 27 additions & 0 deletions .htaccess
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,30 @@ Redirect 301 /harmonics-and-phase-src https://github.com/robertrypula/AudioNetwo
Redirect 301 /piano /example/00-028-piano/piano.html
Redirect 301 /piano-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-028-piano

# Article 3 aliases:

Redirect 301 /wave-analyser-class https://github.com/robertrypula/AudioNetwork/tree/master/example/00-000-common/wave-analyser.js
Redirect 301 /wave-generator-class https://github.com/robertrypula/AudioNetwork/tree/master/example/00-000-common/wave-generator.js
Redirect 301 /buffer-class https://github.com/robertrypula/AudioNetwork/tree/master/example/00-000-common/buffer.js
Redirect 301 /complex-class https://github.com/robertrypula/AudioNetwork/tree/master/example/00-000-common/complex.js

Redirect 301 /wave-generator-wave-analyser /example/00-03-00-wave-generator-wave-analyser/wave-generator-wave-analyser.html
Redirect 301 /wave-generator-wave-analyser-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-00-wave-generator-wave-analyser

Redirect 301 /wave-analyser-vs-analyser-node /example/00-03-01-wave-analyser-vs-analyser-node/wave-analyser-vs-analyser-node.html
Redirect 301 /wave-analyser-vs-analyser-node-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-01-wave-analyser-vs-analyser-node

Redirect 301 /wave-analyser-performance /example/00-03-02-wave-analyser-performance/wave-analyser-performance.html
Redirect 301 /wave-analyser-performance-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-02-wave-analyser-performance

Redirect 301 /wav-file-recorder /example/00-03-03-wav-file-recorder/wav-file-recorder.html
Redirect 301 /wav-file-recorder-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-03-wav-file-recorder

Redirect 301 /modulation-types /example/00-03-04-modulation-types/modulation-types.html
Redirect 301 /modulation-types-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-04-modulation-types

Redirect 301 /analyser-node-performance /example/00-03-05-analyser-node-performance/analyser-node-performance.html
Redirect 301 /analyser-node-performance-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-05-analyser-node-performance

Redirect 301 /spectral-waterfall /example/00-03-06-spectral-waterfall/spectral-waterfall.html
Redirect 301 /spectral-waterfall-src https://github.com/robertrypula/AudioNetwork/tree/master/example/00-03-06-spectral-waterfall
5 changes: 2 additions & 3 deletions example/00-03-00-wave-generator-wave-analyser/wave-generator-wave-analyser.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
<div class="wrapper">

<div class="container">
<!--
<h1>Audio Network - send data over sound in JavaScript</h1>
<div class="row margin-bottom">
<div class="col col-xs-12">
Expand All @@ -53,14 +52,14 @@ <h1>Audio Network - send data over sound in JavaScript</h1>
</p>
</div>
</div>
-->

<!-- ---------------- -->

<div class="row margin-bottom">
<div class="col col-xs-12">
<p>
This example shows how to use Wave Generator and Wave Analyser classes
<strong>Remeber to click on initialization buttons first!</strong>
</p>
</div>
</div>
Expand All @@ -81,7 +80,7 @@ <h1>Audio Network - send data over sound in JavaScript</h1>

<div class="row margin-bottom-double" id="init-lite-button-container">
<div class="col col-xs-6 col-sm-5 col-md-3">
<label>Init AudioMonoIOLite</label>
<label>Init AudioMonoIOLite (experimental)</label>
</div>
<div class="col col-xs-6 col-sm-7 col-md-6">
<button onClick="init(true, 2048)" class="btn btn-default">2048</button>
Expand Down
83 changes: 32 additions & 51 deletions example/00-03-01-wave-analyser-vs-analyser-node/wave-analyser-vs-analyser-node.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,37 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>-->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<title>Audio Network - data transmission over sound waves</title>

<meta name="description" content="">

<link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
<link rel="stylesheet" type="text/css" href="wave-analyser-vs-analyser-node.css">
<!--<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>-->
<!--<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>-->
<script src="../../asset/js/site.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="init()">
<!--

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
-->
<script>
if (isProduction()) { // TODO refactor this
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
</script>

<div class="wrapper">

<div class="container">
<!--
<h1>Audio Network - send data over sound in JavaScript</h1>
<div class="row margin-bottom">
<div class="col col-xs-12">
Expand All @@ -48,7 +51,6 @@ <h1>Audio Network - send data over sound in JavaScript</h1>
</p>
</div>
</div>
-->

<!-- ---------------- -->

Expand All @@ -58,33 +60,11 @@ <h1>Audio Network - send data over sound in JavaScript</h1>
<div class="row margin-bottom">
<div class="col col-xs-12">
<p>
This example allows to compare AnalyserNode and WaveAnalyser output and check overall performance of WaveAnaluser class.
This example allows to compare AnalyserNode and WaveAnalyser output.
</p>
</div>
</div>

<h2>WaveAnalyser performance</h2>

<div class="row margin-bottom">
<div class="col col-xs-5 col-sm-5 col-md-3">
Actions
</div>
<div class="col col-xs-7 col-sm-7 col-md-6">
<button onClick="checkWaveAnalyserPerformance()" class="btn btn-default">Run test</button>
</div>
</div>

<div class="row margin-bottom">
<div class="col col-xs-5 col-sm-5 col-md-3">
Log
</div>
<div class="col col-xs-7 col-sm-7 col-md-6">
<div id="log-performance"></div>
</div>
</div>

<h2>AnalyserNode and WaveAnalyser output comparison</h2>

<div class="row margin-bottom">
<div class="col col-xs-5 col-sm-5 col-md-3">
Actions
Expand All @@ -94,17 +74,17 @@ <h2>AnalyserNode and WaveAnalyser output comparison</h2>
</div>
</div>

<h3>Time domain (taken from AnalyserNode)</h3>
<h2>Time domain (taken from AnalyserNode)</h2>
<div class="scroll-container">
<canvas id="canvas-time-domain"></canvas>
</div>

<h3>Frequency domain (AnalyserNode from WebAudio API)</h3>
<h2>Frequency domain (AnalyserNode from WebAudio API)</h2>
<div class="scroll-container margin-bottom">
<canvas id="canvas-analyser-node"></canvas>
</div>

<h3>Frequency domain (WaveAnalyser, our own class)</h3>
<h2>Frequency domain (WaveAnalyser, our own class)</h2>
<div class="scroll-container margin-bottom">
<canvas id="canvas-wave-analyser"></canvas>
</div>
Expand All @@ -115,7 +95,9 @@ <h3>Frequency domain (WaveAnalyser, our own class)</h3>
<!-- ---------------- -->

<script>
document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
if (isProduction()) { // TODO refactor this
document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
}
</script>

</div>
Expand All @@ -138,18 +120,17 @@ <h3>Frequency domain (WaveAnalyser, our own class)</h3>
<script src="../00-000-common/wave-analyser.js"></script>
<script src="wave-analyser-vs-analyser-node.js"></script>


<!--
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76662342-1', 'auto');
ga('send', 'pageview');
if (isProduction()) { // TODO refactor this
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-76662342-1', 'auto');
ga('send', 'pageview');
}
</script>
-->

</body>
</html>
67 changes: 0 additions & 67 deletions example/00-03-01-wave-analyser-vs-analyser-node/wave-analyser-vs-analyser-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,70 +34,6 @@ function init() {
);
}

function checkWaveAnalyserPerformance() {
var log;

log = '';
log += runPerformanceTest(1 * 1024) + '\n<br/>';
log += runPerformanceTest(2 * 1024) + '\n<br/>';
log += runPerformanceTest(4 * 1024) + '\n<br/>';
log += runPerformanceTest(8 * 1024) + '\n<br/>';
log += runPerformanceTest(16 * 1024) + '\n<br/>';
log += runPerformanceTest(32 * 1024) + '\n<br/>';
log += runPerformanceTest(64 * 1024) + '\n<br/>';

html('#log-performance', log);
}

function runPerformanceTest(windowSize) {
var
SAMPLE_RATE = 48000, // fixed for all devices
SUBCARRIERS = 100, // for average
dummySamplePerPeriod,
windowFunction,
waveAnalyser,
i,
j,
decibel,
timeDomainData = [],
start,
end,
oneSubcarrierTime,
windowSizeDurationMs,
subcarriersPerSecond;

for (i = 0; i < windowSize; i++) {
timeDomainData.push(-1 + 2 * Math.random());
}

start = new Date().getTime();

dummySamplePerPeriod = 1; // could be any other value
windowFunction = true;
waveAnalyser = new WaveAnalyser(dummySamplePerPeriod, windowSize, windowFunction);

for (i = 0; i < SUBCARRIERS; i++) {
waveAnalyser.setSamplePerPeriod(1 + i);
for (j = 0; j < windowSize; j++) {
waveAnalyser.handle(timeDomainData[j]);
}
decibel = waveAnalyser.getDecibel();
}

end = new Date().getTime();
oneSubcarrierTime = (end - start) / SUBCARRIERS;

windowSizeDurationMs = (windowSize / SAMPLE_RATE) * 1000;
subcarriersPerSecond = windowSizeDurationMs / oneSubcarrierTime;

return '' +
'<b>Window size:</b> ' + windowSize + ' samples\n<br/>' +
'<b>Window time:</b> ' + windowSizeDurationMs.toFixed(1) + ' ms\n<br/>' +
'<b>One frequency computation time:</b> ' + oneSubcarrierTime + ' ms (' + (100 * (oneSubcarrierTime / windowSizeDurationMs)).toFixed(1) + ' % of window time)\n<br/>' +
'<b>[estimation] Real-time frequencies:</b> ' + subcarriersPerSecond.toFixed(0) + '\n<br/>' +
'<b>[estimation] DFT computing time:</b> ' + (0.5 * oneSubcarrierTime * windowSize / 1000).toFixed(3) + ' s\n<br/>';
}

function compareWithAnalyserNode() {
var
timeDomainData = audioMonoIO.getTimeDomainData(),
Expand All @@ -116,9 +52,6 @@ function compareWithAnalyserNode() {
drawTimeDomainData(ctxTimeDomain, timeDomainData);
drawFrequencyDomainData(ctxAnalyserNode, frequencyDataAnalyserNode);
drawFrequencyDomainData(ctxWaveAnalyser, frequencyDataWaveAnalyser);

console.log(frequencyDataAnalyserNode);
console.log(frequencyDataWaveAnalyser);
}

function getFrequencyData(timeDomainData) {
Expand Down
Empty file removed example/00-03-02-wave-analyser-performance/.gitkeep
View file
Empty file.
12 changes: 12 additions & 0 deletions example/00-03-02-wave-analyser-performance/wave-analyser-performance.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
#log {
font-family: monospace;
}

canvas {
border: 1px solid gray;
display: block;
}

.scroll-container {
margin-bottom: 20px;
}

0 comments on commit 06bc95b

Please sign in to comment.