Web Audio API hands-on teaches you how to use web APIs to process sound signals: visual music demo,
1. Introduction to Web Audio APIs
The Web Audio API provides a very effective and universal system for controlling Audio on the Web, in general, we can use various methods provided by the Web Audio API to operate the sound in various sources, process the sound, and visualize the sound.
To use the Web Audio API, let's take a brief look at its workflow:
ItsCompatibilityAs follows:
Desktop:
| Browser | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
| Supported versions | 14 |
23 | Not Implemented | 15 | 6 |
Mobile Terminal:
Browser |
Android |
Chrome |
Firefox Mobile (Gecko) |
Firefox OS |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|---|
| Supported versions | Not Implemented | 28 |
25 | 1.2 | Not Implemented | Not Implemented | 6 |
2. Sample Code "talking is cheap, show me the codes ."
I know that you don't want to listen to any time-domain transformation, Fourier transformation, or web audio api principles, so I will not talk much about it. I just put the Code directly, let's take a look at the effect and explain it to you.
Copy and paste it as you like, and run it in a modern browser. (for IE, click the Red Cross in the upper right corner. Thank you ).
NOTE: For the src attribute content of the audio tag, find a sound source format supported by the browser on the local machine.
<! DOCTYPE html>
3. Code Analysis
Let's start with the body section.
<Body onload = "init ();">The onload attribute is used to call the initialization function init (), which initializes some variables after the page is generated to avoid reading the relevant DOM.
function init() { canvasOne = document.getElementById('canvasOne'); ctx = canvasOne.getContext("2d"); canvasTwo = document.getElementById('canvasTwo'); ctx2 = canvasTwo.getContext("2d"); }The first canvas: obtains the sound from the audio source.
First, an audio tag, select a src on the local machine, set the controls attribute to display the player control page in the browser, and set the id to audio.
Set a canvas with the id "canvasFormAudio.
<Audio src = ". /Fatbros.ogg "controls =" controls "id =" audio "> your browser does not support audio tags </audio>Obtain sound source and drawing
// Process the audio source directly from audio and declare some necessary variables var context1; var source; var analyserfa; var canvasFormAudio; var ctxfa; // initialize the canvas canvasFormAudio = document. getElementById ('canvasformaudio '); ctxfa = canvasFormAudio. getContext ("2d ");
// Create an audio environment. Because the browser has different implementations, try {context1 = new (window. audioContext | window. webkitAudioContext);} catch (e) {throw new Error ('the Web Audio API is unavailable ');} // create a analyzer analyserfa = context1.createAnalyser (); window. addEventListener ('load', function (e) {// obtain the sound source from the audio tag source var audio = document. getElementById ("audio"); var source = context1.createMediaElementSource (audio); source. connect (analyserfa); analyserfa. connect (context1.destination); // call the drawing function drawSpectrumfa () ;}, false );
// Plotting function drawSpectrumfa () {var WIDTH = canvasFormAudio. width; var HEIGHT = canvasFormAudio. height; var array = new Uint8Array (128); // copy the current frequency value to analyserfa in an unsigned array. getByteFrequencyData (array); // clearRect (x coordinate in the upper left corner of the rectangle, y coordinate in the upper left corner of the rectangle, clear the width of the rectangle, and clear the height of the rectangle) ctxfa. clearRect (0, 0, WIDTH, HEIGHT); // generate a long rectangle for (var I = 0; I <(array. length); I ++) {var value = array [I]; // fillRect (x coordinate in the upper left corner of the rectangle, y coordinate in the upper left corner of the rectangle, width of the rectangle, height of the rectangle)
// Here, our array has a total of 128 sets of data, so we set the canvas width to 5*128 = 640 ctxfa. fillRect (I * 5, HEIGHT-value, 3, HEIGHT);} // plot based on the browser frequency or operate some non-css effects requestAnimationFrame (drawSpectrumfa );}
Second: Frequency Domain Image Imitation and circular acoustic wave diagram
The audio sources of these two images are obtained by calling the computer microphone in the browser, so you must agree to the microphone Permission requested by the browser.
Drawing Area
<H1> Frequency Domain Image ImitationInitializes the init () function, obtains the audio source from the microphone, and draws the function.
Var canvas; var ctx; var audioContext; var analyser; var mic; // initialize two canvas functions, declared as 2d drawing function init () {canvasOne = document. getElementById ('canvasone'); ctx = canvasOne. getContext ("2d"); canvasTwo = document. getElementById ('canonicalastwo '); ctx2 = canvasTwo. getContext ("2d");} // getMedia calls the following parameters and returns a multimedia stream.
// Constraints (optional): {video: true, audio: true}, indicating the type of the multimedia.
// Var stream = navigator. getUserMedia (constraints, successCallback, errorCallback); navigator. getMedia = (navigator. getUserMedia | navigator. webkitGetUserMedia | navigator. mozGetUserMedia | navigator. msGetUserMedia); navigator. getMedia ({audio: true}, function (stream) {audioContext = new (window. audioContext | window. webkitAudioContext); // returns a multimedia stream mic = audioContext. createMediaStreamSource (stream); // creates an AnalyserNode creates an analyser = audioContext. createAnalyser (); // The default value of fftsize is 2048, which is the value of the fast Fourier transform used for frequency domain analysis. It must be a power of 2, and the data we get is usually half of it, the following describes analyser. fftSize = 256; mic. connect (analyser );
// Call the drawing function drawSpectrum () ;}, function () {}); // circular acoustic drawing and rectangular drawing function drawSpectrum () {var WIDTH = canvasOne. width; var HEIGHT = canvasOne. height; // The length is 128. The unsigned array is used to save the frequency-domain data var array = new Uint8Array (128) returned by getByteFrequencyData; analyser. getByteFrequencyData (array );
// The following is a drawing based on the frequency data, mainly for the canvas knowledge, do not answer ctx in detail. clearRect (0, 0, WIDTH, HEIGHT); ctx2.clearRect (0, 0,800,800); for (var I = 0; I <(array. length); I ++) {var value = array [I]; ctx. fillRect (I * 5, HEIGHT-value, 3, HEIGHT);} // ctx2.clearRect (700,700, WIDTH, HEIGHT); for (var I = 0; I <(array. length); I ++) {var value = array [I]; ctx2.beginPath (); ctx2.arc (300,300, value, 0,360, false); ctx2.lineWidth = 5; ctx2.strokeStyle = "rgba (" + value + "," + value + ", 0, 0.2)"; ctx2.stroke (); // draw a hollow circle ctx2.closePath ();} // requestAnimationFrame (drawSpectrum );};4. Final Results 6. Reference
1. MDN
2. api Query
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
