Para obter a visualização de áudio e alguns efeitos interessantes, você precisa usar alguns métodos AudioContext fornecidos pela API de áudio da Web:
A interface AudioContext representa um gráfico de processamento de áudio construído a partir de módulos de áudio interligados, cada módulo representado por um AudioNode . O contexto de áudio controla a criação dos nós que contém e a execução do processamento ou decodificação de áudio. Antes de fazer qualquer outra coisa, você precisa criar um objeto AudioContext porque tudo acontece dentro de um contexto. É recomendado criar um objeto AudioContext e reutilizá-lo, em vez de inicializar um novo objeto AudioContext a cada vez, e usar um objeto AudioContext para múltiplas fontes de áudio e pipes diferentes ao mesmo tempo.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas>
const ctx = new AudioContext();
createMediaElementSource() da interface AudioContext é usado para criar um novo objeto MediaElementAudioSourceNode , inserir um elemento HTML<audio>ou<video>` existente e o áudio correspondente pode ser reproduzido ou modificado.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
createAnalyser() de AudioContext pode criar um AnalyserNode , que pode ser usado para obter dados de tempo e frequência de áudio e implementar a visualização de dados.
analisador const = ctx.createAnalyser();
O valor do atributo fftSize da interface AnalyserNode é um valor inteiro longo sem sinal, que representa o tamanho da janela da amostra (sinal). Essas amostras (de sinal) são usadas para obter dados no domínio da frequência ao realizar uma Transformada Rápida de Fourier (FFT). O valor do atributo fftSize deve ser uma potência diferente de zero de 2 no intervalo de 32 a 32768;
analisador.fftSize = 512;
O método connect() da interface AudioNode permite conectar a saída de um nó a um destino especificado. Este destino especificado pode ser outro AudioNode (direcionando assim os dados de áudio para o próximo nó especificado) ou um AudioParam para que o nó anterior. Os dados de saída podem alterar automaticamente o próximo valor do parâmetro com o passar do tempo.
audioSrc.connect(analisador);
destination de AudioContext retorna um AudioDestinationNode que representa o nó de destino final de todo o áudio (nós) no context , que geralmente é um dispositivo de renderização de áudio, como um alto-falante.
analisador.connect(ctx.destination)
O tipo de matriz Uint8Array representa uma matriz inteira não assinada de 8 bits e o conteúdo é inicializado como 0 quando criado. Após a criação, os elementos do array podem ser referenciados como objetos ou usando indexação de subscritos do array.
getByteFrequencyData() 方da interface AnalyserNode copia os dados de frequência atuais para o Uint8Array de entrada (matriz de bytes não assinados).
Se o comprimento da matriz for menor que AnalyserNode.frequencyBinCount , os elementos extras do Analyser serão excluídos. Se for maior, os elementos extras da matriz serão ignorados.
visualização() {
const arr = novo Uint8Array(this.analyser.frequencyBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(arr);
}, HTMLCanvasElement.getContext() retorna o contexto canvas ou null se o contexto não estiver definido 2d cria um contexto de renderização 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((item, índice) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; lineTo(start + (índice * 4), this.canvasHeight - item / 2); this.canvas.stroke() });}Exibição de efeito:
Isso conclui este artigo sobre AudioContext para visualização de áudio (compartilhamento de tecnologia da web). Para obter mais informações sobre AudioContext para visualização de áudio, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. . Suporte downcodes.com!