gpt4 book ai didi

javascript - 分析器未在音频传入时更新 Canvas 绘制速度

转载 作者:行者123 更新时间:2023-12-02 17:47:59 26 4
gpt4 key购买 nike

每当我有一个新的缓冲区进入我的客户端时,我想将该音频实例重新绘制到我的 Canvas 上。我从 http://webaudioapi.com/samples/visualizer/ 获取了示例代码并尝试改变它以适应我在生活环境中的需求。我似乎有一些工作,因为当我调用 .draw() 时,我确实看到 Canvas 正在更新,但它的速度并没有应有的那么快。我看到的可能是 1 fps。如何加快 fps 并仍然为新缓冲区的每个实例调用绘制?

整个代码: https://github.com/grkblood13/web-audio-stream/tree/master/visualizer

这是为每个缓冲区调用 .draw() 的部分:

function playBuffer(audio, sampleRate) {
var source = context.createBufferSource();
var audioBuffer = context.createBuffer(1, audio.length , sampleRate);
source.buffer = audioBuffer;
audioBuffer.getChannelData(0).set(audio);

source.connect(analyser);
var visualizer = new Visualizer(analyser);
visualizer.analyser.connect(context.destination);
visualizer.draw(); // Draw new canvas for every new set of data

if (nextTime == 0) {
nextTime = context.currentTime + 0.05; /// add 50ms latency to work well across systems - tune this if you like
}
source.start(nextTime);

nextTime+=source.buffer.duration; // Make the next buffer wait the length of the last buffer before being played
}

这是 .draw() 方法:

Visualizer.prototype.draw = function() {
function myDraw() {
this.analyser.smoothingTimeConstant = SMOOTHING;
this.analyser.fftSize = FFT_SIZE;

// Get the frequency data from the currently playing music
this.analyser.getByteFrequencyData(this.freqs);
this.analyser.getByteTimeDomainData(this.times);

var width = Math.floor(1/this.freqs.length, 10);

// Draw the time domain chart.
this.drawContext.fillStyle = 'black';
this.drawContext.fillRect(0, 0, WIDTH, HEIGHT);

for (var i = 0; i < this.analyser.frequencyBinCount; i++) {
var value = this.times[i];
var percent = value / 256;
var height = HEIGHT * percent;
var offset = HEIGHT - height - 1;
var barWidth = WIDTH/this.analyser.frequencyBinCount;
this.drawContext.fillStyle = 'green';
this.drawContext.fillRect(i * barWidth, offset, 1, 2);
}
}
requestAnimFrame(myDraw.bind(this));
}

最佳答案

您有可用的演示吗?因为您可以使用 Chrome 中的时间轴轻松调试它。您可以找出哪些过程需要很长时间。另外请去掉不必要的数学。大多数代码不需要每帧都执行。另外,从 playBuffer 调用绘图函数有多少次?当您调用 play 时,在该函数结束时它会请求一个新的动画帧。如果每次获得缓冲区时都调用 play,则会获得更多的数学->绘图->请求帧循环。这也使得它非常慢。如果您已经使用 requestanimationframe,则只需调用 play 函数一次。

要解决多帧问题:

window.animframe = requestAnimFrame(myDraw.bind(this));

在你的 playBuffer 上:

if(!animframe) visualizer.draw();

这确保它仅在没有请求时执行播放函数。

关于javascript - 分析器未在音频传入时更新 Canvas 绘制速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21606859/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com