Um eine Audiovisualisierung zu erreichen und einige coole Effekte zu erzielen, müssen Sie einige von der Web-Audio-API bereitgestellte AudioContext-Methoden verwenden:
Die AudioContext -Schnittstelle stellt einen Audioverarbeitungsgraphen dar, der aus miteinander verbundenen Audiomodulen besteht, wobei jedes Modul durch einen AudioNode dargestellt wird. Der Audiokontext steuert die Erstellung der darin enthaltenen Knoten und die Ausführung der Audioverarbeitung oder -dekodierung. Bevor Sie etwas anderes tun, müssen Sie ein AudioContext -Objekt erstellen, da alles innerhalb eines Kontexts geschieht. Es wird empfohlen, ein AudioContext -Objekt zu erstellen und es wiederzuverwenden, anstatt jedes Mal ein neues AudioContext-Objekt zu initialisieren, und ein AudioContext Objekt gleichzeitig für mehrere verschiedene Audioquellen und Pipes zu verwenden.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas>
const ctx = new AudioContext();
createMediaElementSource() AudioContext wird verwendet, um ein neues MediaElementAudioSourceNode Objekt zu erstellen, ein vorhandenes HTML<audio>oder<video>`-Element einzugeben und das entsprechende Audio abzuspielen oder zu ändern.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
createAnalyser() von AudioContext kann einen AnalyserNode erstellen, der zum Abrufen von Audiozeit- und -frequenzdaten und zur Implementierung der Datenvisualisierung verwendet werden kann.
constanalysator = ctx.createAnalyser();
Der Wert des fftSize-Attributs der AnalyserNode Schnittstelle ist ein vorzeichenloser langer ganzzahliger Wert, der die Fenstergröße der (Signal-)Probe darstellt. Diese (Signal-)Abtastwerte werden verwendet, um Frequenzbereichsdaten zu erhalten, wenn eine schnelle Fourier-Transformation (FFT) durchgeführt wird. Der Wert des fftSize -Attributs muss eine Zweierpotenz ungleich Null im Bereich von 32 bis 32768 sein; der Standardwert ist 2048.
analysator.fftSize = 512;
Mit der connect() Methode der AudioNode Schnittstelle können Sie den Ausgang eines Knotens mit einem angegebenen Ziel verbinden. Dieses angegebene Ziel kann ein anderer AudioNode sein (wodurch die Audiodaten an den nächsten angegebenen Knoten weitergeleitet werden) oder ein AudioParam, sodass der vorherige Knoten Die Ausgabedaten können im Laufe der Zeit automatisch den nächsten Parameterwert ändern.
audioSrc.connect(analysator);
destination Eigenschaft von AudioContext gibt einen AudioDestinationNode zurück, der den endgültigen Zielknoten aller Audio(knoten) im context darstellt, bei dem es sich im Allgemeinen um ein Audiowiedergabegerät, z. B. einen Lautsprecher, handelt.
analysator.connect(ctx.destination)
Der Array-Typ Uint8Array stellt ein 8-Bit-Integer-Array ohne Vorzeichen dar, und der Inhalt wird beim Erstellen auf 0 initialisiert. Nach der Erstellung können die Elemente im Array als Objekte oder mithilfe der Array-Indexindizierung referenziert werden.
getByteFrequencyData() 方der Schnittstelle AnalyserNode kopiert die aktuellen Frequenzdaten in das eingehende Uint8Array (vorzeichenloses Byte-Array).
Wenn die Länge des Arrays kleiner als AnalyserNode.frequencyBinCount ist, werden die zusätzlichen Elemente des Analyser gelöscht. Wenn sie größer ist, werden die zusätzlichen Elemente des Arrays ignoriert.
visualisierung() {
const arr = new Uint8Array(this.analyser.frequenzBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(arr);
}, HTMLCanvasElement.getContext() gibt den canvas Kontext zurück oder null, wenn der Kontext nicht definiert ist. 2d erstellt einen zweidimensionalen CanvasRenderingContext2D-Rendering-Kontext.
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, index) => { this.canvas.beginPath(); this.canvas.StrokeStyle = '#B2AFF4'; this.canvas.moveTo(start + (index * 4), this.canvas. lineTo(start + (index * 4), this.canvasHeight - item / 2);Effektanzeige:
Damit ist dieser Artikel über AudioContext für die Audiovisualisierung (Web-Technologie-Sharing) abgeschlossen. Weitere Informationen zu AudioContext für die Audiovisualisierung finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie werden in Zukunft mehr lesen . Unterstützen Sie downcodes.com!