[參考文章](Web Audio - 繪制音頻圖譜 - 掘金 (juejin.cn))

二、實(shí)時(shí)頻率圖

實(shí)現(xiàn)第二種類型，獲取實(shí)時(shí)頻率，用到的API與第一種有區(qū)別，但流程一直，都是通過一個(gè)音頻源節(jié)點(diǎn)通過連接達(dá)到效果。只不過在連接的中間加入了一個(gè)分析器analyser，在將分析器連接到輸出設(shè)備。

    const audio =document.querySelector('audio')
    //解決音頻跨域問題
    audio.crossOrigin ='anonymous'
    const  canvas =document.querySelector('canvas')
    const ctx=canvas.getContext("2d")
        function initCanvas(){
        //初始化canvas
            canvas.width=window.innerWidth*devicePixelRatio
            canvas.height=(window.innerHeight/2)*devicePixelRatio
        }
        initCanvas()
        //將數(shù)據(jù)提出來
        let dataArray,analyser;
        //播放事件
        audio.onplay=function(){
            //創(chuàng)建一個(gè)音頻上下文實(shí)例
            const audioCtx=new (window.AudioContext || window.webkitAudioContext)();
            //添加一個(gè)音頻源節(jié)點(diǎn)
            const source=audioCtx.createMediaElementSource(audio);
            //分析器節(jié)點(diǎn)
             analyser=audioCtx.createAnalyser();
            //fft分析器  越大 分析越細(xì)
            analyser.fftSize=512
            //創(chuàng)建一個(gè)無符號字節(jié)的數(shù)組
             dataArray=new Uint8Array( analyser.frequencyBinCount);
            //音頻源節(jié)點(diǎn) 鏈接分析器
            source.connect(analyser)
            //分析器鏈接輸出設(shè)備
            analyser.connect(audioCtx.destination,)
        }

            requestAnimationFrame(draw)
            //
            const {width ,height}=canvas;
            ctx.clearRect(0,0,width,height)
            //分析器節(jié)點(diǎn)分析出的數(shù)據(jù)到數(shù)組中
            ctx.fillStyle='#78C5F7'
           ctx.lineWidth = 2;
            ctx.beginPath();
            //getByteFrequencyData，分析當(dāng)前音頻源的數(shù)據(jù) 裝到dataArray數(shù)組中去
            //獲取實(shí)時(shí)數(shù)據(jù)
            analyser.getByteFrequencyData(dataArray)
            // console.log(dataArray);
            const len =dataArray.length;
            const barWidth=width/len;
            let x=0;
            for(let i=0;i<len;i++){
                const data=dataArray[i];
                const barHeight=data/255*height;
           
                // ctx.fillRect(x,y,barWidth,height)
                
        let v = dataArray[i] / 128.0;
        let y = v * height/2;

        if(i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }

        x += barWidth;
            }
            // ctx.lineTo(canvas.width, canvas.height/2);
            ctx.stroke();
        }
        draw();

或者直接在 aduio標(biāo)簽中 加入 crossorigin="anonymous"

總結(jié)

雖然現(xiàn)在已經(jīng)有很多開源的對于音頻相關(guān)的庫，但如果真正的想要去了解，去學(xué)習(xí)音頻相關(guān)的東西。必須要去深入學(xué)習(xí)相關(guān)的Web Audio API，當(dāng)然這里只是用了其中兩種的方法去實(shí)現(xiàn)Web Audio去實(shí)現(xiàn)可視化，算是一個(gè)基礎(chǔ)入門，對于文中的createBufferSource，createMediaElementSource，createAnalyser，AudioContext，arrayBuffer，decodeAudioData等等相關(guān)的API都需要去了解，在可視化方面，還有多種多樣的方式去繪制動畫，如WebGL。對音頻的處理也不只是在可視化方面。