Reproductor de Música Estilo Neomorfismo en HTML CSS y JS

[@lupitacode]

Muchas gracias por ver el video! En la descripción del video van a encontrar enlaces a herramientas y blogs donde hablan de este tema así como sus pros y contras. El código: codepen.io/lupitacoding/full/oNbeoEZ

[@zeroidentidad]

ok

[@delagarza5608]

o un repositorio, no logré corre el script. Muy buen video. Gracias!!!!

[@cesarinadonato4374]

Le puedo agregar otra ventana o un botón que sea para videos?, Puedes subir el código :(. Por cierto muy buen video

[@lupitacode]

@@cesarinadonato4374 codepen.io/lupitacoding/full/oNbeoEZ

[@cesarinadonato4374]

@@lupitacode Muchas gracias :D

[@jesulujan01]

el negro está muy genial, trataré de hacerlo guiándome de tu ejemplo, excelente aporte

[@Marcostrabolarriagada]

Naaah buenisimo, ahora te sigo Lupita. Ai lo viu

[@lgcarp]

Yo tengo un problema. Pongo en mi boton pause en HTML: y en css: .hide: display: none; y el boton no desaparece!! no responde a display none. Porque? Saludos

[@renatomunoz9009]

muy bien Lupita como siempre....gracias por compartir, sigue adelante y un abrazo desde Chile

[@TeslaLive07]

Lupita tienes alguna aplicación para radio ..??

[@CristianXP44]

Impresionante. Gracias por compartir tus conocimientos. Me encanto el resultado final del reproductor.

[@thisistoplay9376]

Esta buenisimo lo guardare en favoritos

[@flamexdragonfco5695]

cual font awesome usas? y podrias explicarme como ponerlo. Muy buen video por cierto

[@drippie6665]

Excelente aporte, me ha gustado mucho

[@joseantoniodelapaz6374]

En qué momento puso las imagenes?

[@edgar1710]

Hola Lupita, podrías decirme como es para radios que son con ip y puerto, y como se puede hacer que cambie la imagen en cada canción.

[@oscar_cornejo]

Muy buen tutorial, grande Lupita! 👏🏼👏🏼

[@soydavidortiz]

Hola!!! Trate de replicar el codigo pero no me corre al final, si sale el estilo pero no la musica...

[@andresherrera5338]

Mil gracias lupita, me sirvió un montón :3

[@anyivanesaalvarezramirez594]

Excelente muchas gracias..........

[@chrisad97]

Excelente, disculpa no puedo hacer que se vean los botones, cual es la url en el head?

[@lupitacode]

El código está en el comentario fijado

[@Dant3117]

Gracias por compartir tu conocimiento sigue así

[@isaacfelipefloresmorales]

Hola amigos no se me reproduce la musica la tengo en un archivo local pero le doy a play y no la reproduce

[@Gio-li2ve]

quedo padre este diseño

[@robertmezagarcia8182]

Buen video, un seguidor mas en tu codepen :)

[@balitastimeu7772]

Tengo una duda, si quisera mas opciones, osea mas canciones, no puedo agregar dos canciones con el mismo id, tendria que hacer esa funcion y repetirla con todas las ids que necesite? o hay una manera mas eficaz de hacerlo? excelente video!

[@orbistrantor]

Excelente video

[@fixtergeek8057]

Muy interesante, muchas gracias!

[@josuebustillos8874]

Como funcionaria la barra de progreso?

[@lupitacode]

Ya eso es con Javascript

[@josuebustillos8874]

@@lupitacode Si gracias, lo resolví con una operacion multiplicando el tiempo de reproducción por 100 y dividiendolo entre la duracion del audio. Bendiciones

[@Yomathews]

Cómo le puedo agregar más canciones a la playlist

[@manafun3]

Como puedo agregar mas musicas y hacer que los botones para pasar y retroceder funcionen?

[@lupitacode]

Con Javascript lo puedes hacer

[@TeslaLive07]

Donde se puede descargar la aplicación ??

[@KevinRodriguez-gu8sn]

nitido todo pero tengo 2 problemitas.... Uno: el boton de play pause se queda en el reproductor y 2 no me deja reproducir la musica e visto el video y corregido cualquier cosa y lo e hecho identico pero no logro resolverlo

[@lupitacode]

Mi código está en Codepen puedes revisarlo. Saludos!

[@c.f.paraguay]

Iba ser buenísimo si dejarás un link para descargar el proyecto ya que yo aprendí correctamente quería descargar y modificar a mi estilo

[@alexssander6418]

Excelente!.

[@Carli180]

