Pour réaliser une visualisation audio et obtenir des effets sympas, vous devez utiliser certaines méthodes AudioContext fournies par l'API Web Audio :
L'interface AudioContext représente un graphe de traitement audio construit à partir de modules audio liés entre eux, chaque module représenté par un AudioNode . Le contexte audio contrôle la création des nœuds qu'il contient et l'exécution du traitement ou du décodage audio. Avant de faire quoi que ce soit d'autre, vous devez créer un objet AudioContext car tout se passe dans un contexte. Il est recommandé de créer un objet AudioContext et de le réutiliser, plutôt que d'initialiser un nouvel objet AudioContext à chaque fois, et d'utiliser un objet AudioContext pour plusieurs sources audio et canaux différents en même temps.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas>
const ctx = new AudioContext();
createMediaElementSource() de AudioContext est utilisée pour créer un nouvel objet MediaElementAudioSourceNode , saisir un élément HTML<audio>or<video>` existant et l'audio correspondant peut être lu ou modifié.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
createAnalyser() d' AudioContext peut créer un AnalyserNode , qui peut être utilisé pour obtenir des données de temps et de fréquence audio et implémenter la visualisation des données.
const analyseur = ctx.createAnalyser();
La valeur de l'attribut fftSize de l'interface AnalyserNode est une valeur entière longue non signée, qui représente la taille de la fenêtre de l'échantillon (du signal). Ces échantillons (de signaux) sont utilisés pour obtenir des données dans le domaine fréquentiel lors de l'exécution d'une transformation de Fourier rapide (FFT). La valeur de l'attribut fftSize doit être une puissance non nulle de 2 comprise entre 32 et 32 768 ; sa valeur par défaut est 2 048.
analyseur.fftSize = 512 ;
La méthode connect() de AudioNode vous permet de connecter la sortie d'un nœud à une cible spécifiée. Cette cible spécifiée peut être un autre AudioNode (dirigant ainsi les données audio vers le nœud spécifié suivant) ou un AudioParam afin que le nœud précédent. Les données de sortie peuvent automatiquement modifier la valeur du paramètre suivant au fil du temps.
audioSrc.connect(analyseur);
destination de AudioContext renvoie un AudioDestinationNode représentant le nœud de destination final de tous les (nœuds) audio dans context , qui est généralement un périphérique de rendu audio, tel qu'un haut-parleur.
analyseur.connect(ctx.destination)
Le type de tableau Uint8Array représente un tableau d'entiers non signés de 8 bits et le contenu est initialisé à 0 lors de sa création. Après la création, les éléments du tableau peuvent être référencés en tant qu'objets ou en utilisant l'indexation en indice du tableau.
getByteFrequencyData() 方de l'interface AnalyserNode copie les données de fréquence actuelles dans le Uint8Array entrant (tableau d'octets non signés).
Si la longueur du tableau est inférieure à AnalyserNode.frequencyBinCount , alors les éléments supplémentaires de Analyser seront supprimés. Si elle est supérieure, alors les éléments supplémentaires du tableau seront ignorés.
visualisation() {
const arr = new Uint8Array(this.analyser. FrequencyBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(arr);
}, HTMLCanvasElement.getContext() renvoie le contexte canvas , ou null si le contexte n'est pas défini. 2D crée un contexte de rendu bidimensionnel 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((élément, index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); lineTo(start + (index * 4), this.canvasHeight - item / 2);Affichage des effets :
Ceci conclut cet article sur AudioContext pour la visualisation audio (partage de technologie Web). Pour plus d'informations sur AudioContext pour la visualisation audio, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. . Soutenez downcodes.com !