私は、他の場所からのオーディオストリーミングを再生/一時停止しようとしています。
最初はSCEエラーが発生しました。次に、さまざまな回答から解決策を見つけて試しました。 これらはSCEエラーを消しましたが、オーディオはまだ動作していません。
私の最初の試みは、このaswwer以下、フィルタを使用しようとしていた。 AngularJS ng-src inside of iframe コメントアウトコードのように私は、app.jsとchenged footer.htmlにフィルタを追加しました。
2回目の試みでは、$ sceを使用してtrustedUrl（）関数を定義しました。 Angular $sce blocking my audio blob src
：私はここからの回答以下、コントローラのコードを変更し、3回目の試みは、ホワイトリストにドメインを追加しようと、現在のコードであるfooter.htmlまし （私は参照を失ってしまいました）
以下のコードでは、apiURL、secret、およびfactoryIDが偽装されていますが、サービスは正常に動作しています。 私のデータオブジェクトは、すべてのフィールドが正しく、既にオブジェクトとして返されています（jsonを解析する必要はありません）。 APIから得られたサウンドストリーミングは、私がfooter.html（バージョン1のコメントのように）でハードコーディングしたもので、うまくいきました。
私はオーディオコントロールをサービスに移すことを提案しているかもしれませんが、私の関数toggleSoundも機能しています。 少なくとも、アイコンはトグルしています。私はそれを動かすことを試みなかった。
ng-srcの結果がhtmlで空であるように見えるのはなぜわかりません（正しい場所を探しているかわかりませんが、DOM構造には表示されません） 。 またはaudioElem.play（）が機能していません - わかりません。
とてもシンプルなようですが、オーディオストリーミングを再生することはできません。何か不足していますか？
EDIT： 私は1つのミスに気づいた：元の質問に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>