Web Audio API无法在虚拟设备的Android浏览器中播放音频

Question

I am using Android Studio to write a small app that plays audio.

My app works in Chrome, Edge and Firefox when testing in the browser on my PC. The MP3 audio files play loud and clear. However, the Virtual Devices that I have installed in Android Studio do not play the MP3 audio.

Full disclosure, I have two methods to play music, audio. METHOD 1 works.

 var toggleEffect; toggleEffect = document.createElement('audio'); toggleEffect.setAttribute('src', 'audio/clicks/toggleEffect.mp3'); toggleEffect.id = "toggleEffect"; toggleEffect.play() 

The above plays fine, I can hear the audio.

The second method which works in Chrome, Edge and Firefox when testing in the browser on my PC; well, it does not want to work in the Virtual Device browsers.

Here is METHOD 2.

 // set the audio file's URL var audioURL = 'AllofMe.mp3'; //creating a new request var request = new XMLHttpRequest(); request.open("GET", audioURL, true); request.responseType = 'arraybuffer'; //take the audio from http request and decode it in an audio buffer context.decodeAudioData(request.response, function(buffer) { audioBuffer = buffer; console.log(audioBuffer); if (audioBuffer) { // check here //creating source node var source = context.createBufferSource(); //passing in file source.buffer = audioBuffer; //start playing source.connect(context.destination); // added } }); request.send(); 

At first I suspected that the Web Audio API did not work in the Android Browser, that maybe it was not supported. But after checking around, it is supported.

I added the below code which lets me know if the Web Audio API is available. I used this to test in the Virtual Devices a part of Android Studio.

 var context; var contextClass = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext); if (contextClass) { // Web Audio API is available. context = new contextClass(); } else { // Web Audio API is not available. Fallback alert("Web Audio API is not available."); } 

The code reports no error, and the site [can I use dot com] shows that the versions of Android 5-6.x and newer fully support Web Audio API.

In Android Studio both attempts to load the JavaScript code in WebView containers using either Web Chrome Client or Web View Client fail to play METHOD 2 (from above).

But METHOD 1 always works. My suspicion is that the Virtual Devices are just not fully Web Audio API enabled.

I have not gotten far enough in Android Studio to make the .apk file to test on my own LG G3 smartphone, but before I go any further I was hoping to see if anyone can shed some light on what is happening.

I provided all the code I am using.

Thanks!

Answer 1

To follow up, I created the .apk file and ran the app on my phone (LG G3), but alas my Android version is 4.2.2 and that does not support Web Audio API. I'll need to upgrade to Android version 5.x or higher.

I did try another approach.

I loaded the HTML5/JS/CSS on to my webserver, and then re-wrote a quick .apk to launch Chrome pointing to the websever. The results are the app works in Chrome on my LG G3 phone using the browser.

This is how I loaded the URL of the app:

  String url = "http://myserver.com/webapp/index.html"; Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); i.setPackage("com.android.chrome"); try { startActivity(i); } catch (ActivityNotFoundException e) { // Chrome is probably not installed // Try with the default browser i.setPackage(null); startActivity(i); } 

Ultimately the Virtual Devices never ran the second method of playing audio in JavaScript so I do not know if there is a limitation with the virtual environments, but it does run in a browser.

If I can learn more, I will update. Thanks.