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.

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.

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

Empezar tutorial interactivo

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 funcione de manera similar a Spotify Todo List.

Los botones siempre deben permanecer en la parte inferior de la ventana (usa position: fixed para lograrlo). Solo necesitas implementar los botones de Reproducir, Pausar, Siguiente y Anterior.

🌱 Cómo iniciar este proyecto

No clones este repositorio porque usaremos una plantilla diferente.

Recomendamos abrir la plantilla react-hello, utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local utilizando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

1$ git clone https://github.com/4GeeksAcademy/react-hello

💡 Importante: Recuerda crear un nuevo repositorio, actualizar el remoto (git remote set-url origin <tu nueva url>), y subir el código a tu nuevo repositorio utilizando add, commit y push.

📝 Requisitos

  • Lista las canciones desde la API de Sounds usando la API Fetch.
  • Cuando el usuario haga clic en una canción, el reproductor debe comenzar a reproducirla.
  • Cuando el usuario haga clic en el botón "siguiente", el reproductor debe empezar a reproducir la siguiente canción de la lista. Si no hay más canciones, debe comenzar de nuevo reproduciendo la primera canción de la lista. Lo mismo aplica para el botón "anterior".
  • Usa el atributo ref de React para obtener la etiqueta <audio> del DOM.
  • Asegúrate de tener solo una etiqueta <audio> en todo el proyecto. Usa ref para cambiar su URL src.

😎 ¿Te sientes con confianza?

Las siguientes características no son necesarias para la solución final, pero puedes desarrollarlas si te sientes lo suficientemente confiado:

  • +1 Implementa control de volumen: dos botones, uno para subir y otro para bajar el volumen.
  • +1 Botón de modo repetición: cuando esté activado, la canción actual se repetirá indefinidamente hasta ser desactivado.
  • +2 Funcionalidad de reproducción aleatoria: las canciones se reproducirán de forma aleatoria en lugar de en orden.
  • +5 Implementa una barra de progreso con slider: la barra se moverá conforme a la canción y, si se hace clic, la canción saltará a ese tiempo.

Regístrate para obtener acceso gratis 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

Próximos workshops

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

16 hrs

Tecnologías

Regístrate para obtener acceso gratis 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