HTML5 音频动画有问题？

Question

这似乎只是 JS 中的 AnalyserNode 的问题（或者它在键盘和椅子之间...）。

基本上，我有一个正确设置的音频文件（在正常情况下是流媒体）。然而，一旦我尝试连接它和目的地之间的分析器节点，一切都变得一团糟。音频不输出，节点在 dataArray 中始终为 0 或未定义。在过去的 7-10 个小时里，我一直在研究这个问题（运气各不相同），发现大多数人在触发 "canplay" 事件后就解决了这个问题，但这对我不起作用。任何帮助都会很可爱！

作为背景，这是一个 IceCast 流，但我认为它不会 hurt/change 任何东西。

$(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 headers 为您的流提供服务。

HTML5 音频动画有问题？

Issue with HTML5 Audio Frequency Animation?

javascript

html5-audio

web-audio-api