javascript - attribute - title html

Web Audio para visualizar e interactuar con formas de onda.

Question

¿Cómo escribo un programa JavaScript para mostrar una forma de onda de un archivo de audio? Quiero usar Web Audio y Canvas.

Probé este código:

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

Pero el resultado está lejos de lo que quiero (es decir, la imagen no es suave ya que estoy dibujando con rectángulos). Quiero que se vea suave como esta imagen:

¿Algún consejo sobre cómo implementar la forma de onda?

Answer 1

Desarrollé mi propia biblioteca después de todo: wavesurfer.js .

Dibuja una forma de onda a partir de datos PCM y busca regiones del audio haciendo clic en él.

Answer 2

Para un uso (y con suerte ) simple e integración de una forma de onda con su aplicación, es posible que desee comprobar lo que estamos haciendo en IRCAM, especialmente la forma de onda-vis en este caso particular.

Es todo de código abierto y orientado a la modularidad (y trabajo en progreso).

Puedes encontrar una demo aquí
Y el correspondiente repositorio githug.

Answer 3

Su código de renderizado es extremadamente ineficiente porque procesará 44100 píxeles por cada segundo de audio. Preferiblemente, desea representar el ancho de la ventana gráfica con un conjunto de datos reducido.

El rango de muestra por píxel necesario para ajustar la forma de onda en la vista puede calcularse con audioDurationSeconds * samplerate / viewPortWidthPx. Por lo tanto, para una ventana gráfica de 1000 píxeles y un archivo de audio de 2 segundos a 44100, muestre las muestras por píxel = (2 * 44100) / 1000 = ~ 88. Para cada píxel en pantalla, toma el valor mínimo y máximo de ese rango de muestra, utiliza estos datos para dibujar la forma de onda.

Aquí hay un ejemplo de algoritmo que hace esto pero le permite dar muestras por píxel como argumento, así como una posición de desplazamiento para permitir el desplazamiento virtual y el zoom. Incluye un parámetro de resolución que puede ajustar para el rendimiento, esto indica cuántas muestras debe tomar por rango de muestra por píxel: Dibujo de la forma de onda de audio con zoom en Javascript

El método de dibujo allí es similar al tuyo, para suavizarlo necesitas usar lineTo en lugar de fillRect. Esta diferencia no debería ser tan grande, creo que podrías olvidarte de establecer los atributos de ancho y alto en el lienzo. Al establecer esto en las causas css para el dibujo borroso, es necesario establecer los atributos.

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
} 

Answer 4

Usted puede estar interesado en AudioJedit . Este es un proyecto de código abierto alojado en GitHub . Tiene una pequeña secuencia de comandos node.js del lado del servidor para cargar archivos de audio, pero toda la interacción con el audio implementado en JavaScript del lado del cliente. Creo que esto es similar a lo que estás buscando.