在AngularJS中禁用嚴格的上下文轉義（$ sce）不適用於流式音頻

我只是想從其他地方播放/暫停音頻流。

最初我得到了一個SCE錯誤。然後找到並嘗試不同答案的解決方案。那些造成SCE錯誤消失，但音頻仍然無法正常工作。

我第一次嘗試試圖使用過濾器，跟隨這aswwer： AngularJS ng-src inside of iframe 我在app.js和chenged footer.html添加了一個過濾器，如圖註釋掉的代碼。

第二次嘗試是使用$ sce定義trustedUrl（）函數。（我已經失去了參考）我已經改變了控制器代碼和footer.html

第三次嘗試是當前的代碼，嘗試添加域在白名單中，繼從這裏的答案： Angular $sce blocking my audio blob src

在下面的代碼中，apiURL，secret和factoryID被僞造 - 但服務工作正常。我的數據對象正在從API返回，所有的字段都是正確的，已經作爲一個對象（不需要解析json）。從API獲得的音頻流是我在footer.html中進行硬編碼的音頻流（如版本1的評論），並且運行良好。

有人可能會建議我將音頻控制轉換爲服務，但我的函數toggleSound也在工作。至少，圖標正在切換。雖然我沒有嘗試移動它。

我不知道爲什麼ng-src的結果似乎在html中是空的（我不知道我是否在正確的位置，但它不會顯示在DOM結構中）。或audioElem.play（）不起作用 - 我不知道。

它似乎很簡單，但我不能讓音頻流播放。我錯過了什麼嗎？

編輯： 我注意到一個錯誤：在原來的問題是使用this錯誤。我已經編輯下面的代碼，以下這個答案：Using this within a promise in AngularJS

代碼的相關部分遵循這種結構：

app.js：

'use strict'; 
angular.module('radiogeek', [ 
    'ui.router', 
    'ngResource', 
    'ngStorage' 
]) 
.run(function() { 
}) 
.config(function($stateProvider, $urlRouterProvider, $sceDelegateProvider) { 

    // attempt 3: 
    $sceDelegateProvider.resourceUrlWhitelist([ 
     'self', 
     'http://servidor30.brlogic.com:8270/Live' 
    ]); 
    // attempt 3 

    $stateProvider 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'views/header.html', 
       }, 
       'content': { 
        templateUrl : 'views/playing.html', 
        controller : 'PlayingController' 
       }, 
       'footer': { 
        templateUrl : 'views/footer.html', 
        controller : 'FooterController as footerCtrl' 
       } 
      } 
     }) 

    $urlRouterProvider.otherwise('/'); 
}) 


.constant("baseURL","http://localhost:2000/") 
.factory('APIFactory',['$http', function ($http) { 

    var apiURL = "http://some.address.com/api/token"; 
    var secret = '87ac-a035-71ad-99fa-4509-95613-e3c6-adf'; 
    var factoryId = '48ad-81b5-c20fc-6ab7-5dcc-bda1-77bd626'; 

    var APIFactory = {}; 

    APIFactory.init = function() { 
     return $http({ 
      method: "POST", 
      url: apiURL, 
      data: JSON.stringify({"Maior":2,"Menor":0,"Build":0,"Revisao":0,"Usuario":"","Senha":"","Facebook":null}), 
      headers: { 
       "Content-Type": "application/json", 
       "secret": secret, 
       "factoryId": factoryId, 
       'Accept': 'application/json' 
      } 
     }); 
    }; 

    return APIFactory; 
}])  

/* attempt 1: 
.filter('trustAsResourceUrl', ['$sce', function($sce) { 
    return function(val) { 
     return $sce.trustAsResourceUrl(val); 
    }; 
}]) 
*/ 

.controller('FooterController', ['$scope', '$rootScope', '$stateParams', '$state', '$localStorage', '$sce', 'APIFactory' , 
function($scope, $rootScope, $stateParams, $state, $localStorage, $sce, APIlFactory) { 

    var playerIcon = false; 
    var playerAction = 'Play'; 
    this.playerIcon = playerIcon; 
    this.playerAction = playerAction; 

    var self = this; 
    APIFactory.init().then(
     function (response) { 
      var data = response.data; 

      // attempt 1 
      //self.streamingUrl = data.streamingUrl;       

      /* attempt 2 
      self.trustedUrl = function(url) { 
       return $sce.trustAsResourceUrl(url); 
      } 
      */ 

      self.streamingUrl = $sce.trustAsResourceUrl(data.streamingUrl); 

     }, 
     function (response) { 
      console.log(response.status + ' ' + response.statusText); 
     } 
    ); 

    this.toggleSound = function() { 
    var audioElem = document.getElementById('audio'); 
     if (audioElem.paused) { 
      audioElem.play(); 
      self.playerIcon = true; 
      self.playerAction = 'Pause'; 
     } else { 
      audioElem.pause(); 
      self.playerIcon = false; 
      self.playerAction = 'Play'; 
     } 
    }; 
}]);

footer.html：

<div ng-click="footerCtrl.toggleSound();"> 
    <i class="material-icons css-align">{{!footerCtrl.playerIcon ? 'play_arrow' : 'stop'}}</i> 
    <span class="css-align css-footer-span1"> 
     {{footerCtrl.playerAction}} 
    </span> 
</div> 
<audio id="audio"> 
    <!-- version 1: this was working fine: --> 
    <!--source src="http://servidor30.brlogic.com:8270/live" type="audio/mpeg"--> 

    <!-- attempt 1: this didn't work --> 
    <!--source ng-src="{{footerCtrl.streamingUrl | trustAsResourceUrl }}" type="audio/mpeg"--> 

    <!-- attempt 2: this didn't work either: --> 
    <!--source ng-src="{{footerCtrl.trustedUrl(footerCtrl.streamingUrl)}" type="audio/mpeg"--> 

    <!-- attempt 3: this didn't work either: --> 
    <source ng-src="{{footerCtrl.streamingUrl}}" type="audio/mpeg"> 

</audio>

來源

2017-07-29 João Otero

我在這裏找到了答案： https://medium.com/kevins-daily-makers-academy-blog/html5-audio-and-angular-day-4-final-project-be0818239e8e

基本上，我們必須將ng-src移動到audio標籤：

<audio id="audio" ng-src="{{footerCtrl.streamingUrl}} type="audio/mpeg"> 
</audio>

並且也將域添加到白名單中的應用程序。config：

$sceDelegateProvider.resourceUrlWhitelist([ 
     'self', 
     'http://servidor30.brlogic.com/**' 
]);

這很奇怪。 Github上有個問題：https://github.com/angular/angular.js/issues/1352

來源

2017-07-30 07:33:57

在AngularJS中禁用嚴格的上下文轉義（$ sce）不適用於流式音頻

回答

相關問題