用于可视化波形并与之交互的Web音频
如何编写JavaScript程序以显示音频文件中的波形？我想使用网络音频和画布。
我试过这段代码：
(new window.AudioContext).decodeAudioData(audioFile, function (data) {
var channel = data.getChannelData(0);
for (var i = 0; i < channel; i++) {
canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
}
});但结果与我想要的相去甚远(即，图像不平滑，因为我是用矩形绘制的)。我希望它看起来像下图那样平滑：
有什么关于如何实现波形的提示吗？
回答 2
Stack Overflow用户
发布于 2012-03-06 23:19:54
您可能会对AudioJedit感兴趣。这是一个开源项目hosted at GitHub。它有用于加载音频文件小型服务器端node.js脚本，但所有与音频的交互都是在客户端JavaScript中实现的。我认为这与您正在寻找的内容相似。
Stack Overflow用户
发布于 2017-11-18 01:39:45
你的渲染代码效率极低，因为它每秒会渲染44100像素的音频。您最好使用较小的数据集渲染最多的视口宽度。
可以使用audioDurationSeconds * samplerate / viewPortWidthPx计算在视口中拟合波形所需的每像素采样范围。因此，对于1000px的视口和2秒的44100采样率的音频文件，每像素采样数= (2 * 44100) / 1000 = ~88。对于屏幕上的每个像素，您从该采样范围中获取最小和最大值，然后使用此数据绘制波形。
这是一个这样做的示例算法，但允许您提供每个像素的样本作为参数，以及允许虚拟滚动和缩放的滚动位置。它包括一个分辨率参数，您可以调整它的性能，这表明它应该在每个像素采样范围内采样多少：Drawing zoomable audio waveform timeline in Javascript
这里的绘制方法和你的相似，为了平滑它，你需要使用lineTo而不是fillRect.This，实际上差异应该不是很大，我想你可能忘记了在画布上设置宽度和高度属性。在css中设置此属性会导致绘制模糊，您需要设置属性。
let drawWaveform = function(canvas, drawData, width, height) {
let ctx = canvas.getContext('2d');
let drawHeight = height / 2;
// clear canvas incase there is already something drawn
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(0, drawHeight);
for(let i = 0; i < width; i++) {
// transform data points to pixel height and move to centre
let minPixel = drawData[i][0] * drawHeigth + drawHeight;
ctx.lineTo(i, minPixel);
}
ctx.lineTo(width, drawHeight);
ctx.moveTo(0, drawHeight);
for(let i = 0; i < width; i++) {
// transform data points to pixel height and move to centre
let maxPixel = drawData[i][1] * drawHeigth + drawHeight;
ctx.lineTo(i, maxPixel);
}
ctx.lineTo(width, drawHeight);
ctx.closePath();
ctx.fill(); // can do ctx.stroke() for an outline of the waveform
} https://stackoverflow.com/questions/9516324
复制相似问题