Question

我只想尝试播放/暂停来自其他地方的音频流。

最初我收到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中似乎是空的（我不确定我是否正在寻找合适的地方，但它赢了＆＃39; t显示在DOM结构中）。或者audioElem.play（）不起作用 - 我不知道。

它似乎很简单，但我无法播放音频流。我错过了什么吗？

修改我注意到一个错误：原始问题是使用{ "type": "chrome", "request": "attach", "name": "Attach Karma Chrome", "address": "127.0.0.1", "port": 9333, "sourceMaps": true, "webRoot": "${workspaceRoot}/test" }错误。我已按照以下答案编辑了以下代码：Using this within a promise in AngularJS

代码的相关部分遵循以下结构：

app.js：

this

footer.html：

'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';
        }
    };
}]);

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

禁用AngularJS中的严格上下文转义（$ sce）不适用于流式音频

1 个答案: