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.


Ultimo

1 Comentarios:

Escribir Comentario
7 de junio de 2021, 22:37 delete

Hola max, ultimamente he probado hasta una GTX 1660 Ti y sin problemas, sobre todo en la nueva versión de proxmox donde agregaron una interfaz sencilla para administrador el passtrought de cada VM

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión