Cordova插件媒体在Ionic Framework中的兼容性问题

Question

我使用Ionic Framework开发的一个无线电应用程序遇到了问题。

我想在我的应用程序中播放HTML音频流，但在某些手机上没有这种情况。我用盖乐世S6、盖乐世Note5、盖乐世S6 Edge和Xperia Z4进行了测试，它不可能自动启动，在某些情况下，它甚至无法播放。

但是，当我用安卓模拟器测试，或者用Geny Motion和其他设备如Xperia M2，LG G3或Alcatel Idol运行应用程序时，声音效果很好！

此外，该应用程序在iOS中工作得很好。

我已经测试了3种方式：

首先，我在应用程序内部直接在index.html中测试了这段JS代码：

<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>

如果我从另一个按钮调用audioElement.play()；，它可以工作，但从控制台中登录“准备播放”到实际播放需要15秒，否则它不会启动。这有点随机。如果我按下一个调用audioElement.play()的播放按钮，在oncanplay触发后，它可以完美地工作。

当我用Chrome (chrome:// inspect )检查应用程序时，我没有得到任何错误，只是它不会自动播放，或者播放15秒的延迟。

其次，我测试了另一个JS代码：

<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>

结果和之前一样。没有错误，但没有自动播放，或延迟，或无法使其播放。当我用Chrome检查应用程序时，没有获得错误。

最后，我测试了Cordova插件媒体，如下所示：

<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>

同样的结果，没有自动播放，延迟播放，也不能让它从另一个JS事件中播放，而且，当我在手机上测试它不自动播放时，它没有记录错误，但日志显示它可以加载和播放源代码，当用Chrome检查时也没有错误。

这让我有点抓狂。我是不是遗漏了什么？

以下是ionic info的输出：

您的系统信息：

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 

提前谢谢。

编辑：

我现在测试的一件事是，当应用程序运行时，在inspect控制台中创建一个音频元素，如下所示：

var audio = new Audio(69.175.58.196/stream);

我得到了这个错误：

net::ERR_ADDRESS_UNREACHABLE –

我检测到SEAndroid在所有这些设备上都是强制的。我从来没有在Android中处理过它，但我知道在linux中它是相当有限制的。

它会不会阻塞了什么东西？

Answer 1

你应该使用插件，因为它会给你最好的机会。您的问题是您正在播放来自互联网的音频样本。

你犯了一个常见的错误。您需要应用whitelist系统。从Cordova Tools 5.0.0 (2015年4月21日)起需要。对于Phonegap Build，这意味着自cli-5.1.1 (2015年6月16日)以来

如果您要从Internet加载音频，则需要实现白名单系统。此白名单工作表应该会有所帮助。HOW TO apply the Cordova/Phonegap the whitelist system

修复的

将此代码添加到您的config.xml

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

注意到你的应用现在是不安全的。保护您的应用程序的安全取决于您。

将以下内容添加到您的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';">

注意到你的应用现在是不安全的。保护您的应用程序的安全取决于您。