H5 の Canvas を使用して音楽円形スペクトログラムを描画する方法

今回は、H5のCanvasを使って音楽リングのスペクトログラムを描画する方法を紹介します。H5Canvasで音楽リングのスペクトログラムを描画するための注意事項をいくつか紹介します。

Station B の友人の多くは、AE が作成したビジュアル ミュージック プレーヤーを使用して音楽を再生するビデオを見たことがあるはずです。とてもクールでエキサイティングに見えます。

ということで、今日はCanvasを使って簡単なリングスペクトログラムを作成してみます。

それでは〜ヾ(･･ω･)ﾉ 始めましょう！

1. まず、静的効果

静的効果

を描画します。点と特定の角度から線を描き、次にその線の開始点を覆う円を描くだけです。中間点から

<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. AudioAPIを呼び出して音楽のスペクトログラムを描画します

最初のステップが完了したら、2番目のステップは非常に簡単です。AudioAPIを呼び出して

を取得します。オーディオ

が変わります。 注意！ ！ ！最新の Chrome ブラウザは http サーバー上で実行する必要がある場合があります~

音楽のスペクトログラムを描画する方法については (Analyzer ノードを使用) の記事を参照してください

<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. 左右同時表示を鳴らします

インターンシップ ステップ 2 の後, 実際には半分以上が完成していますが、注意深い人なら、リングの右端の端点の線の間に大きな違いがあることに気づくでしょう。

それに対処する方法はたくさんありますが、私たちはこれに対処する簡単な方法の 1 つとして、対称に表示することを使用します。

<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. 波形グラフを追加します

最後にサークル内に波形グラフを追加してみましょう

音楽の波形グラフを描画する方法(Analyzerノードを使用)はこちらの記事を参照してください

例

<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>

と思いますこの記事のケースを読みました。この方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

Canvas を使って便利な落書きボードを作成する方法

s-xlsx を使用して Excel ファイルをインポートおよびエクスポートする方法 (パート 2)

以上がH5 の Canvas を使用して音楽円形スペクトログラムを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。