Question

这是一个问题，似乎只是JS中的AnalyserNode（或它在键盘和主席之间......）。

基本上，我有一个正确设置的音频文件（正常情况下的流）。但是，一旦我尝试在它和目的地之间连接分析器节点，一切都变得混乱。音频不输出，并且dataArray中的节点始终为0或未定义。我在过去的7到10个小时内一直在研究这个问题（运气不一样），并注意到大多数人在解雇了＃34; canplay＆＃34;事件，但这对我不起作用。任何帮助都很可爱！

作为背景，这是一个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标头为您的流提供服务。

HTML5音频动画问题？

1 个答案: