javascript - HTML5 音频动画有问题吗？

Question

这似乎只是 JS 中 AnalyserNode 的问题(或者是键盘和椅子之间的问题......)。

基本上，我有一个正确设置的音频文件(正常情况下的流)。然而，一旦我尝试将分析器节点连接到它和目的地之间，一切都会变得困惑。音频不输出，节点在 dataArray 中始终为 0 或未定义。在过去的 7-10 个小时里，我一直在研究这个问题(运气各有不同)，并注意到大多数人在触发“canplay”事件后解决了这个问题，但这对我来说不起作用。任何帮助都会很可爱!

作为背景，这是一个 IceCast 流，尽管我认为它不会伤害/改变任何东西。

$(document).ready(function() {
var audio = new Audio();
audio.id = "audioStream";
audio.src = ; // Snipped our streaming link.
audio.autoplay = true;
audio.preload = "none";

document.body.appendChild(audio);
audio.addEventListener("canplay", function() {
    initAudio(audio);
});
});

function initAudio(audio) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var context = new AudioContext();
    var analyser = context.createAnalyser(); 
    analyser.smoothingTimeConstant = 0.85;

    var source = context.createMediaElementSource(audio); 
    source.connect(analyser);
    analyser.connect(context.destination);

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

    var visualisation = document.getElementById("bounceAnimation");
    var barSpacingPercent = 100 / bufferLength;
    for (var i = 0; i < bufferLength; i++) {
        var div = document.createElement('div');
        div.style["left"] = i * barSpacingPercent + "%";
        div.style["width"] = barSpacingPercent + "%";
        div.style["height"] = "5%";
        div.className = "lineDance";

        visualisation.appendChild(div);
    }
    var bars = visualisation.children;

    function draw(){
        requestAnimationFrame(draw);
        analyser.getByteFrequencyData(dataArray);

        for (i = 0; i < bars.length; i++) {
            bars[i].style["height"] = (dataArray[i] * -1) + '%';
            if(dataArray[i] != 0) {
                alert(dataArray[i]);
            }
        };
    }

    draw();
}

Answer 1

您应该添加:

audio.crossOrigin = "anonymous";

并使用 CORS header 为您的流提供服务。