¿Qué es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¿Qué hay de nuevo en Ionic 4?

3

¿Qué ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes básicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides dinámicos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una página de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una página de registro

20

Navegación entre login y registro

21

Agregar un menú con el componente Menu

22

Dar funcionalidad y estilos al menú

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

Página completa con artistas, canciones y álbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de álbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra página de Settings con CSS

35

Página Sports y Angular Maps

36

Crear la página Sport

37

RETO: Buscador dinámico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Lógica de nuestro reproductor

30/39
Recursos

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El cálculo de la línea 62 no permite que barra llegue al final. En su lugar se debe utilizar la siguiente fórmula:

this.newTime = ( 1 / this.currentSong.duration ) * this.currentSong.currentTime;

Les comparto, no sé si hice algo mal, pero tuve que agregar un*ngIfal home.page.html porque me estaba provocando errores con algunas propiedades de las variables. Así quedó:

<ion-footer *ngIf="song">
    <ion-row *ngIf="currentSong">
        <ion-col class="ion-text-start">{{ parseTime(currentSong.currentTime) || "0:00"}}</ion-col>
        <ion-col class="ion-text-end">{{ parseTime(currentSong.duration) || "0:00" }}</ion-col>
    </ion-row>

IONIC 6

El reproductor de música sigue funcionando igual como lo explica el profesor, hay un error que se soluciona definiendo dos variables con el tipo any, así:

song: any = {};
currentSong: any = {};

La cabeza me va explotar, genial maestro Sebas 😃

Vamos a conectar con la canción seleccionada y dar los tiempos de reproducción en nuestro homepage

hay que hacer los cambios en home.page.ts

home.page.ts

// Cambio en variables
interface Song {
 name?: string;
 playing: boolean;
 // eslint-disable-next-line @typescript-eslint/naming-convention
 preview_url?: string;
}

 song: Song = {
	 name: '',
	 playing:false,
	 // eslint-disable-next-line @typescript-eslint/naming-convention
	 preview_url: ''
 };
 currentSong: any = {};
 newTime: any;


// Cambio en funciones
play(){
	 this.currentSong = new Audio(this.song.preview_url);
	 this.currentSong.play();
	 this.currentSong.addEventListener('timeupdate', () => {
	 this.newTime = (this.currentSong.currentTime * (this.currentSong.duration / 10)) / 100;
	 });
	 this.song.playing=true;
 }

 pause(){
	 this.currentSong.pause();
	 this.song.playing=false;
 }

 parseTime(time='0.00') {
	 if (time) {
		 const partTime = parseInt(time.toString().split('.')[0], 10);
		 let minutes = Math.floor(partTime/60).toString();
			 if(minutes.length === 1) {
					minutes = '0'+minutes;
		 }
		 let seconds = (partTime%60).toString();
			 if(seconds.length === 1) {
					seconds = '0'+seconds;
		 }
	return minutes + ':' + seconds;
	 }
 }

posteriomente hacemos los cambios en el ion-footer de nuestro homepage.html

<ion-footer>
	 <ion-grid>
		 <ion-row>
			 <ion-col class="ion-text-start">{{ parseTime(currentSong.currentTime) || "0:00"}}</ion-col>
			 <ion-col class="ion-text-end">{{ parseTime(currentSong.duration) || "0:00"}}</ion-col>
		 </ion-row>
	 </ion-grid>
	 <ion-progress-bar [value]="newTime"></ion-progress-bar>
		 <ion-grid>
			 <ion-row>
				 <ion-col size="1">
					 <ion-icon name="heart"></ion-icon>
				 </ion-col>
				 <ion-col size="10">
					 <ion-text>{{ song.name || "Aun no has seleccionado canción"}}</ion-text>
				 </ion-col>
				 <ion-col size="1">
					 <ion-icon name="play" (click)="play()" *ngIf="!song.playing"></ion-icon>
					 <ion-icon name="pause" (click)="pause()" *ngIf="song.playing"></ion-icon>
				 </ion-col>
			 </ion-row>
		 </ion-grid>
</ion-footer>
Hola comunidad! Quiero hacer una app para una radio, usar audio streaming, se puede hacer con Ionic? Tienen algun recurso para poder guiarme por favor?

no sería mejor crear un pipe ¿?

SOUNDHELIX
ALGORITHMIC RANDOM MUSIC COMPOSER

https://www.soundhelix.com/audio-examples

Que mucho ya hemos avanzado con este curso, increible!