Here is a couple of angular approaches :
1) Use ng-src= instead of src=
The angular docs explain why this works :
http://docs.angularjs.org/api/ng.directive:ngSrc
During compilation stage, angular will expand the element to include the correct src= attribute.
This will change the src attrib of the HTML5 audio element, but unfortunately that is NOT enough to make a new song play. You need to prod the audio element into doing something by calling the .play() method.
Sucks :(
Further hacking along this same path suggests doing DOM manipulation inside the controller. This is generally a sign that this is the wrong solution.
Better solution is to use services !!!
2) Audio using an angular service
mpApp.factory('audio',function ($document) {
var audioElement = $document[0].createElement('audio'); return {
audioElement: audioElement,
play: function(filename) {
audioElement.src = filename;
audioElement.play();
}
}
});
Now, in your controller(s), you can inject 'audio', and do whatever you need to do with it.
eg:
functionmyAstoundingAudioCtrl($scope, audio) { $scope.songSelect = function(songPath) {
audio.play(songPath);
}
}
You can now add 'audio' as a parameter to any of your controllers that need to be able to
change the music, and use the same API call defined here.
Being a 'service', there is only a single instance for the whole application. All calls to 'audio' point to the same object. This is true for all services in angular. Just what we need in this case.
The service creates an invisible HTML5 element on the root document of your application, so there is no need to add an tag on your views anywhere. This has the added bonus of maintaining the playing of the song whilst the user navigates to different views.
See http://docs.angularjs.org/api/ng.$document for the definition of the $document service.
Hope that helps mate :)
I had the same problem, even after using $sce.trustAsResourceUrl, and then I realized the problem is with the HTML. The source should go in the audio tag itself:
<audiocontrolsdata-ng-src="{{yourTrustedUrl}}" ></audio>
ngSrc doesn't work for video in AngularJS, only work for image. My solution is :
in the view :
<videocontrols="controls"name="Video Name"ng-src="{{getVideoUrl()}}"></video>
in the controller:
$scope.getVideoUrl=function(){
return$sce.trustAsResourceUrl("media/"+$scope.groupedProjList[$scope.routeId].CONTACTNAME+".mp4");
};
replace my Url with yours:
$sce.trustAsResourceUrl('your Url');
Don't forget to add $sce to your module:
angular.module('myApp.controllers', [])
.controller('MyCtrl1', function($scope,$http,$routeParams,$sce) {
I had a similar problem loading up video sources on with a dropdown select menu. I found that $scope.$apply(); was all I needed to add. Haven't had time to take your code and test this implementation, but I'd recommend trying out this:
$scope.songSelect = function(songPath) {
$scope.selectedSongPath = songPath;
$scope.$apply();
}
There's some dispute about the use of $scope.$apply() regarding handling errors. I believe the proper implementation is actually as follows:
$scope.songSelect = function(songPath) {
$scope.$apply(function() {
$scope.selectedSongPath = songPath;
});
}
This supposedly copes better if songPath returns undefined; alas I can't find the link where I learnt this trick. If I do, I'll post it as a comment to this answer.
Hope this helps :)
Post a Comment for "Changing Html5's Source "src" Attribute Takes No Effect Wtih Angularjs"