Question

iOS \ Android中的无线电流频谱分析仪存在问题。我的HTML：

<canvas id="canvas" width="512" height="100"></canvas>
<div id="playStream">Play</div>
<div id="stopStream">Stop</div>

我的javascript代码：

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    var audioContext = new(window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext)();

    var analyser = audioContext.createAnalyser();
    analyser.fftSize = 512;
    analyser.connect(audioContext.destination);
    var frequencyBins = new Uint8Array(analyser.frequencyBinCount);

    var filter = audioContext.createBiquadFilter();
    filter.type = "highpass";
    filter.frequency.value = 0.0001;
    filter.connect(analyser);

    window.audio = new Audio('http://noasrv.caster.fm:10099/128mp3_autodj');
    audio.crossOrigin = 'anonymous';
    var audioSrc = audioContext.createMediaElementSource(audio);
    audioSrc.connect(analyser);
    audioSrc.connect(filter);


    var osc = audioContext.createOscillator();
    osc.connect(filter);

    var WIDTH = 512;
    var HEIGHT = 100;
    var value, h, w;

    function draw() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);

        for (var i = 0; i < frequencyBins.length; i++) {
            value = frequencyBins[i];
            h = HEIGHT * (value / 255);
            w = WIDTH / frequencyBins.length;
            ctx.fillRect(i * w, HEIGHT - 1, w, -h);
        }
    };

    function animate() {
        analyser.getByteFrequencyData(frequencyBins);
        //console.log(frequencyBins);
        draw();
        requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    playStream.addEventListener('click', function(){
        audio.play();
    }, false)
    stopStream.addEventListener('click', function(){
        audio.pause();
    }, false)
};

这是一个例子：http://jsfiddle.net/a2ZL9/46/。这段代码在浏览器中运行良好，但是当我构建Android应用程序时，它不起作用。音频播放，但没有频谱分析仪的动画。

有人可以帮我解决这个问题吗？

科尔多瓦无线电流频谱分析仪iOS \ Android

0 个答案: