Para lograr visualización de audio y lograr algunos efectos interesantes, debe utilizar algunos métodos AudioContext proporcionados por Web Audio API:
La interfaz AudioContext representa un gráfico de procesamiento de audio creado a partir de módulos de audio vinculados entre sí, cada módulo representado por un AudioNode . El contexto de audio controla la creación de los nodos que contiene y la ejecución del procesamiento o decodificación de audio. Antes de hacer cualquier otra cosa, necesitas crear un objeto AudioContext porque todo sucede dentro de un contexto. Se recomienda crear un objeto AudioContext y reutilizarlo, en lugar de inicializar un nuevo objeto AudioContext cada vez, y usar un objeto AudioContext para múltiples fuentes y canalizaciones de audio diferentes al mismo tiempo.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' ancho='300px' alto='300px'></canvas>
const ctx = nuevo AudioContext();
createMediaElementSource() de AudioContext se utiliza para crear un nuevo objeto MediaElementAudioSourceNode , ingresar un elemento HTML<audio>o<video>` existente y el audio correspondiente se puede reproducir o modificar.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
createAnalyser() de AudioContext puede crear un AnalyserNode , que se puede utilizar para obtener datos de tiempo y frecuencia de audio e implementar la visualización de datos.
analizador constante = ctx.createAnalyser();
El valor del atributo fftSize de la interfaz AnalyserNode es un valor entero largo sin signo, que representa el tamaño de la ventana de la muestra (señal). Estas muestras (de señal) se utilizan para obtener datos en el dominio de la frecuencia al realizar una Transformada Rápida de Fourier (FFT). El valor del atributo fftSize debe ser una potencia de 2 distinta de cero en el rango de 32 a 32768; su valor predeterminado es 2048.
analizador.fftSize = 512;
El método connect() de AudioNode le permite conectar la salida de un nodo a un objetivo específico. Este objetivo especificado puede ser otro AudioNode (dirigiendo así los datos de audio al siguiente nodo especificado) o un AudioParam para que el nodo anterior. Los datos de salida pueden cambiar automáticamente el siguiente valor del parámetro a medida que pasa el tiempo.
audioSrc.connect(analizador);
destination de AudioContext devuelve un AudioDestinationNode que representa el nodo de destino final de todo el audio (nodos) en context , que generalmente es un dispositivo de reproducción de audio, como un altavoz.
analizador.connect(ctx.destino)
El tipo de matriz Uint8Array representa una matriz de enteros sin signo de 8 bits y el contenido se inicializa a 0 cuando se crea. Después de la creación, se puede hacer referencia a los elementos de la matriz como objetos o mediante indexación de subíndices de matriz.
getByteFrequencyData() 方de la interfaz AnalyserNode copia los datos de frecuencia actuales en el Uint8Array entrante (matriz de bytes sin signo).
Si la longitud de la matriz es menor que AnalyserNode.frequencyBinCount , se eliminarán los elementos adicionales del Analyser . Si es mayor, se ignorarán los elementos adicionales de la matriz.
visualización() {
const arr = new Uint8Array(this.analyser.frequencyBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(arr);
}, HTMLCanvasElement.getContext() devuelve el contexto canvas , o nulo si el contexto no está definido 2d crea un contexto de representación bidimensional CanvasRenderingContext2D.
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight const start = ((document.body). .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((elemento, índice) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(inicio + (índice * 4), this.canvasHeight); lineTo(inicio + (índice * 4), this.canvasHeight - elemento / 2); this.canvas.stroke();Visualización de efectos:
Con esto concluye este artículo sobre AudioContext para visualización de audio (intercambio de tecnología web). Para obtener más información sobre AudioContext para visualización de audio, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. Espero que lea más en el futuro. ¡Apoya a downcodes.com!