CODEWITHSUNDEEP
javascripthtmlangularjsaudio
Mike
Mike

Reputation: 2703

Problems with HTML5 audio and Angular two way binding using ngSanatize

I'm trying to create a dynamic playlist that pulls in an .mp3 file from an array and places it dynamically into an audio tag. Check out the demo here:

http://plnkr.co/edit/NYKwAY?p=preview

At first I got console errors stating that:

Blocked loading resource from url not allowed by $sceDelegate policy

But I got around that by using ngSantatize and the console didn't throw those errors anymore. The only problem is that the mp3 file STILL doesn't want to play. The only error the console gives me is from the angular-audio-player:

if you use playlist attribute, you need $scope.playlistVariable = []; in your code

Any ideas on how to make this work in Angular? Am I implementing ngSanatize incorrectly?

Upvotes: 0

Views: 1029

Answers (1)

konsumer
konsumer

Reputation: 3493

I think the prob is that you need to return $sce.trustAsResourceUrl(url) as the thing that gets pulled into src. Also, ng-src will keep away momentary errors trying to load "{{whatever}}".

I decided to try out making one from scratch, using ionic as you have, to sort of play around with some simple concepts. It loads a NPR feed, and display a nice playlist. I don't know if I would call this the "right way", but I chose to simplify your setup by binding very little management, and trying to get angular to do more of the work. It's not perfect, but this should get you started.

In general, in any framework, I generally decide that if I have a lot of "management code" setting & getting things all over, etc, I am probably not using it right. I try to figure out the "smell" of good code, or the basic style of people who are good examples in the community, to get an idea of how to do stuff efficiently. In angular, it seems like the main goal is to keep business logic out of HTML, but reusable UI logic as directives (attributes & elements) with minimal Controllers to glue it together, and services to provide data.

Also, here is an excellent directive that does what I think you are hoping to accomplish.

Upvotes: 2

Related Questions