How to play mp3 with Angular 2?

Question

I want to write a small ionic/angular application where I load a dynamic mp3 file from a remote server and play it for pressing a button OR if it is checked I play it automaticly. I tried to use the simple <audio></audio> but i am not sure if this is the good way for this...

code:

html

<audio id="player">
<source id="source" src="http://remote.address.com/example.mp3"></source>
</audio>

javascript

play(){
var audio= document.getElementById('player');
audio.play();
}

The most angular2 way to do this, is to grab the `audio` element with a variable, like in this [answer](http://stackoverflow.com/a/33771672/4933038). Remember, all this is javascript, so don't be afraid of using it :) — Eric Martinez, Nov 22 '15 at 20:44
I thought angular2 and ionic2 are more simmilar :( no @ViewChild in ionic or I should import something? — MegaX, Nov 22 '15 at 20:58
I don't know about Ionic2 nor Ionic1. You included angular2 in your tags and the question title asks only about angular2, so that would do it. But for your case I couldn't say, it's not just angular2, sorry :/ — Eric Martinez, Nov 22 '15 at 21:00
It was working... I just leaved an ( ) from the html so the function was not even called :) thanks! — MegaX, Nov 22 '15 at 21:16
PS:- for some reason i got error in same code, resolved by simply removing `` and adding `/>` at the end of source tag — Pardeep Jain, Apr 07 '17 at 06:22

score 29 · Accepted Answer · answered Feb 16 '16 at 19:21

29

You can create a new Audio element in the Javascript code ... not in HTML

for example :

var audio = new Audio();
audio.src = "http://remote.address.com/example.mp3";
audio.load();
audio.play();

answered Feb 16 '16 at 19:21

reda igbaria

1,444
12
15

does this creates element in background or in html? I mean to put play and pause button. how can that be done.. or we can just use triggers to play and pause using this? – Basit Feb 22 '16 at 10:21
it creates it in the background if you want to pause it you can use the pause function audio audio.pause(); check out the Media element API : [link](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) – reda igbaria Apr 03 '16 at 13:15
may i have working example for the same ? something like plunkr or snippet ? – Pardeep Jain Apr 06 '17 at 17:52

score 3 · Answer 2 · edited May 23 '17 at 11:33

If you want run sound in Ionic-2 / Angular-2 mobile application .

Follow Ionic 2 guide here

Install:

ionic plugin add --save cordova-plugin-nativeaudio
npm install --save @ionic-native/native-audio

Usage:

import { NativeAudio } from '@ionic-native/native-audio';

    constructor(private nativeAudio: NativeAudio) { }



    this.nativeAudio.preloadSimple('uniqueId1','path/to/file.mp3').then(onSuccess, onError);
    this.nativeAudio.preloadComplex('uniqueId2','path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

    this.nativeAudio.play('uniqueId1').then(onSuccess, onError);

    // can optionally pass a callback to be called when the file is done playing
    this.nativeAudio.play('uniqueId1', () =>console.log('uniqueId1 is done playing'));

source-1 : https://stackoverflow.com/a/43917441/6786941

but in debug it load the file via http – Amr Ibrahim May 21 '17 at 12:27 — Amr Ibrahim, May 21 '17 at 12:27

score 0 · Answer 3 · answered Apr 29 '19 at 12:59

I have tried @reba's answer but it didn't work on mobile browsers or may be there are Autoplay policies which are stopping to play the Audio files. So I have created and audio element and modify the src dynamically like,

<audio id="player">
   <source></source>
</audio>

In Angular,

play(){
   let audio= document.getElementById('player');
   audio.src = "http://remote.address.com/example.mp3";
   audio.load();
   audio.play();
}

Note: If you don't want to show the audio tag on page, then you can make it [hidden]

How to play mp3 with Angular 2?

3 Answers3

Linked