android 上的音频上下文无法正常工作

Question

我在使用 android（对于 android 浏览器或 chrome 对于 android）时遇到了这个问题：getByteFrequencyData 方法 returns 0 个值。

有人说 android 移动设备不支持网络音频 Api（IOS 确实支持它），但我已经检查了这个 link，其中它说 chrome 49 支持音频 Api。

有人说是旧的issue

有人说问题出在媒体元素上，如果你可以用XHR加载媒体到缓冲区并播放它，它会work（我测试过但没用）

我正在尝试使用 Audio APi + Canvas 在 android cordova 上制作音频可视化工具有什么帮助吗？

Answer 1

我让它工作了，带有两个参数的 createBuffer() 方法不再适用于 chrome 版本，所以我不得不使用 decodeAudioData 来获取缓冲区源：

// Create AudioContext and buffer source
var audioCtx = new AudioContext();
source = audioCtx.createBufferSource();
// load in an audio track via XHR and decodeAudioData
function getData() {
request = new XMLHttpRequest();
request.open('GET', 'Test.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var audioData = request.response;

audioCtx.decodeAudioData(audioData, function(buffer) {
myBuffer = buffer;   
source.buffer = myBuffer;

analyser = audioCtx.createAnalyser(); // AnalyserNode method
canvas = document.getElementById('CanvasDiv');
canvasContext = canvas.getContext('2d');
source.connect(analyser);
analyser.connect(audioCtx.destination);

frameLooper(); 
},
function(e){"Error with decoding audio data" + e.err});
}
request.send();
}
function frameLooper(){
ionic.requestAnimationFrame(frameLooper); //You can use window instead of ionic
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
canvasContext.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
canvasContext.fillStyle = '#00CCFF'; // Color of the bars
bars = 100;

for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    canvasContext.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
getData();
var audio = document.getElementById('audioTagId');
Callback = function(){
        source.start();
    }
document.getElementById("PlayButton").addEventListener("click", Callback);

android 上的音频上下文无法正常工作

Audio context not working properly on android

javascript

android

chromium

html5-audio

cordova