Simple reproductor MP3 en Ionic

   Reproducir archivos MP3 no es tan difícil, en Ionic contamos con un plugin multimedia que nos facilita esta tarea, por eso crear un reproductor MP3 es cosa de unas simples líneas de código, lo primero es iniciar el proyecto:

# Iniciar con un proyecto en blanco
ionic start mp3-ionic blank

# Agregar la plataforma
ionic cordova platform add [android | ios | browser]

# Instalar el plugin multimedia
ionic cordova plugin add cordova-plugin-media
npm i --save @ionic-native/media

   No olvidemos agregar al plugin al core de nuestra app... Ahora vamos a nuestra ventana principal y creamos los métodos básicos:

private index: number;

playMusic(i: number) {
  this.musicFile.play();
  this.index = i;
}

stopMusic() {
  this.musicFile.stop();
}

nextMusic() {
  this.playMusic(index + 1);
}

prevMusic() {
  this.playMusic(index - 1);
}

   Ya con esto solo nos resta crear la interfaz:

   También podemos agregar una barra progresiva mientras se reproduce el audio, el código seria algo así:

setInterval(function () {
  self.musicFile[self.playingIndex].getCurrentPosition().then((position) => {
    self.position = position;
  });
}, 1000);

   Si tienes dudas puedes ver el código de ejemplo en mi GitHub.

Recibe notificaciones por correo