Home>Web design tutorial>WEB standardization

AudioContext implements audio visualization

Author：Eve Cole Update Time：2024-12-18 17:57:19

To achieve audio visualization and achieve some cool effects, you need to use some methods AudioContext provided by the Web Audio API:

The AudioContext interface represents an audio processing graph built from audio modules linked together, each module represented by an AudioNode . The audio context controls the creation of the nodes it contains and the execution of audio processing or decoding. Before doing anything else, you need to create an AudioContext object because everything happens within a context. It is recommended to create an AudioContext object and reuse it, rather than initializing a new AudioContext object each time, and to use an AudioContext object for multiple different audio sources and pipes at the same time.

1. Prepare audio and canvas tags

 <audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

2. Create and return a new AudioContext object.

 const ctx = new AudioContext();

3. Create a new MediaElementAudioSourceNode object

createMediaElementSource() method of AudioContext interface is used to create a new MediaElementAudioSourceNode object, input an existing HTML<audio>or<video>` element, and the corresponding audio can be played or modified.

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

4. Create AnalyserNode object

createAnalyser() method of AudioContext can create an AnalyserNode , which can be used to obtain audio time and frequency data and implement data visualization.

 const analyzer = ctx.createAnalyser();

5. Set the fftSize attribute

The value of the fftSize attribute of the AnalyserNode interface is an unsigned long integer value, which represents the window size of the (signal) sample. These (signal) samples are used to obtain frequency domain data when performing a Fast Fourier Transform (FFT). The value of the fftSize attribute must be a non-zero power of 2 in the range from 32 to 32768; its default value is 2048.

 analyzer.fftSize = 512;

6. Link audioSrc and analyzer

The connect() method of AudioNode interface allows you to connect the output of a node to a specified target. This specified target may be another AudioNode (thus directing the audio data to the next specified node) or an AudioParam so that the previous node The output data can automatically change the next parameter value as time passes.

 audioSrc.connect(analyser);

7. Link analyzer and ctx.destination

destination property of AudioContext returns an AudioDestinationNode representing the final destination node of all audio (nodes) in context , which is generally an audio rendering device, such as a speaker.

 analyzer.connect(ctx.destination)

8. The song is playing in progress

The Uint8Array array type represents an 8-bit unsigned integer array, and the content is initialized to 0 when created. After creation, the elements in the array can be referenced as objects or using array subscript indexing.

getByteFrequencyData() 方of the AnalyserNode interface copies the current frequency data to the incoming Uint8Array (unsigned byte array).

If the length of the array is less than AnalyserNode.frequencyBinCount , then the extra elements of Analyser will be deleted. If it is greater, then the extra elements of the array will be ignored.

 visualization() {

const arr = new Uint8Array(this.analyser.frequencyBinCount);

this.analyser.getByteFrequencyData(arr);

this.draw(arr);

},

9. Use canvas to draw audio maps

HTMLCanvasElement.getContext() method returns the canvas context, or null if the context is not defined. 2d creates a CanvasRenderingContext2D two-dimensional rendering context.

 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.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); this.canvas. lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke(); });}

Effect display:

This concludes this article about AudioContext for audio visualization (web technology sharing). For more information about AudioContext for audio visualization, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will read more in the future. Support downcodes.com!

Related Articles