using dynamic values in src

Question

I'm writing a media player for my android application using angularjs, I get the songs from web API, address: http://10.96.254.34:8885/api/apimusic/download?songId=X, with "X" is the id of the song I want to stream. You can try add "1", "2" or "3" at "X" to listen to the song.
My problem is, when I use write the code for the audio player:

<div class="item item-thumbnail-left">
          <h2>{{song.SongName}}</h2>
          <p>{{song.Singer}}</p>

       <audio id="audio" autoplay="true" preload="auto" tabindex="0" controls="" type="audio/mpeg">
          <source type="audio/mpeg" src="http://10.96.254.34:8885/api/apimusic/download?songId=1">
          Sorry, your browser does not support HTML5 audio.
       </audio>
          </div>

The song can be fetched flawlessly, but when I change it to: http://10.96.254.34:8885/api/apimusic/download?songId={{song.SongId}}, It doesn't work

Any ideas to help me out of this? Please help :(

use ng-src instead of src

binariedMe
– binariedMe

2015-07-30 12:08:14 +00:00
Commented Jul 30, 2015 at 12:08 — binariedMe
– binariedMe, Commented Jul 30, 2015 at 12:08

uknowbigmams · Accepted Answer · 2015-07-30 12:38:50Z

2

Try to use in source:

data-ng-src

or

ng-src

instead of using a simple src.

answered Jul 30, 2015 at 12:38

uknowbigmams

716 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vidyadhar · Accepted Answer · 2015-07-30 12:49:06Z

2

Its because of Strict Contextual Escaping (SCE), which is by default enabled in Angularjs.

passing expression to url inside href or src is not allowed, so instead prepare your url with expression and then assign it to src. for ex:

Instead of

ng-src="http://yourdomain.com/a={{id}}"

do

in Controller:
    $scope.url = "http://yourdomain.com/a="+$scope.id;
in View
    ng-src="{{url}}"

And make sure of CORS issue as well. If you are calling audio url from different domain.

answered Jul 30, 2015 at 12:49

Vidyadhar

1,1189 silver badges15 bronze badges

1 Comment

Vidyadhar Over a year ago

what error you are getting, please check in console and post it

Collectives™ on Stack Overflow

using dynamic values in src

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related