javascript - HTML5 音频可视化？

Question

我在 Visualizations with Web Audio API 上看到了一个页面这解释了如何进行可视化。我尝试了确切的代码并收到了诸如“ReferenceError:流未定义”之类的错误。有没有办法通过音频元素制作可视化效果？仅当它在 FireFox 上运行时才重要。

Answer 1

简单的方法是:

    let audio = document.getElementById("yourAudioElement");

    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    let ctx = new window.AudioContext();

    // add the audio element node as source for AudioContext instance
    let sourceNode = ctx.createMediaElementSource(audio);

    // if you wish to visualize the audio then you will have to connect this to an analyzer
    let analyzer = ctx.createAnalyser();
    analyser.smoothingTimeConstant = 0.6;
    analyser.fftSize = 512; // frequency sample size 

    // set frequency data
    let frequencyData = new Uint8Array(analyser.frequencyBinCount);

    // connect source node to analyser to collect frequency data
    sourceNode.connect(this.analyser);

    // connect this source to the audio output (your speaker device)
    sourceNode.connect(ctx.destination);

    // you can then start your audio as below
    audio.play();

    // then you can animate the frequence data by calling requestAnimationFrame()
    // this method allows you to keep updating your visualization by frames
    function renderFrame() {
        // you need to check whether audio is playing here to control this recursive call
        requestAnimationFrame(renderFrame);
        analyser.getByteFrequencyData(frequencyData);

        // then just use your imagination to animate the frequency data by frame
        // you can update your canvas here
    }