How to use H5's Canvas to draw a music circular spectrogram

This time I will bring you H5's CanvasHow to draw a music ring spectrogram. What are the precautions for H5Canvas to draw a music ring spectrogram. The following is a practical case. Let’s take a look.

Many of our friends at Station B must have seen the video of using the visual music player made by AE to play music. It looks very cool and exciting.

So today I will use Canvas to make a simple ring spectrogram.

Then~ ヾ(ｏ･ω･)ﾉ Let’s get started!

1. First draw the effect of static

static effect

Drawing the static effect is very simple. We only need to start from one point and draw lines according to a certain angle. Then draw a circle to cover the line starting from the midpoint

<canvas id="wrap" height="800" width="800"></canvas><script>
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");
    (function drawSpectrum() {
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < 360; i++) {            var value = 8;
            cxt.beginPath();
            cxt.lineWidth = 2;
            cxt.moveTo(300, 300);             //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
            cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false); 
        cxt.fillStyle = "#fff";
        cxt.stroke();
        cxt.fill(); 
    })();</script>

2. Call AudioAPI to draw the spectrum of music

Draw the spectrum of music

After the first step is completed , the second step is very simple, change the line length by calling AudioAPI to get audio changes.

Notice! ! ! The latest chrome browser may need to run on an http server~

You can refer to the article to draw the spectrogram of music (using Analyser node)

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="800" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(360);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < 360; i++) {            var value = output[i] / 8;//<===获取数据
            cxt.beginPath();
            cxt.lineWidth = 2;
            cxt.moveTo(300, 300);            //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
            cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fillStyle = "#fff";
        cxt.stroke();
        cxt.fill();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

3. Ring left and right synchronous display

In fact, after step 2 of the internship, more than half of it has been completed, but careful friends will find that there is a lot of difference between the lines on the rightmost end point of the circle.

There are many ways to deal with it. We use one of the simple ways to deal with it, that is, to display it symmetrically.

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(361);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < output.length; i++) {            var value = output[i] / 10;            //绘制左半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();            //绘制右半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo( (Math.sin((i *0.5) / 180 * Math.PI) * (200 + value) + 300),-Math.cos((i *0.5) / 180 * Math.PI) * (200 + value) + 300);
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fillStyle = "#fff";
        cxt.stroke();
        cxt.fill();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

4. Add a waveform graph

Finally let’s try to add a waveform graph in the circle

You can refer to the article to draw the waveform graph of music (using the Analyser node)

Example

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(361);    //计算出采样频率44100所需的缓冲区长度
    var length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;    //创建数据 
    var output2 = new Uint8Array(length);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < output.length; i++) {            var value = output[i] / 10;            //绘制左半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();            //绘制右半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo((Math.sin((i * 0.5) / 180 * Math.PI) * (200 + value) + 300), -Math.cos((i * 0.5) / 180 * Math.PI) * (200 + value) + 300);
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fillStyle = "#fff";
        cxt.stroke();
        cxt.fill();        //将缓冲区的数据绘制到Canvas上 
        analyser.getByteTimeDomainData(output2);        var height = 100, width = 400;
        cxt.beginPath();        for (var i = 0; i < width; i++) {
            cxt.lineTo(i + 100, 300 - (height / 2 * (output2[output2.length * i / width | 0] / 256 - 0.5)));
        }
        cxt.stroke();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use canvas to make a useful graffiti drawing board

How to use s-xlsx to implement Excel File import and export (Part 2)

The above is the detailed content of How to use H5's Canvas to draw a music circular spectrogram. For more information, please follow other related articles on the PHP Chinese website!