web-dev-qa-db-fra.com

Comment jouer au mp3 avec Angular 2?

Je veux écrire une petite application ionique/angulaire où je charge un fichier mp3 dynamique à partir d'un serveur distant et le joue pour appuyer sur un bouton OR si elle est cochée, je le joue automatiquement. J'ai essayé de utilisez le simple <audio></audio> mais je ne sais pas si c'est le bon moyen pour ça ...

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();
}
angularionic2
12
MegaX

Vous pouvez créer un nouvel élément audio dans le code Javascript ... pas en HTML

par exemple :

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

Si vous souhaitez exécuter le son dans l'application mobile Ionic-2/Angular-2.

Suivez Ionic 2 guide ici

Installer:

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

3
Amr Ibrahim

J'ai essayé la réponse de @ reba mais cela n'a pas fonctionné sur les navigateurs mobiles ou il peut y avoir des politiques de lecture automatique qui s'arrêtent pour lire les fichiers audio. J'ai donc créé et audio élément et modifié dynamiquement le src comme,

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

En angulaire,

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

Remarque: Si vous ne souhaitez pas afficher le tag audio sur la page, vous pouvez le faire [hidden]

0
Rohan Kumar