function draw() {    
    // 請(qǐng)求下一幀動(dòng)畫(huà)    
    animationId = requestAnimationFrame(draw);
    // 獲取音頻頻譜數(shù)據(jù)    
    analyser.getByteFrequencyData(dataArray);
    // 清空畫(huà)布    
    ctx.fillStyle = 'black';    
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // 計(jì)算每個(gè)頻譜條的寬度    
    var barWidth = (canvas.width / bufferLength) * 2.5;    
    var barHeight;    
    var x = 0;
    // 遍歷頻譜數(shù)據(jù)數(shù)組，繪制頻譜條    
    for (var i = 0; i < bufferLength; i++) {        
        // 計(jì)算頻譜條的高度        
        barHeight = dataArray[i] / 255 * canvas.height;
        // 根據(jù)頻譜條的索引值計(jì)算顏色（彩虹色）        
        var hue = i / bufferLength * 360;        
        ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
        // 繪制頻譜條矩形       
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
        // 更新下一個(gè)頻譜條的起始位置        
        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() {
// 請(qǐng)求下一幀動(dòng)畫(huà)
animationId = requestAnimationFrame(draw);

            // 獲取音頻時(shí)域數(shù)據(jù)
            analyser.getByteTimeDomainData(dataArray);


            // 清空畫(huà)布并設(shè)置背景顏色為lime
            ctx.fillStyle = 'lime';
            ctx.fillRect(0, 0, canvas.width, canvas.height);


            // 設(shè)置線條寬度和顏色
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';


            // 開(kāi)始繪制路徑
            ctx.beginPath();


            // 計(jì)算每個(gè)數(shù)據(jù)片段的寬度
            var sliceWidth = canvas.width * 1.0 / bufferLength;
            var x = 0;


            // 遍歷時(shí)域數(shù)據(jù)數(shù)組，繪制波形
            for (var i = 0; i < bufferLength; i++) {
                // 將數(shù)據(jù)歸一化到范圍[-1, 1]
                var v = dataArray[i] / 128.0;
                // 計(jì)算波形點(diǎn)的縱坐標(biāo)
                var y = v * canvas.height / 2;


                if (i === 0) {
                    // 移動(dòng)到第一個(gè)點(diǎn)的位置
                    ctx.moveTo(x, y);
                } else {
                    // 連接到下一個(gè)點(diǎn)的位置
                    ctx.lineTo(x, y);
                }


                // 更新下一個(gè)點(diǎn)的橫坐標(biāo)
                x += sliceWidth;
            }


            // 連接最后一個(gè)點(diǎn)到畫(huà)布右側(cè)中點(diǎn)，形成閉合路徑
            ctx.lineTo(canvas.width, canvas.height / 2);


    // 繪制路徑
   ctx.stroke();
        }