init commit

f3a9e798 · christian · f3a9e798 · f3a9e798 · f3a9e798 · f3a9e798
Commit f3a9e798 authored Jun 07, 2014 by christian
--- a/audio/10000hz.wav
+++ b/audio/10000hz.wav
--- a/audio/1000hz.wav
+++ b/audio/1000hz.wav
--- a/audio/100hz.wav
+++ b/audio/100hz.wav
--- a/audio/12000hz.wav
+++ b/audio/12000hz.wav
--- a/audio/15000hz.wav
+++ b/audio/15000hz.wav
--- a/audio/200hz.wav
+++ b/audio/200hz.wav
--- a/audio/40hz.wav
+++ b/audio/40hz.wav
--- a/audio/5000hz.wav
+++ b/audio/5000hz.wav
--- a/audio/500hz.wav
+++ b/audio/500hz.wav
--- a/audio/60hz.wav
+++ b/audio/60hz.wav
--- a/audio/outsider.m4a
+++ b/audio/outsider.m4a
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Analyzr</title>
+<script src="main.js"></script>
+<style type="text/css">
+body{ background:#222 }
+div#player{ width:900px; height:430px; background:#000; padding:5px; margin:50px auto 0}
+div#player > div > audio{ width:900px; background:#000; float:left }
+div#player > canvas{ background:#002D3C; float:left }
+div#osci{margin:0 auto; width:900px; height:80px; background:#000; padding:5px;}
+div#osci h2{color:#fff;font-weight:400; margin:0;}
+</style>
+</head>
+<body>
+<div id="player">
+<div id="audio-container"></div>
+<canvas id="freq-analyser" width="900" height="400"></canvas>
+<!--  <canvas id="wave-analyser" width="900" height="100"></canvas> -->
+  
+</div>    <div id="osci">
+        <h2>Test Oscillator</h2>
+    </div> 
+</body>
+</html>
--- a/main.js
+++ b/main.js
+(function (global) {
+    'use strict';
+    var auSource = 'audio/outsider.m4a', testTone=[], testLen, audio, i, freqCanvas, waveCanvas, ctx2, ctx, source, context, analyser, freqData, bars, waveData, bar_x, bar_width, bar_height, gradient;
+    testTone = [
+        'audio/40hz.wav', 
+        'audio/60hz.wav', 
+        'audio/100hz.wav', 
+        'audio/200hz.wav', 
+        'audio/500hz.wav', 
+        'audio/1000hz.wav', 
+        'audio/5000hz.wav', 
+        'audio/10000hz.wav',
+        'audio/12000hz.wav',
+        'audio/15000hz.wav'
+    ];
+    audio = new Audio();
+
+    function insertTestOsc(){
+        testLen = testTone.length;
+        for(i = 0; i < testLen; i++){
+            var elem = document.createElement('input'); 
+                (function(j){
+                    elem.id = 'btnId-'+j; 
+                    elem.value = testTone[j].slice(6, testTone[j].length-4); 
+                    elem.type = 'button';
+                    elem.style.marginTop = '10px';
+                    elem.style.width = '90px';
+                    elem.style.padding = '5px';
+                    elem.addEventListener('click', function(e){
+                        auSource = testTone[j]; // Wie bekomme ich die src hinaus?
+                        console.log(auSource) 
+                        audio.src = auSource;
+                        audio.play;
+                    }); 
+                }(i));
+            document.getElementById('osci').appendChild(elem);
+        }   
+    }
+
+    audio.src = auSource;
+    console.log('1: ' + auSource)
+    audio.controls = true;
+    audio.loop = false;
+    audio.autoplay = true;
+
+
+
+    function frameByFrame() {
+        // RequestAnimationFrame -> coz i like it fast
+        window.webkitRequestAnimationFrame(frameByFrame);
+        // frequency
+        freqData = new Float32Array(analyser.frequencyBinCount);
+        analyser.getFloatFrequencyData(freqData);
+        // waveform
+        // waveData = new Uint8Array(analyser.frequencyBinCount);
+        // analyser.getByteTimeDomainData(waveData);
+
+        analyser.maxDecibels = 0;
+        analyser.smoothingTimeConstant = 0.9;
+        //freuqency render
+        gradient = ctx.createLinearGradient(0,0,0,300);
+        gradient.addColorStop(1,'#00CCFF');
+        gradient.addColorStop(0.1,'yellow');
+        gradient.addColorStop(0.05,'red');
+        gradient.addColorStop(0.02,'#800517');
+        ctx.clearRect(0, 0, freqCanvas.width, freqCanvas.height); 
+        ctx.fillStyle = gradient;
+        bars = 450;
+        for (i = 0; i < bars; i++) {
+            bar_x = i * 10;
+            bar_width = 9;
+            bar_height = -((freqData[i] - analyser.minDecibels) * (analyser.maxDecibels - analyser.minDecibels) / 22);
+            ctx.fillRect(bar_x, freqCanvas.height, bar_width, bar_height);
+        }
+        // waveform render
+    }
+
+
+
+
+
+
+    // Initialize the player 
+    function init() {
+        document.getElementById('audio-container').appendChild(audio);
+        context = new (global.AudioContext || global.webkitAudioContext)(); 
+     
+        analyser = context.createAnalyser();
+
+        freqCanvas = document.getElementById('freq-analyser');
+            // waveCanvas = document.getElementById('wave-analyser');
+        ctx = freqCanvas.getContext('2d');
+            // ctx2 = waveCanvas.getContext('2d');
+        // Re-route audio playback into the processing graph of the AudioContext
+        source = context.createMediaElementSource(audio);
+        source.connect(analyser);
+        analyser.connect(context.destination);
+        insertTestOsc();
+        frameByFrame();
+    }
+
+
+    window.addEventListener('load', init, false);
+
+
+} (window));