Hola Lupita cómo estás? Te hago una consulta, cómo haga para reproducir varias canciones? Gracias.

[@lupitacode]

Con JavaScript

[@huse360]

M... me imagino un videojuego con este estilo gráfico...

[@sebastian_pizarro]

Gracias Lupita

[@alejandromurillo9247]

una pregunta ,como se hace para colocar mas canciones y poder reproducirlas?

[@Carli180]

Yo le pregunté lo mismo y no respondió, por lo visto no sabe.

[@gianfrancogerman8889]

Esta genial 🙌

[@TorreInformativa]

Es hermoso 😍

[@GMEROVER]

Por q ami no sebe ve las imágenes de los botones

[@lupitacode]

Porque debes colocar el enlace a la librería de iconos para que los puedas usar

[@GMEROVER]

No entiendo

[@alvinortizchavez949]

como importa la url sel css¿?

[@TiagoSiqueiraxD]

En tu ejemplo, la canción no tiene tempo o una siguiente canción ... ¿podrías arreglar eso en un próximo video? gracias .

[@luisvelasquez9240]

como puedo agregar url de mi radio online

[@juancuya7w7]

No me salen los iconos :'u

[@manueldavidrojasangarita8326]

a mi tampoco, nisiquiera la opcion de darle play a la cancion:(

[@vibration7905]

El Programa Se Llama: Visual Studio Code

[@joelmontijorivas]

Genial video

[@carlosvalenciahenao4629]

En el framework "React" no funciona bien, en lugar de ligar el archivo html a un js, se deja el codigo JS en una función que puede ser llamada desde el onClick, sin embargo, una vez que se recarga la pagina no funciona. : /

[@galaxiatech8726]

React no es un framework, es una librería, supongo que deberías utilizar las funciones que te proporciona React, porque ella lo hace con Vanilla Javascript es diferente a que lo hagas con una librería como esa. Aunque el objetivo del video no es como tal reproducir las canciones sino hacer el diseño Neumorphism

[@adrianramirez364]

disculpa la url que tienes en css ¿cual es su finalidad? muy intuitivo y bien explicado cada concepto

[@lupitacode]

Es el tipo de fuente en este caso se llama Raleway y la puedes encontrar en Google fonts, en el css yo hice una import

[@kay_o]

Está bellisimo

[@kennethvolchok4122]

Hola! Como se hace para que la barra de tiempo se mueva junto a la canción? Hay alguna forma usando JavaScript ?

[@Angelus__]

Puedes hacerlo cambiándole el value en javascript, y para que se haga cada cierto tiempo, creas un intervalo y le dices que se ejecute cada ciertos milisegundos

[@edsonv136]

Hola! Muy buen video, de verdad se ve muy genial, inclusive lo tomé como base para un proyecto. nadamás que todo surge muy bien hasta que agrego el css y no me reproduce la canción, más sin embargo el diseño se ve perfecto. Nose si sea que lo hice en Sublime Text o nose. Espero me puedas ayudar:)

[@lupitacode]

Deje mi código en los comentarios, puedes checar que este correcto :)

[@bitacode]

que tema de VSC usas?

[@lupitacode]

Depende de la luz, el del video no recuerdo cual es. Esta es mi lista de temas favoritos de vscode 👇 twitter.com/lupitacode/status/1454642866609954816?t=ReA-EaPwySihyjgJPmvlxA&s=19

[@Juan-ln2qz]

Como puedo hacer que los botones redirijan a otro archivo html por ejemplo?

[@lupitacode]

Con el atributo target _blank

[@Juan-ln2qz]

@@lupitacode gracias!

[@realinteligencecomp7026]

hola, quedo genial, pero en el código javascript me aparece en error y eso que el codigo lo copie de la pagina que dejaste en los comentarios, lo copie y pegue, ¿y podrias hacer un video dandole las funciones de duración y mejorar lo de los botones de pausa y play porque no m,e funcionan mu bien?

[@lupitacode]

Checa tu css recuerda que yo le di un id a los elementos es posible que hayas colocado mal algunas cosas, también checa que hayas relacionado el documento javascript en la parte final del body.

[@realinteligencecomp7026]

@@lupitacode hola, no era el mismo codigo de css y de javascript, pero ya lo solucione y logre ponerle funcionalidad al reproductor.como el volumen, el play y stop pero mejore por que no me funcionaban y tambien un proggress bar para ver el que parte va el audio. Si quieres te pudo pasar el codigo(al codigo hay que corrigirle unos pequeños errores )

[@douglasperez3701]

Genial

[@IgnacioPanconpalta]

