Web 音频 API - 使用 <audio> 元素

Question

我正在尝试创建反应式音乐可视化，如本示例所示：http://webaudioapi.com/samples/visualizer/

我想做的是使用缓冲音频 htmlmediaelements 来避免缓慢。

如何将可视化功能连接到音频元素？

编辑：我使用 blip.js 再次尝试，但在

analyser.getByteTimeDomainData(dataArray);

行出现错误。

这是代码：

$(document).ready(function() {
    var audio = new Audio('5minutes.mp3');
    var source = blip.node('audioBufferSource');
    var analyser = blip.node('analyser');
    var canvas = document.querySelector('canvas');
    var canvasCtx = canvas.getContext('2d');
    var audioCtx = blip.getContext;

    source.connect(analyser);
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);

    function draw() {
        WIDTH = 512;
        HEIGTH = 256;
        drawVisual = requestAnimationFrame(draw);
        analyser.getByteTimeDomainData(dataArray);
        canvasCtx.fillStyle = 'rgb(200, 200, 200)';
        canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
        canvasCtx.lineWidth = 2;
        canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
        canvasCtx.beginPath();
        var sliceWidth = WIDTH * 1.0 / bufferLength;
        var x = 0;
        for(var i = 0; i < bufferLength; i++) {

            var v = dataArray[i] / 128.0;
            var y = v * HEIGHT/2;

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

            x += sliceWidth;
        }
        canvasCtx.lineTo(canvas.width, canvas.height/2);
        canvasCtx.stroke();
    };
    draw();
    
    $('#play').on('click', function () {
        audio.play();
    });
    $('#stop').on('click', function () {
        audio.stop();
    });
});

Answer 1

我找到了方法：

http://jsfiddle.net/tomasantunes/hb5huzew/

$(document).ready(function() {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

var source = audioCtx.createMediaElementSource(myAudio);

var analyser = audioCtx.createAnalyser();

source.connect(分析器); analyzer.connect(audioCtx.destination);

var canvas = document.querySelector('canvas');
var canvasCtx = canvas.getContext('2d');

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

function draw() {
    WIDTH = 512;
    HEIGHT = 256;
    drawVisual = requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);
    canvasCtx.fillStyle = 'rgb(200, 200, 200)';
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
    canvasCtx.lineWidth = 2;
    canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
    canvasCtx.beginPath();
    var sliceWidth = WIDTH * 1.0 / bufferLength;
    var x = 0;
    for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;

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

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

});