Ionic Framework 中的 Cordova Plugin Media 兼容性问题

Question

我在使用 Ionic Framework 开发的广播应用时遇到问题。

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

但是，当我使用 Android 模拟器进行测试，或使用 Geny Motion 和 Xperia M2、LG G3 或 Alcatel Idol 等其他设备运行应用时，声音效果非常好！

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

我测试了 3 种方法：

首先，我在应用程序中测试了这段 JS 代码，直接在 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>

如果我调用 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 Plugin Media：

<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

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

你犯了一个常见的错误。您需要申请whitelist 系统。从Cordova Tools 5.0.0（2015 年 4 月 21 日）开始需要它。对于Phonegap Build，这意味着从cli-5.1.1（2015 年 6 月 16 日）开始

如果你要从互联网加载音频，你需要实现白名单系统。这个 whitelist 工作表应该会有所帮助。 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';">

请注意，您的应用现在不安全。保护您的应用由您决定。