En el minuto 3:00 como hago para los iconos?

[@lupitacode]

Tienes que importar la librería de iconos

[@IgnacioPanconpalta]

@@lupitacode donde se puede encontrar esa libreria?

[@lupitacode]

@@IgnacioPanconpalta En ese video usé la de Font awesome

[@arielcopani]

👏👏😊👋🇦🇷

[@jose_plater_2141]

Hola, tengo una duda, como haces para programar en tiempo real?

[@lupitacode]

Si te refieres a que cuando hago algún cambio en el código se refleje automáticamente en el navegador, eso lo haces con la extensión "Live Server"

[@gilbertus5]

¿por que no usar lo mismo para la imagen (luz y sombra)?

[@lupitacode]

Si también se puede, pero como me base en la imagen de Dribbble y tiene otros colores de sombra por eso es que lo hice diferente

[@lupitacode]

Si también se puede, pero como me base en la imagen de Dribbble y tiene otros colores de sombra por eso es que lo hice diferente

[@portaldiv631]

puedes subir toda la carpeta de tu reproductor por favor

[@lupitacode]

En Codepen puedes encontrar mi código. Saludos! codepen.io/lupitacode/

[@portaldiv631]

@@lupitacode no se utilizar codepen, puedes subirlo en mega o drive para descargarlo?, el reproductor esta muy bonito

[@portaldiv631]

@@lupitacode el codigo completo necesito, en codepen esta una parte

[@lupitacode]

@@portaldiv631 en Codepen esta todo mi código completo, sino puedes hacer mi tutorial completo para eso esta el video. Saludos bye!

[@jaimerobertorosillorodrigu7983]

hola, como se llama la herramienta donde programas

[@lupitacode]

Visual studio code

[@Vector-2099]

Muy buen video, me agrado mucho. Una pregunta, cómo se llama el programa donde los estás haciendo?

[@lupitacode]

El editor de código se llama Visual Studio Code

[@Vector-2099]

@@lupitacode muchas gracias

[@roman_edu]

los iconos no aparecen 😪

[@lupitacode]

Jaja debes colocar la url de Font Awesome en el head, es de ley ✌️

[@roman_edu]

@@lupitacode si lo puse pero no sé que hize mal para que no aparezcan :'c

[@lupitacode]

@@roman_edu Tal vez colocaste mal algo de la url o puede que sea en la sintaxis al momento de colocar los iconos, hay que revisar de nuevo

[@roman_edu]

@@lupitacode si me equivoque en la url 😅 gracias

[@jorgesalasv.2.079]

tienen alguien el link del programa que usa

[@chacataplan]

Se ve genial, tendras mas ejemplos?

[@lupitacode]

En la descripción del video dejé algunos links a blogs donde se puede ver más ejemplos con diferentes tonos de colores.

[@alfredomartinez5751]

Oye, estuvo muy bueno, yo estoy intentando hacer uno pero con Grid pero lo resuelves excelente con flex! haces magia en ese código, aquí entre nos yo le di todo un día y casi no avance jajajajaja cuánto te llevo a ti hacerlo?

[@lupitacode]

Pues no me llevo mucho tiempo como 1 hora en lo que veía la documentación de como combinar los colores, y si también con Grid lo puedes hacer hay muchas maneras de hacerlo

[@jhimrogermenesesdiaz4766]

hola cuanto me cobras por hacer un reproductor como este y agregarle lo siguiente: - seleccionar L y R de manera independiente - que se visualice el nivel de volumen de 0 a 100 de 10 en 10 soy de Perú

[@lupitacode]

No hago trabajos Freelance. Pero puedes checar mi código en Codepen. Saludos!

[@tutorialespiro]

me puedes pasar el html?

[@lupitacode]

En el primer comentario dejé el código del proyecto

[@nahuelkun]

Hola, y el apk??🥺

[@lupitacode]

Cuál apk? Si necesitas el código lo encuentras en mi comentario fijado.

[@joze.rios44]

Lupita casate conmigo y no me sueltes nunca la mano

[@zeroidentidad]

wachao... como que si te tensaste en una parte :'v

[@lupitacode]

Jajaja si cuando estaba explicando lo del artículo de medium estaba con los ojos cerrados 😂

[@zeroidentidad]

@@lupitacode aweno tu tranqui en tu viaje de besto front end developa

[@josplay2330]

La verdad no me gusto, no explica casi nada, hay partes que escribe o copia pega y no dice que hizo o qué elementos se tiene que usar y más cosas

[@lupitacode]

Este video no es para principiantes , es para personas que ya tienen una base en CSS