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 = "匿名";

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