Angular 2 http request audio src not play

Question

I obtained data on and attached to the audio src but it does not run.

detail.component.ts

export class DetailComponent implements OnInit {
    @Input() detailName: string;
    @Output("playnhac") play = new EventEmitter();
     private linkmp3:string;
    constructor(private _http:Http) {

    }
ngOnInit() {
                    this._http.get('http://searchsong.azurewebsites.net/api/mp3File/'+this.detailName+'&type=128&key=minhtaitr')
        .map(res => res.json())
        .subscribe(
          data => {this.linkmp3=data

        })

        }

detail.component.html

<audio controls>

  <source type="audio/mpeg" src="{{linkmp3}}" >

</audio>

@raj no need to add public , if you are using that variable within the same class/template you can use private too. — Pardeep Jain
– Pardeep Jain, Commented Apr 6, 2017 at 17:39

kemsky · Accepted Answer · 2016-12-25 23:28:55Z

1

You should not use interpolation in attributes, instead [attr.src]="...". Also you will not be able to set this attribute without this pipe:

@Pipe({
    name: 'safe',
    pure: true
})
export class SafePipe implements PipeTransform
{
    private sanitizer:DomSanitizer;

    constructor(sanitizer:DomSanitizer)
    {
        this.sanitizer = sanitizer;
    }

    transform(url)
    {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

answered Dec 25, 2016 at 23:28

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

2 Comments

minhtai trinh Over a year ago

tks. it's great hint

Pardeep Jain Over a year ago

may i know whats the need of this pipe in playing audio ? also better please if you provide any workling example something like plunker.

Collectives™ on Stack Overflow

Angular 2 http request audio src not play

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related