Web音频可视化并与波形进行交互 [英] Web Audio to visualize and interact with waveforms

问题描述

如何编写JavaScript程序以从音频文件显示波形？我想使用Web Audio和Canvas。

我试过这个代码：

 （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）; 
} 
} 
  

但结果远远不是我想要的（即，绘制与矩形）。我希望它看起来像这样的图像：

解决方案

p>您可能对 AudioJedit 感兴趣。这是一个开放源代码项目托管在GitHub 。它有小的服务器端node.js脚本用于加载音频文件，但所有与客户端JavaScript中实现的音频交互。我认为这是类似于你正在寻找。

How do I write a JavaScript program to display a waveform from an audio file? I want to use Web Audio and Canvas.

I tried this code:

(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);
   }
});

But the result is far from what I want (namely, the image is not smooth since I'm drawing with rectangles). I want it to look smooth like this image:

Any hints on how to implement the waveform?

解决方案

You may be interested in AudioJedit. This is an open source project hosted at GitHub. It have small server-side node.js script for loading audio files, but all interaction with audio implemented in client-side JavaScript. I think this is similar to what you are looking for.

这篇关于Web音频可视化并与波形进行交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！