1. Create an AudioContext object

The AudioContext() constructor creates a new AudioContext object that represents an audio processing graph linked by audio modules, each of which is represented by the AudioNode.

let AudioContext = window.AudioContext || window.webkitAudioContext;
letaudioContext = new AudioContext(); // Instantiate the AudioContext objectCopy the code

2. Create AnalyserNode

let analyser;

analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
Copy the code

3. Link nodes

 letaudioSrc = audioContext.createMediaElementSource(audio); // Get audio source file audioSrc. Connect (analyser); analyser.connect(audioContext.destination);Copy the code

4.AnalyserNode analyzes data

 let dataArray = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(dataArray);
Copy the code

5. The use of requestAnimationFrame

RequestAnimationFrame allows you to animate an animation at 60fps while constantly redrawing the contents of the Canvas.

function render() { requestAnimationFrame(render); / /... } requestAnimationFrame(render);Copy the code

6. Browser compatibility:

The browser Chrome Firefox IE Opera Safari
Support version 10.0 25.0 Does not support 15.0 6.0

The sample code

js

let AudioContext = window.AudioContext || window.webkitAudioContext;
let audioContext = new AudioContext();
let analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
analyser = audioContext.createAnalyser();

let audio = document.getElementById('audio');
let audioSrc = audioContext.createMediaElementSource(audio);
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
let canvas = document.getElementById('canvas');

let ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
let grd = ctx.createLinearGradient(0, 0, 600, 0);
grd.addColorStop(0, "#00d0ff");
grd.addColorStop(1, "#eee");

let grd2 = ctx.createLinearGradient(0, 0, 600, 0);
grd2.addColorStop(0, "#fff");
grd2.addColorStop(1, "#e720ee");
let het=0;

var globalID;
function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let dataArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(dataArray);
    ctx.beginPath();
    for (let i = 0; i < 200; i++) {
        let value = dataArray[6*i];
        ctx.fillStyle = grd;
        ctx.fillRect(i * 5, 300, 2, -value + 1);
        ctx.fillRect(i * 5, 280-value, 2, het);
        ctx.fillStyle = grd2;
        ctx.fillRect(i * 5, 300, 2, value + 1);
        ctx.fillRect(i * 5, 320+value, 2, het);
    }
    globalID=requestAnimationFrame(render);
};
globalID=requestAnimationFrame(render);


var fileChange = document.getElementById('fileChooser');
	fileChange.onchange = fileChange=(e)=>{
   if( e.target.files[0]){
	let playfile= URL.createObjectURL( e.target.files[0]);
	audio.src=playfile;
	let musicName = e.target.files[0].name.split('. ')[0];
	audio.play();
	}
};
	
Copy the code

html

<! DOCTYPE html> <html> <head> <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        body{
            height: 100%;
            width: 100%;
            background-color: #3f3f3f;
        }
    </style>
    <body>
        <audio id="audio"  src="music/music.mp3">
            Your browser does not support the audio element.
        </audio>
        <canvas id="canvas" width="800" height="600" >
            Your browser does not support Canvas tag.
        </canvas>
        <input id="fileChooser" type="file" />
    </body>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</html>
Copy the code

Example: liazm.com/audio

Making: github.com/justcoolls/…