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 proyectos similares

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

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 proyectos similares

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

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

Ejercicio

Aprende React.js Interactivamente

Lección

Aprender React Aquí: Tutorial de React Js