A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Reproductor de audio como Spotify con React.js

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Vamos a crear un reproductor de MP3 que funciona de manera similar a Spotify, Todo List.

  • Los botones siempre deben permanecer en la parte inferior de la ventana gráfica o viewport (usa la posición fija para eso).
  • Solo tienes que implementar los botones Reproducir, Pausa, Siguiente y anterior.

🌱 Cómo empezar este proyecto

No clones este repositorio.

El primer pasa para empezar a codificar es clonar la plantilla de react.js en gitpod o localmente en tu computador.

a) Si estas usando Gitpod puedes clonar la plantilla haciendo clic aqui. b) Si estas trabajando localmente escribe el siguiente comando en tu terminal: git clone https://github.com/4GeeksAcademy/react-hello

💡 Importante: Recuerda crear un nuevo repositorio en tu github y actualizar el remote para poder subir tus cambios a github.

📝 Requisitos:

  • Listar las canciones de esta API utilizando la Fetch API,
  • Cuando el usuario hace clic en una canción, el player (reproductor) debe comenzar a reproducirla.
  • Cuando el usuario hace clic en el botón "siguiente", el reproductor debe comenzar a reproducir la siguiente canción de la lista, si no hay una canción siguiente, debe comenzar nuevamente a reproducir la primera canción de la lista, lo mismo aplica para el botón "anterior".
  • Usa el atributo reaccionar ref de react para obtener la etiqueta o tag de audio del DOM.
  • Asegurate de que haya una sola etiqueta o tag <audio> en todo el proyecto, usa refpara cambiar su src url.

Recomendaciones

  • Usa la funcion useRef.
  • No llames a la función setState porque perderá el estado de la etiqueta de audio si se llama a la función de render

😎 Te sientes con confianza?

Los siguientes requerimientos no son necesarios para entregar la solucion pero puedes intentar realizarlos si tienes tiempo y te sientes con confianza.

+1 Implementa control de volumen": dos botones, uno para subir y otro para bajar el volumen. +1 Modo repeticion: un checkbox que cuando esta activo, la cancion se repetirá eternamente. +2 Aleatorio:: un botón que al presionarlo reproduzca una canción aleatoriamente. +5 Medidor de progreso de la canción: Implementa un slider o progress bar que se complete a medida que la cancion se reproduce.

Regístrate para obtener acceso a archivos y video de la solución

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Regístrate para obtener acceso a archivos y video de la solución

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Hooks de React

Lección

Aprender React Aquí: Tutorial de React Js

Ejercicio

Curso de React.js desde cero y ejercicios interactivos