javascript - 在AngularJS中禁用严格的上下文转义($ sce)不适用于流音频

Question

我只是想播放/暂停其他地方的音频流。

最初我遇到了SCE错误。然后找到并尝试了不同答案的解决方案。
那些使SCE错误消失了，但是音频仍然无法正常工作。

我的第一次尝试是使用过滤器，如下所示:
AngularJS ng-src inside of iframe
我在app.js和chenged footer.html中添加了一个过滤器，如注释掉的代码所示。

第二次尝试是使用$ sce定义一个trustUrl()函数。 (我失去了引用)
我已经更改了 Controller 代码和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>

Answer 1

我在这里找到了答案:
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>

另外，将域添加到白名单中的app.config中:

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

真奇怪Github上有一个问题: https://github.com/angular/angular.js/issues/1352