Commit 7d19cbe4 authored by christian's avatar christian

small bugfixes

parent f3a9e798
......@@ -3,24 +3,25 @@
<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;}
div#osci h2{color:#fff;font-weight:400; margin:0; font-family:arial;}
div#osci input.freq{cursor:pointer;}
</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">
<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>
<script src="main.js"></script>
</body>
</html>
</html>
\ No newline at end of file
/*
JavaScrip Analyzr - Simple Audio Analyzer Module
Version: 0.0.4
(c) 2012-2014 Christian Weiss <http://monkeybiz.at>
MIT-style license.
Update 2014: This is a analyzer test module for a TB-303 synthesizer clone I'm currently working on.
The module was written in 2012 and was only used to become some knowledge of the audio API.
*/
(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;
var testLen, auSource, 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',
......@@ -15,10 +23,15 @@
];
audio = new Audio();
window.requestAnimFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
})();
function insertTestOsc(){
testLen = testTone.length;
for(i = 0; i < testLen; i++){
var elem = document.createElement('input');
var elem = document.createElement('input');
elem.className = 'freq';
(function(j){
elem.id = 'btnId-'+j;
elem.value = testTone[j].slice(6, testTone[j].length-4);
......@@ -27,37 +40,29 @@
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)
auSource = testTone[j];
audio.src = auSource;
audio.play;
audio.autoplay = true;
});
}(i));
document.getElementById('osci').appendChild(elem);
}
}
audio.src = auSource;
console.log('1: ' + auSource)
audio.preload = true;
audio.controls = true;
audio.loop = false;
audio.autoplay = true;
audio.autoplay = false;
function frameByFrame() {
// RequestAnimationFrame -> coz i like it fast
window.webkitRequestAnimationFrame(frameByFrame);
// frequency
window.requestAnimFrame(frameByFrame);
freqData = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(freqData);
// waveform
// waveData = new Uint8Array(analyser.frequencyBinCount);
// analyser.getByteTimeDomainData(waveData);
analyser.maxDecibels = 0;
analyser.maxDecibels = -20;
analyser.minDecibels = -100;
analyser.smoothingTimeConstant = 0.9;
//freuqency render
gradient = ctx.createLinearGradient(0,0,0,300);
gradient.addColorStop(1,'#00CCFF');
gradient.addColorStop(0.1,'yellow');
......@@ -65,33 +70,31 @@
gradient.addColorStop(0.02,'#800517');
ctx.clearRect(0, 0, freqCanvas.width, freqCanvas.height);
ctx.fillStyle = gradient;
bars = 450;
bars = 900;
for (i = 0; i < bars; i++) {
bar_x = i * 10;
bar_width = 9;
bar_height = -((freqData[i] - analyser.minDecibels) * (analyser.maxDecibels - analyser.minDecibels) / 22);
bar_x = i * 1;
bar_width = 2;
bar_height = -((freqData[i] - (analyser.minDecibels)) * ((analyser.maxDecibels) - (analyser.minDecibels))/17);
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)();
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
}
catch(e) {
alert('Web Audio API is not supported in this browser');
}
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);
......@@ -99,8 +102,6 @@
frameByFrame();
}
window.addEventListener('load', init, false);
window.addEventListener('DOMContentLoaded', 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