Estoy desarrollando una aplicación para un cliente donde entre muchas cosas, hay que desarrollar un reproductor de música y me ha parecido interesante compartir con vosotros como hacer un reproductor de música sencillo con ionic.
Creamos el componente reproductor
En primer lugar, creamos el componente reproductor:
Añadimos el componente a la página.
Una vez creado el componente añadimos el componente en la página donde lo vamos a mostrar, en este caso en home.
Para eso tenemos que importar el componente en home.module.ts:
Luego ya ponemos el tag del componente en el home.html:
(recuerda que el nombre del tag del componente lo podemos ver en reproductor.component.ts):
y ahora el código de nuestro home.html quedaría así:
En nuestro navegador quedaría así:
Una vez que lo hemos preparado todo para poder visualizar el componente instalado en nuestra página, vamos a trabajar directamente en el componente que es lo que nos interesa.
Creamos los botones
Primero vamos a reproductor.html y creamos dos botones, uno para el play y otro para el pause (en otras entradas añadiremos más funcionalidades):
Lo cual se vería así:
Creamos las funcionalidades play() y pause()
Luego vamos a reproductor.ts y creamos una variable de Audio() que será el objeto que usaremos para el sonido, hay objetos más potentes para trabajar con audio, pero Audio viene integrado en javascript por lo que no tenemos que importar nada y para las funciones que vamos a hacer nos sobra:
Ahora dentro del constructor vamos a decir donde encontramos el audio a reproducir, que será dentro de nuestra carpeta de recursos assets:
Ahora vamos a lo interesante, crearemos una función para que se empiece a reproducir el archivo y le asignaremos la función a el botón play:
como podemos ver, creamos la función play(), la cual llama al método de Audio() .play() la cual reproduce el archivo cuya ubicación le pasamos en el atributo .src . Aunque Audio().play() carga y empieza el archivo a reproducir, es una buena práctica una vez que se define la ubicación del archivo llamar al método Audio().load() , más que nada porque a veces queremos manipular el audio antes de reproducirlo por lo que deberíamos cargarlo con .load():
Seguidamente creamos también la función pause() para detener el audio:
Una vez creadas las dos funcionalidades que vamos a usar en esta entrada, se la asignamos a los botones correspondientes:
En estos momentos, si todo ha ido bien, en nuestra aplicación al darle al play debe reproducir el sonido deseado, y al darle al pause se debe detener.
Extra
Seguramente te has dado cuenta que una vez pausado el audio, al darle al play continua reproduciendo por donde se quedó y mientras está reproducciendo no es elegante que le demos al play y no haga nada, por tanto, vamos a hacer que solo aparezca un boton, si no hay nada reproduciendo que sea play, y si está reproduciendo el boton del pause, y que al dar play empiece desde el inicio.
Vamos a crear una variable en reproductor.ts que nos diga si se esta reproduciendo o no:
Ahora en todo momento sabemos si hay audio reproduciendo, y lo vamos a usar para mostrar el botón correspondiente en reproductor.html:
Si todo está correcto, en nuestra app aparecerá solo el boton del play, y al darle click, empieza a reproducir a la vez que cambia el boton a pause, y lo mismo, al darle click, se detiene la música y cambia el boton a play.
Solo nos queda una cosa, que el play reproduzca desde el inicio.
Se puede hacer por varias maneras, Audio() tiene un atributo que nos dice que tiempo de reproducción tiene el audio, solo es resetear su valor a 0 y listo. Como esta función la vamos a usar en la segunda para las funcionalidades de adelantar y atrasar audio, culminamos este primera entrega llamando al método Audio().load() en la función play, para que vuelva a cargar la música. Con esto nos vale por ahora.
Quedaría así:
Resumen
En esta entrada hemos creamos un simple reproductor que puedes implementar en tu aplicación con ionic. En próximas entradas, añadiremos nuevas funcionalidades, cambiaremos algunas cosas para que trabajen de manera mas eficientes, ya que la intención de esta entrada es la de tener una primera toma de contacto con ionic, angular, y el procesamiento de audio.
La ventaja de añadir el reproductor como un componente, es que podemos implementarlo en varias páginas a la vez como un reproductor incrustado, y simplemente le tenemos que pasar la interface con los datos del audio a reproducir y ya está.
Recordad que uso capturas de pantalla para el código ya que opino que al escribir el codigo uno mismo aprende a hacerlo mejor.
Un corta y pega es más rápido pero posiblemente no tengamos ni idea de lo que estamos implementando.
Sin más espero que les guste y hasta la próxima entrada.
