Контекст аудио не работает должным образом на android

Question

У меня проблема с Android (для браузера android или для android): метод getByteFrequencyData возвращает 0 значений.

Некоторые говорят, что веб-аудио Api не поддерживается в мобильных устройствах Android (IOS действительно поддерживает его), но я только что проверил этот link, где говорится, что хром 49 поддерживает Audio Api.

Некоторые говорят, что это старый issue

А некоторые говорят, что проблема исходит от медиа-элемента, если вы можете загрузить носитель с XHR в буфер и воспроизводить его, он будет work (я тестировал, но это не сработало)

Я пытаюсь сделать аудио визуализатор, работающий на android cordova, используя Audio APi + Canvas Любая помощь?

Answer 1

Я получил его на работу, createBuffer() с двумя аргументами не работал на хромированных версиях больше, поэтому мне пришлось использовать 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);