Cordova Plugin Media in Ionic Framework compatibillity issues

Question

I'm having troubles with a radio app that I'm developing with Ionic Framework.

I want to play a HTML audio stream in my app, but there's no case with certain phones. I've tested with Galaxy S6, Galaxy Note 5, Galaxy S6 Edge, and an Xperia Z4, and there's no way it can start automatically, and in some cases, it cannot even play.

But, when I test with the Android Emulator, or run the app with Geny Motion and other devices like Xperia M2, LG G3 or Alcatel Idol the sound works great!

Also, the app work great in iOS.

I've tested 3 ways:

First, I've tested this JS code inside the app, directly in index.html:

<script>
audioElement.setAttribute('src', 'http://69.175.58.196:80/stream');
audioElement.setAttribute('id', 'audio');
audioElement.setAttribute('preload', 'auto');
audioElement.setAttribute('autoplay', 'true');
audioElement.setAttribute('volume','1');

audioElement.oncanplay=function(){
console.log("Ready to play");
audioElement.play();
}
</script>

It works if I call audioElement.play(); from another button, but it takes up to 15 seconds from loggin "Ready to play" in the console to actually playing, or it won't start. It is kinda random. If I press a play button calling audioElement.play(), it works perfectly, after oncanplay triggers.

I don't obtain any error when I inspect the app with Chrome (chrome://inspect), simply it won't play automatically, or play with the 15 seconds delay.

Secondlly, I've tested this other JS code:

<script> 
var media = new Audio("http://69.175.58.196:80/stream");
    media.play();
    media.oncanplay = function(){
      setTimeout(function(){
        $("#coso").html("Playing!")
        media.play();
      }, 3000);

    }
</script>

Same result as before. No error, but no autoplay, or delayed, or can't make it play. No error obtained when I inspect the app with Chrome.

Finally, I've tested Cordova Plugin Media like this:

<scrip>
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        console.log(Media);


      function playAudio() {
          // Create Media object from src
          my_media = new Media('http://69.175.58.196:80/stream', Success(), onError);
          // Play audio
          my_media.play();
      }
      // onSuccess Callback
      function Success() {
          setTimeout(function(){
            $('#coso').html("Playing!");  
          }, 2000); 
      }

      // onError Callback
      function onError(error) {
          alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
      }

      playAudio();
}


</script>

The same result, no autoplay, delayed play, nor can make it play from another JS event, and also, when I tested it in the phones that it doesn't autoplay, it doesn't log an error, but logs like it could load and play the source, and no errors when inspected with Chrome.

This is driving me crazy a little bit. Am I missing something?

This is the output of ionic info:

Your system information:

Cordova CLI: 5.4.0
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic CLI Version: 1.7.13
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v4.2.1
Xcode version: Xcode 7.2 Build version 7C68 

Thanks in advance.

EDIT:

A thing that i have tested now is, in the inspect console creating an audio element, when the app is running, like this:

var audio = new Audio(69.175.58.196/stream);

And I get this error:

net::ERR_ADDRESS_UNREACHABLE –

I've detected that SEAndroid is enforcing in all those devices. I've never dealt whit it in Android, but I know in linux it's pretty restrictive.

Can it be blocking something?

Answer 1

you should use the plugin as that will give you the best chance. Your issue is that you are playing an audio sample from the internet.

You have made a common mistake. You need to apply the whitelist system. It is required as of Cordova Tools 5.0.0 (April 21, 2015). For Phonegap Build, that means since cli-5.1.1 (16 Jun 2015)

If you are going to load audio from the Internet, you need to implement the whitelist system. This whitelist worksheet should help. HOW TO apply the Cordova/Phonegap the whitelist system

TO FIX

Add this to your config.xml

<plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

Add the following to your index.html

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.