Question

我在使用Ionic Framework开发的无线电应用程序时遇到了麻烦。

我想在我的应用中播放HTML音频流，但某些手机并不存在。我已经使用Galaxy S6，Galaxy Note 5，Galaxy S6 Edge和Xperia Z4进行了测试，并且它无法自动启动，在某些情况下甚至无法播放。

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

此外，该应用在iOS中运行良好。

我测试过三种方式：

首先，我直接在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（）;从另一个按钮，但从登录和＃34;准备播放＆＃34;它需要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进行检查时没有错误。

这让我有点疯狂。我错过了什么吗？

这是离子信息的输出：

您的系统信息：

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

提前致谢。

编辑：

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

var audio = new Audio(69.175.58.196/stream);

我收到了这个错误：

net::ERR_ADDRESS_UNREACHABLE –

我发现SEAndroid正在所有这些设备中执行。我从来没有在Android中使用它，但我知道在linux中它非常有限制。

可以阻止某些事情吗？

Answer 1

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

你犯了一个常见的错误。您需要应用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 -->

注意您的应用程序现在已不确定。由您来保护您的APP。

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

注意您的应用程序现在已不确定。由您来保护您的APP。

Cordova Plugin Media在Ionic Framework兼容性问题上的应用

1 个答案: