Commit f3a9e798 authored by christian's avatar christian

init commit

parents
File added
File added
File added
File added
File added
<!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>
(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));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment