基于JavaScript实现简单的音乐音谱图效果

function draw() {    
    // 请求下一帧动画    
    animationId = requestAnimationFrame(draw);
    // 获取音频频谱数据    
    analyser.getByteFrequencyData(dataArray);
    // 清空画布    
    ctx.fillStyle = 'black';    
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // 计算每个频谱条的宽度    
    var barWidth = (canvas.width / bufferLength) * 2.5;    
    var barHeight;    
    var x = 0;
    // 遍历频谱数据数组，绘制频谱条    
    for (var i = 0; i < bufferLength; i++) {        
        // 计算频谱条的高度        
        barHeight = dataArray[i] / 255 * canvas.height;
        // 根据频谱条的索引值计算颜色（彩虹色）        
        var hue = i / bufferLength * 360;        
        ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
        // 绘制频谱条矩形       
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        // 更新下一个频谱条的起始位置        
        x += barWidth + 1;    
        
    }
    
}

document.getElementById('playButton').addEventListener('click', function() {
            if (!audioContext) {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                analyser = audioContext.createAnalyser();
                analyser.fftSize = 2048;

                audioElement = document.createElement('audio');
                audioElement.src = '1.mp3';
                audioElement.controls = true;
                audioElement.style.display = 'none';

                document.body.appendChild(audioElement);

                var source = audioContext.createMediaElementSource(audioElement);
                source.connect(analyser);
                analyser.connect(audioContext.destination);

                bufferLength = analyser.frequencyBinCount;
                dataArray = new Uint8Array(bufferLength);
            }

            audioElement.play();
            draw();
        });

        document.getElementById('pauseButton').addEventListener('click', function() {
            audioElement.pause();
            cancelAnimationFrame(animationId);
        });

function draw() {
// 请求下一帧动画
animationId = requestAnimationFrame(draw);

            // 获取音频时域数据
            analyser.getByteTimeDomainData(dataArray);


            // 清空画布并设置背景颜色为lime
            ctx.fillStyle = 'lime';
            ctx.fillRect(0, 0, canvas.width, canvas.height);


            // 设置线条宽度和颜色
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';


            // 开始绘制路径
            ctx.beginPath();


            // 计算每个数据片段的宽度
            var sliceWidth = canvas.width * 1.0 / bufferLength;
            var x = 0;


            // 遍历时域数据数组，绘制波形
            for (var i = 0; i < bufferLength; i++) {
                // 将数据归一化到范围[-1, 1]
                var v = dataArray[i] / 128.0;
                // 计算波形点的纵坐标
                var y = v * canvas.height / 2;


                if (i === 0) {
                    // 移动到第一个点的位置
                    ctx.moveTo(x, y);
                } else {
                    // 连接到下一个点的位置
                    ctx.lineTo(x, y);
                }


                // 更新下一个点的横坐标
                x += sliceWidth;
            }


            // 连接最后一个点到画布右侧中点，形成闭合路径
            ctx.lineTo(canvas.width, canvas.height / 2);


    // 绘制路径
   ctx.stroke();
        }