Ionic Framework 兼容性問題中的 Cordova 插件媒體

Question

我在使用 Ionic Framework 開發的無線電應用程序時遇到了問題。

我想在我的應用程序中播放 HTML 音頻流，但某些手機沒有這種情況。 我用 Galaxy S6、Galaxy Note 5、Galaxy S6 Edge 和 Xperia Z4 測試過，它無法自動啟動，在某些情況下甚至無法播放。

但是，當我使用 Android Emulator 進行測試，或者使用 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 檢查時沒有錯誤。

這讓我有點發瘋。 我錯過了什么嗎？

這是離子信息的輸出：

您的系統信息：

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 日）起

如果你要從互聯網上加載音頻，你需要實現白名單系統。 此白名單工作表應該有所幫助。 如何應用Cordova/Phonegap的白名單系統

修理

將此添加到您的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';">

請注意，您的應用現在不安全。 保護您的應用程序取決於您。