xorg1990
New member
Hi, ich weiß mal wieder nicht weiter und zwar spinnt bei mir der Web audio Analyser rum.
Im Chrome rendert das canvas gar nicht, bleibt schwarz (Uint8Array =0,0,0,) und im FF stehen da nur maximal werte also bei (255,255,255,usw.).
Ich finde das Problem einfach nicht.
Das Problem könnten in der Methode play liegen, da der Scriptprocessor mit .bind() mit dem Rest verbunden ist, und sich deshalb nix tut. Obwohl ja der Sp. mit den Analyser in der Methode connection verbunden ist.
Habe auch einen Test link gemacht,
aber Achtung als stream ist irgendein Radio Sender eingedreht der kratzt manch mal ganz schön laut.
Hoffe doch, dass die Internet Verbindung mitspielt (DSL 16000).
Dann ist da noch ‘ne frage zur code Übersicht:
Momentan gibt es nur ein Objekt namens player, ich hätte aber gerne ein weiteres Objekt namens SpectrumAnalyser .
Wie bekomme ich aber dann den Scriptprocessor, der im Objekt Player ist, mit dem Objekt SpectrumAnalyser verbunden?
Im Chrome rendert das canvas gar nicht, bleibt schwarz (Uint8Array =0,0,0,) und im FF stehen da nur maximal werte also bei (255,255,255,usw.).
Ich finde das Problem einfach nicht.
Das Problem könnten in der Methode play liegen, da der Scriptprocessor mit .bind() mit dem Rest verbunden ist, und sich deshalb nix tut. Obwohl ja der Sp. mit den Analyser in der Methode connection verbunden ist.
Code:
<!DOCTYPE html>
<head>
<title>Playing sound with WebAudio API</title>
<script src="lib/audiolib.js"></script>
<script type="text/javascript" src="chroma.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
function start(){
new player();
}
window.AudioContext = window.AudioContext || window.webkitAudioContext;
function player(){
//anaylser/canvas stuff
this.canvas = document.getElementById("Normal_CW_Window");
this.canvas_width = this.canvas.width;
this.canvas_height = this.canvas.height;
this.canvas_ctx = this.canvas.getContext("2d");
this.tempCanvas = document.createElement("canvas");
this.tempCtx = this.tempCanvas.getContext("2d");
this.tempCanvas.width = this.canvas_width;
this.tempCanvas.height = this.canvas_height;
//chromajs
this.colors = new chroma.ColorScale({
colors: ['#000000', '#0C3AC6', '#ffff00', '#ffffff'],
positions: [0, .25, .75, 1],
mode: 'rgb',
limits: [0, 300]
});
//Audio Stuff
this.audioctx = new AudioContext();
this.w_ptr = 0;
this.r_ptr = 30720;
this.bufferSize = 32768;
this.FloatBuffer = new Float32Array(this.bufferSize);
this.InRate = 22050;//hz
this.OutRate = this.audioctx.sampleRate;
this.N_of_samples = 2048;//number of samples where Script Processor play through
//some varibles for the jitterbuffer
this.pBs = 0.0;//toggle the playback speed if the buffer underruns or overrun
this.ratioWeight = 0.0;
this.SPTime = 0.0;
this.connection();
this.getSamples();
}
player.prototype.connection =function(){
var Processor = this.audioctx.createScriptProcessor(this.N_of_samples, 0, 1)
this.SpectrumAnaylser = this.audioctx.createAnalyser();
this.SpectrumAnaylser.fftSize = 2048;
this.FFT_Data = new Uint8Array(this.SpectrumAnaylser.frequencyBinCount);
Processor.onaudioprocess = this.play.bind(this);
Processor.connect(this.SpectrumAnaylser);
Processor.connect(this.audioctx.destination);
}
player.prototype.play = function(ev){
var outputLeft = ev.outputBuffer.getChannelData(0)
var Len = ev.outputBuffer.length; ;
for (ev=0; ev < Len; ev++) {
var firstSample = this.FloatBuffer[this.r_ptr];
//Interpolation Sampleratio berechnen
var ratio = this.pBs * this.InRate / this.OutRate;
this.ratioWeight += ratio;
if(1 <= this.ratioWeight) {
this.ratioWeight -= 1;
this.FloatBuffer[this.r_ptr] = 0;
this.r_ptr+=1;
if (this.bufferSize <= this.r_ptr)this.r_ptr -= this.bufferSize ;
var sample = this.FloatBuffer[this.r_ptr];
//do Interpolartion
sample = (this.ratioWeight * sample + (ratio - this.ratioWeight) * firstSample) / ratio;
}
if (sample < -1) sample = -1;
if (sample > 1) sample = -1;
outputLeft[ev] = sample;
} //ende for
this.SpectrumAnaylser.getByteFrequencyData(this.FFT_Data);
this.drawSpectrogram(this.FFT_Data);
document.getElementById("ausgabe2").innerHTML = "Sample: "+ sample;
this.SPTime = this.audioctx.currentTime//(new Date).getTime();
}
player.prototype.drawSpectrogram = function(FFT_Data){
var drawLength = FFT_Data.length < this.canvas_height ? this.canvas_height : FFT_Data.length;
this.tempCtx.drawImage(this.canvas, 0, 0, this.canvas_width, this.canvas_height);
document.getElementById("ausgabe3").innerHTML = "FFT value: "+ FFT_Data[4];
for (var i = 0; i < drawLength; i++) {
// draw each pixel with the specific color
var value = FFT_Data[i];
this.canvas_ctx.fillStyle = this.colors .getColor(value).hex();
// draw the line at the right side of the canvas
this.canvas_ctx.fillRect(this.canvas_width - 1, this.canvas_height - i, 1, 1);
}
// set translate on the canvas
this.canvas_ctx.translate(-1, 0);
// draw the copied image
this.canvas_ctx.drawImage(this.tempCanvas, 0, 0, this.canvas_width, this.canvas_height, 0, 0, this.canvas_width, this.canvas_height);
// reset the transformation matrix
this.canvas_ctx.setTransform(1, 0, 0, 1, 0, 0);
}
player.prototype.getSamples = function(){
var that = this;
var ws = new WebSocket('ws://livegrab-test.ddns.net:3000');
ws.binaryType = 'arraybuffer';
var response_speed = 500;//ms
ws.onmessage = function(b) {
var jit = (that.bufferSize * 2 + that.w_ptr - that.r_ptr - (that.audioctx.currentTime - that.SPTime) * that.InRate / 1E3) % that.bufferSize;
response_speed += 0.01 * (jit - response_speed);
if (response_speed > 2E3){
that.r_ptr = (that.bufferSize + that.w_ptr - 1E3) % that.bufferSize;
document.getElementById("ausgabe").innerHTML = "Output Index korrektur: "+ that.r_ptr;
jit = response_speed = 1E3;
}
that.pBs = 1 + 1E-5 * (response_speed - 1E3);
document.getElementById("ausgabe4").innerHTML = "Ratio anpassung: "+ that.pBs;
if (1.002 < that.pBs)that.pBs = 1.002;
if (0.998 > that.pBs)that.pBs = 0.998;
var F32 = new Float32Array(b.data),i=0;
for(;i<F32.length;i++,that.w_ptr++) {
//this.w_ptr++,i++;
that.FloatBuffer[that.w_ptr] = F32[i];
if(that.bufferSize<=that.w_ptr)that.w_ptr -= that.bufferSize;
}
}
}
</script>
</head>
<body onload=start();>
<canvas id="Normal_CW_Window" width="893" height="730" style="display: block; background-color: black ;"></canvas>
<div id="ausgabe"></div>
<br>
<div id="ausgabe2"></div>
<br>
<div id="ausgabe3"></div>
<br>
<div id="ausgabe4"></div>
<br>
</body>
</html>aber Achtung als stream ist irgendein Radio Sender eingedreht der kratzt manch mal ganz schön laut.
Hoffe doch, dass die Internet Verbindung mitspielt (DSL 16000).
Dann ist da noch ‘ne frage zur code Übersicht:
Momentan gibt es nur ein Objekt namens player, ich hätte aber gerne ein weiteres Objekt namens SpectrumAnalyser .
Wie bekomme ich aber dann den Scriptprocessor, der im Objekt Player ist, mit dem Objekt SpectrumAnalyser verbunden?
