音频可视化

最新推荐文章于 2024-08-20 09:44:35 发布

weixin_42199478

最新推荐文章于 2024-08-20 09:44:35 发布

阅读量132

点赞数

分类专栏： canvas js

本文链接：https://blog.csdn.net/weixin_42199478/article/details/119209117

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript创建音乐播放器，并通过Canvas技术实现实时音频波形可视化。代码示例展示了如何加载音频文件、监听点击事件以及动态绘制音符轨迹，适合前端开发者学习音频处理和图形交互技术。

摘要由CSDN通过智能技术生成

代码

html

<body>
    <button id="a" style="font-size: 30px;" onclick="qh('t')">田园香</button>
    <button id="a" style="font-size: 30px;" onclick="qh('s')">上海滩</button>
</body>

js


	var s = document.querySelector('#a');

    var c = new CanvasStart();
    var audio;
    window.onclick = function() {
        var context = c.Context;
        audio = c.audio({
            url: 'file/aYcBAF5t3Y2AN-gEADslOFTrqns464.mp3',
            run: function(output) {
                var zx = (c.$Canvas.width / 2);
                var zy = 250;
                var qx;
                var qy;
                context.beginPath();
                context.strokeStyle = '#e16cff';
                context.lineWidth = 1;

                context.lineCap = 'round';
                context.lineJoin = 'round';
                context.shadowBlur = 5;
                context.shadowColor = '#e16cff';

                // context.moveTo(300, 300);
                var rr = 100; //半径
                var rrr = 1;
                var rrrr = 36;
                for (var i = 0; i < 360; i++) {
                    var value = 5 * (output[i] / 8); //<===获取数据

                    if (i == 0) {
                        qx = Math.cos((i * rrr) / rrrr * Math.PI) * (rr + value) + zx;
                        qy = (-Math.sin((i * rrr) / rrrr * Math.PI) * (rr + value) + zy)
                        context.moveTo(qx, qy);
                    } else if (i == 359) {
                        context.lineTo(qx, qy);
                    } else {
                        //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
                        context.lineTo(Math.cos((i * rrr) / rrrr * Math.PI) * (rr + value) + zx, (-Math.sin((i * rrr) / rrrr * Math.PI) * (rr + value) + zy));
                    }
                }
                context.stroke();
            }
        });
    }

    //切换音乐
    function qh(g) {
        console.log(audio)
        switch (g) {
            case 't':
                audio.src = "file/aYcBAF5t3Y2AN-gEADslOFTrqns464.mp3";
                break;
            case 's':
                audio.src = "file/q5QEAF5vymGAIp-bADK9jnyWn_s067.mp3";
                break;
        }
        audio.play();
        return false;
    }