Diversión con Javascript: ¡crea una aplicación de reproducción de música!

1. Te damos la bienvenida a la clase.: Hola, bienvenidos a esta clase. Si eres principiante en desarrollo web y quieres simplemente saltar y construir algunos proyectos divertidos, has llegado al lugar correcto. La idea detrás de esta serie es mostrarte lo que puedes hacer con HTML, CSS, y JavaScript regulares. No voy a estar usando ningún frameworks, ningún boilerplate, ninguna librería ni ninguna plantilla. En cambio, vamos a estar construyendo todo completamente desde cero paso a paso para mostrarte cómo funcionan todas estas tecnologías gratuitas. Durante este curso, descargaremos diversas canciones que vamos a incluir en nuestra aplicación. Entonces enumeraremos estos hacia abajo en la parte inferior. Una vez que el usuario hace clic en cualquiera de estas canciones, entonces tenemos acceso a todos los controles sobre en la parte superior aquí, vamos a hacer clic en el botón de reproducción, podemos pausar, podemos ajustar el volumen. Vemos exactamente qué canción se está reproduciendo actualmente y también tenemos esta barra de progreso la cual se actualiza sobre la duración de la canción. Esto es lo que vamos a estar creando. Crearemos esto completamente desde cero usando HTML, CSS, y lo haremos totalmente interactivo usando JavaScript. También vamos a añadir algunas animaciones agradables al hacer clic en una canción, hacer que estos auriculares reboten también. Esta aplicación te enseñará una amplia gama de habilidades, incluyendo audio HTML, trabajando con estilos CSS y animaciones. Por supuesto que también habrá mucho JavaScript. Tendremos matrices de canciones que recorrerán y luego se mostrarán en el navegador. Agregaremos oyentes de eventos, por lo que esta canción se activa cuando el usuario hace clic en ella. Trabajaremos con controles de audio para reproducir, pausar, volver a cargar, deslizadores de volumen, trabajar con el tiempo y la duración de la canción, y muchos más fundamentos de JavaScript como cadenas de plantilla, trabajar con funciones, sentencias condicionales, constantes, y mucho más. Esta clase está diseñada para principiantes de JavaScript. No obstante, sí ten en cuenta que este es el sexto proyecto en este JavaScript Fun Series, por lo que si eres principiante de JavaScript, te recomendaría que pases por los primeros proyectos en comenzar, para darte una buena base para llegar a esta etapa. Aunque si tienes algo de experiencia en JavaScript podrías simplemente saltar directamente a este proyecto. Gracias por tomar un interés. Espero que esta clase sea agradable y te veré dentro de la primera lección. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase. Incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido de la clase. Además, recuerda compartir tu Proyecto 2 aquí en Skillshare. No sólo voy a comprobarlo, sino que también inspirará a los compañeros de estudios también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 3. Dónde encontrar audio para tu aplicación: Antes de empezar con nuestra aplicación de reproductor de música, también necesitamos encontrar algunas canciones para poder jugar dentro de nuestra app. Entonces si tienes algunos archivos MP3 o algunos archivos de audio que quieras usar, puedes por supuesto, usar estos ya existentes y colocarlos en una carpeta llamada canciones. Aquí tengo seis canciones listas, las cuales voy a usar esta app. Todo lo que necesitas hacer es arrastrar sobre cualquier archivo de música existente que puedas tener y colocarlos en una carpeta de canciones. Alternativamente, si no tienes ninguna canción disponible, hay muchos sitios disponibles para descargar algunos archivos. Voy a estar usando los archivos de audio de bensound.com, y bensound.com es una forma de descargar algo de música sin derechos de autor para usar en nuestra app. Podemos seleccionar la música por diferentes géneros. Podemos seleccionar todos. También tenemos todas las diferentes etiquetas por encima de la parte superior aquí, podemos desplazarse por las páginas. Entonces una vez que encuentres algunas canciones que nos gustan, podemos dar click en la descarga. Vemos que tenemos algunas opciones para descargar. Podemos utilizar esto con una licencia gratuita si proporcionamos algunas atribuciones a la oferta. Todo lo que necesitamos hacer es escribir un enlace en nuestro proyecto al sitio. Si te gusta algún audio que esté en este sitio, adelante y descargue algunos de estos y colóquelos en la carpeta de canciones. También hay una licencia Pro disponible para comprar. Esto si no queremos aportar ninguna atribución. Adelante y descarga algo de música que te gustaría usar. Ponlos en la carpeta de canciones, y empezaremos a crear esto en el siguiente video. 4. Estructura HTML y reproducción de audio: Ahora deberías tener lista la carpeta de una canción con algo de música que quieres reproducir dentro de esta aplicación. Para empezar, este va a ser el proyecto que vamos a estar construyendo. Va a ser una aplicación de reproductor de música, que nos permitirá agregar algunos archivos de audio a nuestro proyecto, luego reproducirlos dentro de esta app. Vamos a recorrer todas las canciones dentro de nuestra carpeta de proyectos, la cual se muestra abajo en la parte inferior. Después podemos hacer click en cualquiera de estas canciones. Vamos a ver un poco de animación de pulso con el encabezado, y ahora se está reproduciendo nuestra canción. También tenemos algunos controles de audio personalizados, tenemos el botón “Play”. Tenemos el botón “Pausa”, y también podemos controlar el volumen hacia abajo en la parte inferior. Esto también va a tener una barra de progreso de audio, por lo que podemos ver qué tan lejos a través de esta canción estamos en realidad. Seguro que estás ansioso por empezar con este proyecto. Vamos a crear una nueva carpeta en el escritorio. Vamos a llamar a esto el reproductor de música. Arrastre sobre nuestra carpeta de canciones. Entonces podemos abrir esto en Visual Studio Code. Lo primero que tenemos que hacer como siempre es crear una página de índice dentro de nuestro reproductor de música. Hagamos clic en un nuevo archivo, y este es el index.html. También tienes la opción de usar la misma imagen de audífonos que he usado aquí. O también puedes descargar las tuyas propias también. Si sí quieres usar exactamente la misma cabeza sobre el mismo repositorio de GitHub que hemos utilizado a lo largo de este curso, entra en la aplicación de reproductor de música, y luego veremos un headphones.svg. Si hacemos click en esto, podemos luego dar click en el icono de “Código”, que luego nos dará todo el código SVG que necesitamos agregar a nuestro proyecto. Agarremos todo este código, y luego crearemos un nuevo archivo dentro de la barra lateral. Quiero llamar a mi nuevo headphones.svg. Pegue nuestros contenidos y guarde este archivo. Volveremos a esto en tan solo un momento cuando lleguemos a esa etapa en nuestro HTML. Pero por ahora, necesitamos crear nuestra estructura HTML con el atajo de Emmet, que es HTML5. Golpea “Enter”. Entonces podemos cambiar el título de nuestro documento para que sea “Music Player”. El interfaz de usuario para este proyecto es relativamente sencillo. Simplemente vamos a empezar por crear nuestra imagen sobre la parte superior, dentro de un contenedor principal. Entonces abajo esto tendrá nuestro reproductor de audio. Voy a enumerar las canciones. También usaremos los controles de audio predeterminados solo por ahora, y luego los anularemos en el próximo video. En primer lugar, dentro de la sección de cuerpo, vamos a crear un div, que es el envoltorio para nuestro proyecto completo. Este div va a tener la clase de jugador. Esto es solo para que podamos agregar algo de estilo CSS en un próximo video. El imagen va a ser la imagen que acabas de descargar de GitHub, o puedes usar la tuya propia si lo prefieres. En la fuente, el mío es el “headphones.svg”, sólo texto alt también. Comprobemos esto es trabajar abriendo nuestra página de índice dentro del navegador. Copiar el camino. Pega esto y ahí está nuestro SVG en la pantalla. El siguiente que hay que hacer es todavía dentro de esta sección principal div, es crear realmente nuestro reproductor de audio, cual va a tocar nuestras canciones. HTML tiene un elementos de audio. Añadamos esto en. Esto tiene la etiqueta de apertura y de cierre. Danos una idea de jugadores para que podamos usar esto dentro de JavaScript más adelante. Entonces necesitamos proporcionar una fuente de audio con la que el reproductor de audio va a trabajar. Utilizamos esto con el elemento fuente. Este es un elemento de autocierre, por lo que no necesitamos tener una etiqueta de cierre. También para fines de JavaScript, más adelante, nos daremos una idea de fuente, para que podamos establecer esto dinámicamente desde nuestro script. Esto también necesita atributos de una fuente. Desde aquí podemos pasar en cualquiera de nuestras canciones, que está dentro de nuestra carpeta de canciones. Podemos seleccionar cualquiera de estos. Realmente no importa por ahora esto solo para nuestros propósitos de pruebas. Tenemos nuestro reproductor de audio y también una fuente. Entonces justo después de esto, vamos a agregar algo de texto, que va a ser audio no soportado. Ahora, el reproductor de audio ha estado alrededor desde hace un tiempo, pero si lo usan, está usando un navegador realmente viejo o un navegador que no admite audio. Este texto se mostrará en la pantalla en su lugar. Después del reproductor de audio, podemos entonces llegar a trabajar con la creación nuestra lista de canciones con un encabezado de nivel dos de mis canciones. Nuestra lista de canciones se va a envolver dentro de un div, con un ID de lista de canciones. Por ahora, vamos a mostrar una lista más antigua que ha ido a la salida. Los nombres de todas las canciones dentro de nuestra carpeta de canciones. Nuestro primer elemento de lista va a ser la primera canción que está dentro de nuestra carpeta de canciones. Abramos esto. Entonces necesitamos escribir una canción exactamente como aparece dentro de aquí. El primero es de extensión “bensounds-clapandyell.mp3". Estoy usando seis canciones diferentes aquí, que todas empiezan con Bensound. Voy a duplicar esto cinco veces más. El segundo es “Danza”. El tercero, “Elemento Funky”. Entonces “Felicidad”. “ Happy Rock”. Entonces el último es “The Lounge”. Podemos o bien refrescar el navegador o también podemos hacer uso del servidor en vivo. Voy a subir al comando “Ver” y entrar al Pallete de Comandos, luego hacer una búsqueda del servidor en vivo. Entonces abre esto con el servidor en vivo. Ahora dentro del navegador, tenemos nuestra imagen de audífonos. También tenemos nuestra lista de canciones, pero actualmente, no vemos nada relacionado con nuestro reproductor de audio. Esto se debe a que para que esto aparezca en la pantalla, también necesitamos agregar los controles. Este es un atributo y esto asegurará que nuestro reproductor de audio se muestre en el navegador e incluya todos los controles necesarios que necesitamos para controlar nuestras canciones, que es la reproducción, un deslizador de volumen, y también la duración de tiempo de la canción. Ya que ya configuramos la fuente para que sea una de nuestras canciones, ahora podemos presionar “Play” dentro del navegador. Nuestra canción empezará ahora la obra. Estos son los conceptos básicos de nuestro HTML y también un reproductor de audio HTML 5 predeterminado estándar. No obstante, aunque no vamos a utilizar este reproductor de audio para nuestro proyecto. Vamos a pasar ahora al siguiente video, donde vamos a crear un reproductor de audio personalizado. 5. Controles de audio personalizados: Como hemos visto en el video anterior, ahora tenemos controles que son los controles de audio predeterminados proporcionados con el reproductor de audio HTML5. Ahora vamos a crear nuestros propios controles a este proyecto que incluye el botón de reproducción, el botón de pausa, y también la barra de volumen y progreso. El camino al igual que hemos visto en el último video, para quitar esto es quitar nuestro atributo de controles que está dentro del reproductor de audio. Si guardamos esto, vemos que nuestro reproductor de audio ahora se retira del navegador. Desde nuestro elemento fuente justo debajo también podemos eliminar el atributo fuente, ya que vamos a agregar esto dinámicamente usando JavaScript. Ahora hemos quitado estos controles, ahora necesitamos seguir adelante y crear los nuestros propios. Para ello, vayamos justo debajo de nuestro reproductor de audio y creamos un nuevo div el cual va a tener el ID de controles. Esta sección de control, si vamos a la versión final va a tener el texto en la parte superior con la canción que toca actualmente. Tendremos un botón de reproducción, y una pausa, junto con un deslizador de volumen hacia abajo en la parte inferior. Ahí hay sección de control. Si vamos a la versión final, esto va a tener el texto de ahora tocando y luego la canción actual tocando. Tendremos nuestros iconos para jugar y pausar. Entonces nuestro deslizador de volumen hacia abajo en la parte inferior. Empecemos con nuestro elemento p, que va a ser para nuestro texto para la canción que se está reproduciendo actualmente. Estos elementos p estarán vacíos por ahora ya que lo estableceremos a través de JavaScript, pero podemos establecer esto por ahora con un ID de canción actual. Justo después de esto, podemos crear un div que es un envoltorio para todos los juegos en nuestros botones de pausa. La clase para este wrapper va a ser controles wrapper, esto es para nuestro CSS. Entonces dentro vamos a sumar nuestros dos elementos span y esto va a tener una entidad HTML. El primer código de entidad HTML que vamos a utilizar va a ser para nuestro botón de reproducción. Esto tiene el valor de los ampersands, el hash, 9658, seguido del punto y coma. El segundo va a ser para nuestra pausa y para ello, vamos a crear dos barras verticales igual que vemos en la versión final justo aquí. El código que necesitamos para esto es que los ampersands, los duros, 10074, y el punto y coma. Vemos que solo tenemos una de estas barras verticales por el momento, pero podemos copiar esto y pegarlo justo al lado para darnos el símbolo de pausa. Entonces también necesitamos una sección de volumen solo sopla este div, por lo que los elementos div p detectarán el volumen. Un div con la clase de volumen y esto va a ser un envoltorio para nuestros símbolos positivos, nuestros negativos y también la entrada que va a tener el tipo de rango. En primer lugar el símbolo negativo dentro de nuestros elementos span, que es simplemente un guión seguido de nuestras entradas con el tipo de rango. Podemos controlar esto desde nuestro JavaScript dándole un ID de slider de volumen. Para nuestro volumen, necesitamos establecer el rango para que esté entre cero y uno y podemos hacerlo con min igual a cero y el atributo max sea igual a uno. El atributo final de este paso, voy a establecer esto para que sea 0.01, y esto significa que nuestro deslizador de rango cuando vayamos de izquierda a derecha, subirá en etapas de 0.01. Esto nos dará un slider bastante suave a medida que vamos de izquierda a derecha y luego justo después de esto, vamos a tener que abarcar un extraño en el icono más. Esta ahora es la sección visual o la sección HTML ahora atendida para nuestros controles personalizados. Dado que estos son simplemente elementos HTML no tocarán ninguna música en este momento dentro del navegador, pero lo arreglaremos muy pronto usando JavaScript. 6. Cómo aplicar estilo en CSS: Pasando al estilo. Pasemos a la barra lateral y creemos nuestras hojas de estilo, que estoy gong para llamar el styles.css. Entonces podemos vincular esto dentro de nuestro índice, dentro de la sección de cabeza con el elemento de enlace. El relato es una hoja de estilo, y esta es nueva raíz de nuestro proyecto. Podemos vincular esto con styles.css. Abre esto, y como siempre, vamos a empezar con nuestra sección HTML estableciendo el tamaño de fuente raíz. Esta es solo la forma en que hago las cosas configurando esto en 10 píxeles. Para hacer los cálculos realmente fáciles a la hora de convertir esto con un REM. Pero como siempre, puedes acercarte a esto de cualquier manera diferente que prefieras. Tu sección de cuerpo para esto va a tener un fondo el cual será un gradiente lineal. Entonces podemos sumar dentro de nuestros dos valores para fundir entre. El primero, un valor hexadecimal de 3b3b3b. El segundo va a ser bastante similar. Esto va a ser 2b2b2b. Si estás usando el servidor en vivo, solo puedes guardar el archivo y esto actualizará el navegador de inmediato. Si no, sólo tienes que ir al navegador y golpear refrescar. Después del fondo, también podemos establecer la altura de esto para que sea del 100 por ciento. Esto estirará el fondo a medida que obtengamos más contenido. El color actualmente en el texto es un poco demasiado oscuro para el fondo. Entonces voy a cambiar esto para que sea un valor del humo blanco. También un tamaño de fuente más grande de 1.4 REMs. También podemos centrar esto con margen. Voy a ir por dos REM, que estarán en la parte superior e inferior, y luego cero a la izquierda y a la derecha. Algún relleno, que nos va a dar algo de espacio en el interior de esta sección de cuerpo gris, también de dos REM. Podemos centrar el texto con text-align center. Entonces después de esto, pasaremos a la página de índice. Podemos ver que dentro del cuerpo tenemos este div con la clase de jugador. Esto va a rodear casi todo el contenido dentro. Al igual que sólo vemos la versión final, vamos a darle a esto un color de fondo, que es este color morado, y también tiene un gradiente radial. Tenemos el color más oscuro en el centro, y luego se extiende para ser un color más claro en el exterior. Nuestro objetivo es la clase de jugador sobre en nuestra hoja de estilos. Establezcamos nuestro fondo y el gradiente radial. Los dos valores por los que voy a ir van a ser 211e24. El segundo, de nuevo, un valor hexadecimal que este es 4f3341. Ahora vemos nuestro gradiente radial, que proviene del centro del fondo y se funde con el borde exterior. Después de esto, algún relleno para darle a esto algo de espaciado en el interior del elemento de dos REM, y luego podemos redondear las esquinas de esta sección púrpura con nuestro radio de borde. Ahora se cuida el envoltorio, y ahora necesitamos movernos dentro de esta sección de jugadores, después comenzar a trabajar con nuestro contenido. En la parte superior, tenemos esta imagen y la imagen es un poco demasiado grande para nuestro proyecto. Si pasamos a nuestra hoja de estilo, podemos apuntar a esto. Entonces podemos restringir el ancho para que sea 50 por ciento del espacio disponible. Después de nuestra imagen, no necesitamos hacer nada con esta sección de audio porque estamos usando nuestros propios controles personalizados, los cuales se enumeran justo a continuación. Esta sección de control tiene el ID de controles. Vamos a usar es agregar un borde y también algo de relleno a la sección, igual que vemos en la versión final. El concepto de controles, nos apuntamos a esto con el hash. El borde, este va a ser de un píxel de ancho, un color de gris pizarra claro. Esta también va a ser una línea sólida. Para redondear las esquinas, podemos agregar nuestro radio de borde de 10 píxeles o también podemos hacer un REM. También algo de relleno en el interior de la sección para darle algo de espaciado desde nuestros controles. Actualmente, ahora vemos menos contenido en la pantalla ya que hemos hecho la imagen un poco más pequeña. Ahora podemos ver que el color de fondo gris que teníamos para la sección de cuerpo ahora no está cubriendo toda la altura de la página. Para solucionar esto, podemos cambiar la altura para que sea 100 por ciento de la altura actual del tablero de vista, que es la altura del navegador. También podemos asegurarnos de que este sea el mínimo también. Pasa a nuestro HTML y luego adentro aquí, tenemos esta clase de controles wrapper. Dentro de aquí, esto contiene nuestros dos tramos los cuales tienen nuestros iconos para los controles de reproducción y pausa. Podemos apuntar a todos estos elementos divertidos que están dentro de nuestra envoltura de control. Volver a nuestras hojas de estilo. Entonces podemos apuntar a los controls_wrapper. Entonces podemos seleccionar todos los elementos span que se siguen inmediatamente este div. Dentro de aquí queremos asegurarnos de que el cursor del ratón sea un puntero. Esto cambiará nuestro puntero cada vez que pasemos el cursor sobre cualquiera de estos iconos. El color, esto va a coincidir con la frontera, por lo que esto va a ser gris pizarra ligera. Podemos hacerlos más grandes con el tamaño de fuente de seis REM. Algún relleno para darle a esto algo de espaciado. Entonces vamos a pasar a nuestras canciones. En primer lugar, dentro de esta envoltura, también tenemos este elemento p con el ID de CurrentSong. Cada vez que el usuario hace clic en cualquiera de estas canciones, entonces vamos a agarrar el nombre de la canción, y luego colocarlo en la parte superior. También tenemos que manejar qué hacer si un título de canción es realmente largo, ya que no queremos que este derrame por el borde de la pantalla. El modo de hacerlo, si agarramos nuestro ID, que es CurrentSong, y usamos el hash. Todo lo que vamos a hacer para evitar esto es establecer la propiedad de desbordamiento y establecer esto para que se oculte. Esto básicamente va a ocultar el resto del título, que es demasiado ancho para caber dentro del contenedor. Si nuestro título estuviera justo al otro lado de la página, tan pronto como llegara al borde de nuestro div, entonces se ocultaría el resto del texto. También podemos hacer lo mismo abajo en nuestra lista de canciones. Entonces nos desplazamos hacia abajo. El apartado de canciones tiene este ID de SongList. Haremos lo mismo, estableceremos el desbordamiento para que se oculte. También podemos alinear todos los textos a la izquierda de nuestra sección. Cada una de nuestras canciones es un elemento de lista. De vuelta a nuestro HTML, tenemos nuestros ítems de lista los cuales envuelven cada una de estas canciones. También podemos cambiar el cursor para que sea un puntero cada vez que el usuario pase por encima de cualquiera de estas canciones, igual que hicimos con nuestros iconos. Nuestro artículo de lista. El cursor va a ser un puntero. También 1.5 REMs de relleno para darnos algún espacio entre cada una de nuestras canciones. Tenemos nuestro espaciado, y también podemos ver que el cursor cambia a un puntero cuando pasamos el cursor sobre cada uno de estos. También podemos asegurarnos de que el color de fondo cambie para ser un color rojo que coincida con estos auriculares. Hagámoslo cuando pasemos sobre cualquiera de estos elementos de la lista, así que li. Podemos seleccionar el estado de flotación. Todo lo que vamos a hacer es establecer el color de fondo para que sea un valor rojo, que es f3644b. Esta es ahora la base del estilo para nuestra aplicación, y también se ve bastante bien en la pantalla pequeña. No obstante, si hacemos esto mucho más amplio, quizá deseemos introducir una consulta de medios para restringir el ancho máximo de esta sección de cuerpo. Añadamos esto en la parte inferior en medios, y luego seleccionaremos todas nuestras pantallas con un ancho mínimo de 800 píxeles. Selecciona nuestra sección de cuerpo, y luego podemos establecer el ancho máximo para que sea el 60 por ciento del ancho de la barra de vista. También el tamaño de fuente, vamos a aumentar esto para ser 1.8 REM. Ahora la sección del cuerpo está restringida, pero también necesitamos volver a colocar esto en el centro. Hagámoslo. Si volvemos a nuestra sección de cuerpo original y dentro del margen, estamos estableciendo dos REM en margen en la parte superior e inferior. Ponga cero a la izquierda y a la derecha. Podemos arreglar esto configurando esto para que sea automático, y esto dividirá por igual cualquier margen restante de izquierda y derecha. Este es el estilo que ahora se hace para nuestra app. A continuación, vamos a pasar a añadir JavaScript para enumerar todas nuestras canciones. 7. Cómo listar nuestras canciones con Javascript: El siguiente paso para este proyecto es agregar nuestro guión. Abre la barra lateral sido crear nuestro nuevo script.ks. Dentro de la página de índice, puede entonces vincular esto justo encima de la etiqueta de cuerpo de cierre. El guiones tiene la fuente dentro de nuestra raíz. Este es simplemente el script.js. Para empezar, vamos a agarrar todos los elementos de nuestra lista, colocarlos dentro de una matriz, y luego crear un bucle FOR que los va a colocar de nuevo dentro de esta sección. Agarra cada uno de nuestros artículos de la lista. Voy a copiar estos a nuestros guiones. Por el momento, este no es un JavaScript válido. Vamos a pasar esto a nuestra matriz. Nuestro array se va a llamar canciones. Después vamos a pasar por encima de cada uno de nuestros ítems de la lista y colocarlos dentro de las cotizaciones. El primero, separado por coma, agarra nuestro segundo, coloca estos dentro de las comillas, voy a agregar una coma entre cada uno de estos elementos de matriz, colocarlos dentro de la matriz. También podemos eliminar cada uno de estos ítems de la lista también. Ahora que cada una de nuestras canciones está dentro de nuestro JavaScript, entonces podemos volver a nuestra página de índice y eliminar esta lista completa ordenada. Esto se debe a que vamos a crear una función que va a seleccionar nuestra lista de canciones y luego colocar dentro una nueva lista de pedidos la cual se ha creado a partir de JavaScript. Para ello, vamos a crear una función llamada crear lista de canciones. El primero que tenemos que hacer dentro de esta función es crear una nueva lista ordenada. Hacemos esto con document.CreateElements, eso está en nuestra lista ordenada. También necesitamos instalar esto dentro de una constante para que podamos agregar cada elemento de lista. Pero, ¿cómo vamos a crear seis nuevos elementos de la lista? Bueno, podríamos agregar cada uno de estos individualmente, pero es mucho más eficiente crear un bucle para hacer esto seis veces. Vamos a crear un bucle FOR. Queremos que este bucle se ejecute seis veces o tantas veces como elementos de matriz. El modo en que podemos hacer que esto se ejecute seis veces es creando una variable. Voy a llamar a la mía i, y inicialmente pondré esto en un valor de 0. La segunda declaración es cuántas veces queremos que se ejecute este bucle. Por el momento, tenemos seis canciones separadas, pero no queremos agregar un valor codificado duro. En cambio, podemos acceder a nuestro array de canciones y usar la propiedad de la tierra. Mantendremos esto funcionando siempre y cuando el valor de i sea menor que una canciones.length. Entonces cada vez que se ejecute este bucle FOR, entonces vamos a incrementar el valor de i por uno. Tan sólo para recapitular, se van a crear seis elementos de lista. Para ello, vamos a usar un bucle FOR. Para asegurarnos de que esto se ejecute seis veces, vamos a usar una variable llamada i La primera vez que se ejecute este bucle, seré igual a 0. Entonces seguirá corriendo mientras i sea menor que canciones.length, que es igual a seis. Entonces lo incrementaré para que sea un valor de uno. La próxima vez que se ejecute este bucle, seré igual a uno, que es menor que la longitud de nuestra matriz de canciones. Esto seguirá funcionando hasta el último bucle, donde seré igual a seis, que ya no es menor que canciones.length, provocando que nuestro bucle termine. Para empezar, crearemos nuestro nuevo elemento de lista con document.CreateElements. El elemento que queremos crear es un elemento de lista y almacenarlo dentro de una constante llamada elemento. Esto nos llevará entonces con un elemento HTML así como este. Entonces necesitamos crear nuestros contenidos que está dentro. Por ejemplo, en nuestro primer bucle queremos pasar en los primeros elementos dentro de nuestra matriz. El modo en que podemos crear esto es mediante el uso de crear un nodo de texto. ¿ Cómo hacemos para crear este contenido? De lo que podemos hacer esto con document.CreateTextNode. El nodo de texto que queremos crear es a partir de nuestra matriz de canciones y el valor de i. En el primer bucle, i está en 0. Esta será la canción 0, que es nuestra primera. En el segundo bucle, canciones son iguales a 1, este será nuestro segundo. Ya que recuerdas que las matrices comienzan en un índice de 0, esto nos dará nuestro título de canción. Entonces podemos anexar esto a nuestro artículo. Quita esto. Podemos agarrar nuestro artículo, llamar al método llamado append child. Entonces podemos pegar en nuestro nodo de texto. Después de esto, queremos agarrar voy a alterar lista, que se almacena dentro de esta variable de lista. Después podemos llamar a append child y agregar nuestro elemento de lista individual. Al final de nuestra función, podemos entonces devolver nuestra lista ordenada recién construida. Entonces podemos agregar esto al DOM si vamos a nuestra página de índice. Recuerda, tenemos este div con el id de lista de canciones. Después vamos a volver a colocar nuestra lista de pedidos dentro de esta sección. Por lo que de vuelta a nuestro guión y podemos agarrar esto donde obtenemos elemento por ID, donde queremos pasar en nuestra lista de canciones. Vamos a anexar método de niño. Entonces podemos pasar en la lista devuelta de desde nuestra función “Crear lista de canciones”. Esto ahora suma todas nuestras canciones de nuevo a nuestro reproductor. Actualmente, no podemos hacer click en ninguna de estas canciones para tocar. Esto va a ser algo que vamos a arreglar en el siguiente video. 8. Reproducción de canciones de forma dinámica: Bien, entonces ahora tenemos nuestras canciones listadas dentro del navegador, y lo siguiente que vamos a hacer es habilitar al usuario para hacer clic en cualquiera de estos títulos de canciones y luego cargar esto en el reproductor. El modo en que vamos a hacer esto es, de nuevo, hacer uso de nuestra lista de canciones, y luego vamos a activar una función cada vez y se hace clic en esto. En lugar de duplicar esta sección aquí, vamos a resolver esta referencia dentro de una constante llamada SongList. Podemos entonces agarrar nuestra sección AppendChild la cual creamos en el último video, eliminar esto, y luego podemos agregar esto directamente a nuestra constante. Ahora tendremos la lista de canciones almacenada dentro de una constante. También podemos hacer uso de esto y escuchar cualquier clics a la sección. Podemos hacer esto con una propiedad llamada onclick, y esto va a desencadenar una función. Esta función va a tomar en la información del evento, y vamos a echar un vistazo a exactamente qué información se incluye con este evento registrando esto en la consola. Ahora nos dirigimos a nuestra consola dentro del navegador. Haga clic en cualquiera de estas canciones, y luego veremos que se muestra mucha información dentro de la consola. Vemos que se trata de un evento de ratón, ya que se ha hecho clic en esto con el ratón. En particular, la pieza de información que nos interesa es este objetivo justo aquí. Dentro del objetivo, necesitamos desplazarnos hacia abajo y echar un vistazo a nuestro InnerText. Podemos ver el InnerText contiene el nombre de nuestra canción. Si también tratamos de hacer clic en cualquier elemento diferente, como el número 4, entonces podemos volver a la consola, abrir esto, y dentro de nuestros objetivos y nuevamente abajo a nuestro InnerText. Vemos que tenemos acceso a nuestro título de canción una vez más, así que qué tenemos que hacer si vamos a nuestra página de índice y nos desplazamos hasta nuestro reproductor de audio, recuerda de los elementos fuente, hemos movido este atributo fuente desde un principio. Lo que ahora tenemos que hacer es agarrar nuestro texto interior y luego reemplazar esto como nuestro nuevo atributo. El modo de hacerlo: en primer lugar, si agarramos una referencia a nuestra fuente, y podemos hacerlo con un document.GetElementById. El ID de este elemento también es fuente, y ahora podemos acceder a nuestra variable fuente, establecer el atributo fuente, y el atributo va a ser la ruta del archivo a nuestra canción, por lo que todas nuestras canciones se almacenan dentro de estas canciones carpeta. Necesitamos agregar canciones, barra inclinada hacia adelante, y luego, igual que hemos visto en la Consola, para obtener el valor de nuestro nombre de canción, necesitamos acceder a nuestra variable de evento, al objetivo, y luego también al InnerText. Entonces, hay dos pequeñas cosas más que tenemos que hacer. Estas dos cosas es cargar realmente el audio y luego la función llamada a reproducir. Para ello, necesitamos una referencia a nuestro jugador. Si volvemos a nuestro HTML, nuestro elemento de audio alberga ID de reproductor. Agarremos nuestra referencia, guardemos esto dentro de una constante, Aquí const jugador. Esta const es igual a document.getElementById, el ID es jugador. Entonces podemos usar esta variable player para, primer lugar, call load, que va a precargar el audio que ponemos justo arriba sin reproducirlo realmente dentro del navegador. También eliminará o restablecerá cualquier canción cargada previamente. Después de esto, una vez más accedemos a nuestra variable de jugador. Pero esta vez, llamamos play, que va a empezar a reproducir nuestra pista de audio. Vamos a probar esto. Si pasamos al navegador, pincha en cualquiera de nuestras canciones, ahora debes ver que las canciones se están reproduciendo de inmediato. Bien, entonces ahora esto está en su lugar. Yo sólo voy a volver a nuestro index.html. Si también estás usando algunas pistas de audio, igual que yo, que necesita alguna atribución, puedes ordenar esto dentro del HTML, y lo que hay en la mía justo debajo de la lista de canciones. Yo quiero agregar esto como texto, entonces música, la mía es bensound.com. Lo anidaremos por dentro, voy a añadir un enlace con el elemento a. El enlace era https, esto era bensound.com. También podemos agarrar este enlace y pegar esto como el texto del enlace. El texto del enlace es un poco difícil de ver, por lo que podemos hacer un pequeño cambio a nuestro CSS. Justo en la parte inferior, agarra nuestro un elemento. También podemos establecer un color a juego para que sea humo blanco dejando nuestro enlace mucho más visible. Con nuestras canciones ahora tocando, lo siguiente que vamos a hacer en el próximo video es agarrar también título de la canción y también mostrar esto justo encima de nuestros iconos. 9. Cómo establecer la canción que se está reproduciendo actualmente: Este va a ser un video bastante sencillo. Todo lo que vamos a hacer es agarrar este título de la canción y luego mostrar esto dentro del navegador. Vamos a hacer esto es seleccionar nuestro elemento p que creamos temprano en la página de índice. Este elemento p tiene el ID de “CurrentSong” y actualmente está configurado para estar vacío. Probemos esto con el ID, y podemos establecer el texto interno. Podemos hacerlo cuando seleccionamos nuestra nueva canción dentro de esta función “onclick”. Voy a hacer esto justo antes de cargar nuestro audio. En primer lugar, vamos a agarrar nuestros elementos. Podemos usar cualquier cosa como “getElementById” o podemos usar “QuerySelector”. Como miramos antes, “QuerySelector” nos permitirá seleccionar cualquiera de nuestros elementos con un selector tipo CSS. Por lo que podemos seleccionar como “div” o en nuestro caso, tenemos un ID, por lo que lo seleccionamos con el hash, igual que haríamos en nuestro CSS. El ID de éste es el CurrentSong. Podemos entonces establecer el texto interno de nuestros elementos para que sea igual a una cadena. Si tan solo quisiéramos mostrar algún texto regular, podríamos agregar esto como una cadena dentro de las citas. Pero debido a que queremos agregar esto como una cadena dinámica que va a tomar en el título de la canción actual, necesitamos insertar algunas variables para que podamos agregar esto como una cadena de plantilla. Así que abre los traseros. Podemos empezar con el texto de Now Playing, un colon, y luego insertamos una variable con el símbolo $ y las llaves. Del último video, ya sabemos cómo obtener el título de la canción, y esto se almacena dentro de nuestro “e.target” y luego seleccionamos el “InnerText”. Hacemos exactamente lo mismo aquí dentro. Seleccione el “e.target.innerText” guardar este archivo, y pasar al navegador. Haga clic en una canción, y esto ahora se muestra dentro de nuestro reproductor de audio. 10. Controles de reproducción y pausa: En este video, vamos a enganchar nuestro juego y también nuestros botones de pausa para nuestro reproductor de audio. De vuelta en nuestra página de índice, dentro de nuestro envoltorio de controles, tenemos nuestros dos elementos span. El primero es para nuestro botón de reproducción para que podamos agregar un manejador de eventos onclick, que va a activar una función llamada PlayAudio. Debajo de esto, tenemos nuestro botón de pausa, y esto va a tener un manejador de clics para. Se va a activar la función de éste, se va a llamar pausa audio. Guarda este archivo y ahora en nuestro script, podemos configurar nuestras dos funciones. Justo en la parte inferior, el primero fue PlayAudio. Dentro de nuestro juego y también de nuestras funciones de pausa, necesitamos acceder a nuestro reproductor de audio. Arriba en esta sección onclick, ya tenemos una referencia a nuestro jugador. No obstante, debido a que esto ha sido declarado dentro de esta función, no podemos acceder a ella en ninguna otra parte de nuestro programa. Para acceder a esta obra de teatro desde todas nuestras secciones o para hacerla global, vamos a cortar esta línea de código, y podemos situarla en la parte superior. Ahora esta variable de juego no se declara dentro de una función. Esto ahora está en alcance global por lo que podemos acceder a él en cualquier función. Justo antes de seguir adelante, se guardará esto, y también comprobará que nuestras canciones aún se están reproduciendo al hacer clic en cada una de estas. Eso está bien. Ahora podemos pasar a nuestra función PlayAudio. Dentro de aquí vamos a crear un if statement, y esta if statement va a comprobar si el audio ha terminado de cargarse. Podemos hacerlo accediendo a nuestro jugador en una propiedad llamada ReadyState, por lo que ReadyState devolverá un valor verdadero o falso. Si el estado listo devuelve verdadero, esto significa que nuestro audio ha terminado de cargarse, y por lo tanto, podemos llamar a player.play. Después de esto, nuestra segunda función es pausar nuestro audio, y todo lo que necesitamos hacer dentro de aquí es llamar a player.pause, darle a este archivo un guardado y ahora podemos probar esto de nuevo en el navegador, darle una actualización a este archivo. En primer lugar, haga clic en cualquiera de nuestras canciones, comience a tocar. Una vez que esto comience, podemos probar nuestra función de pausa haciendo clic en este ícono, nuestro audio ahora se detiene, y si hacemos clic en reproducir el audio comienza una vez más. Por lo que nuestra jugada y también nuestras funciones de pausa ahora están funcionando completamente. En el siguiente video, vamos a pasar al deslizador de volumen para controlar el volumen para nuestro jugador. 11. El control de volumen: Ahora vamos a crear la funcionalidad para controlar el volumen dentro de nuestro reproductor de audio. Esto se está creando dentro de nuestra página de índice como un deslizador de rango. Por ello, necesitamos acceder a este elemento con nuestro ID. En nuestro guión y en la parte inferior podemos crear una constante la cual se va a almacenar una referencia a nuestro slider. Podemos seleccionar esto con get element by ID. El ID que acabamos de ver es el deslizador de volumen, accede a nuestras constantes. Entonces podemos agregar el manejador de eventos de entrada que va a activar una función cada uno en el valor de nuestro control de rango ha cambiado. Esto también va a tomar en la información del evento. Hagamos un registro de consola y veamos qué información se almacena en este evento. En las herramientas de desarrollador que haríamos clic con el botón derecho e inspeccionaríamos, haga clic en la consola. Entonces si ajustamos nuestro deslizador de rango, vemos que cada vez que el deslizador haya cambiado, esto desencadenará un nuevo evento. Vamos a expandir esto. Al igual que miramos antes para acceder a nuestro elemento, seleccionamos la propiedad objetivo. Si nos desplazamos hacia abajo, podemos encontrar el valor de nuestro elemento. Nuestro slider tiene el rango de 0-1 y actualmente tenemos un ajuste o un valor de 0.43. Ahora podemos usar este valor, almacenar esto dentro de una constante, y luego establecer nuestro volumen de juego. En primer lugar, crearemos nuestra constante para almacenar este valor llamado volumen y ajustaremos este igual a nuestro evento cual se almacena en e Seleccionaremos nuestro objetivo y luego el valor tal como hemos visto dentro de la consola. Accede a nuestra variable de juego. Ahora podemos configurar el player.volume para que sea igual a nuestra variable de volumen. Probemos esto por dentro del navegador. Elige cualquier canción. Debería empezar a jugar. Vamos a probar nuestro deslizador yendo de nuevo a cero y el audio se ha ido, empuje esto justo hasta el volumen completo. Ahora podemos aquí nuestro audio en su configuración más fuerte. Con nuestros controles ahora todos atendidos, ahora pasemos al siguiente video y crearemos nuestra barra de progreso. 12. Actualización de la barra de progreso: Ahora vamos a crear una barra de progreso dentro de nuestro proyecto, que se va a actualizar a medida que se reproduzca la canción. Por lo que esta barra de progreso estará justo al principio una vez que la canción haya comenzado, y la duración se actualizará a medida que avanza la canción. El primer paso es ir a nuestra “Página de Índice” y podemos crear un elemento de progreso. Pero aún así esto justo después de nuestra sección de audio y podemos aprovechar los elementos de progreso HTML. Podemos actualizar esto, vamos a tener un id, y este id va a ser igual al progreso. El segundo atributo va a ser el valor que inicialmente estableceremos en cero. Esto establecerá nuestra barra de progreso para que esté justo al principio, y luego lo actualizaremos con JavaScript. A continuación, podemos agregar un máximo, que va a ser igual a 100, por lo que nuestro valor de barra de progreso puede estar entre cero y 100. El segundo paso es subir a nuestro reproductor de audio, y luego vamos a añadir un nuevo atributo llamado ontimeupdate. Ontimeupdate es un evento que se ejecuta cuando la posición del audio ha cambiado. Entonces es decir, esto se va a ejecutar ya que se está reproduciendo el audio. Lo que necesitamos hacer aquí dentro es pasar cualquier función que queremos ejecutar en cada actualización. Voy a llamar a esta función UpdateProgress, y luego podemos crear esto en nuestro script. Por lo que abajo en la parte inferior, el nombre de la función era UpdateProgress. Cuando hemos creado nuestra barra de progreso, le damos a esta una ID de progreso. Podemos almacenar esto dentro de una constante llamada ProgressBar y establecer esto igual a documentos, getElementById y el ID fue progreso. También en esta barra de progreso, establecemos un valor inicial de cero, y ahora necesitamos actualizarlo con JavaScript. Podemos hacerlo seleccionando nuestra constante ProgressBar y luego establecer nuestro valor para que sea igual a un porcentaje entre cero y 100. El modo en que vamos a hacer esto es creando un cálculo. Este cálculo va a acceder tanto a la hora actual también a la duración que está disponible en nuestra constante jugador. Para ver esto, podemos comentar esto y simplemente hacer un console.log. En primer lugar, si nosotros console.log el valor del jugador y luego en el momento actual, vamos a duplicar esto. También podemos anotar la duración de la pista de audio. tiempo actual es la cantidad real de tiempo que ha transcurrido mientras estamos tocando la canción. El tiempo justo debajo es la longitud total de la pista de audio o a la consola. Para ver esto, podemos hacer click en cualquiera de nuestras canciones para comenzar la reproducción. El primer valor, que veremos justo aquí, pausemos esto. Esta es la duración actual de nuestra pista, y luego veremos la longitud de nuestra pista es de 176 segundos. Este valor siempre será el mismo ya que la longitud no cambia. Ahora necesitamos usar nuestros dos valores para crear un porcentaje entre cero y 100. El modo en que podemos hacerlo es agarrando nuestro CurrentTime en la escena y luego podemos dividirlo por el jugador.duración. Para convertir esto en porcentaje, entonces multiplicamos esto por el valor de 100. Después podemos eliminar nuestros registros de consola y comprobarlo en el navegador. Selecciona cualquier canción. Esta voy a empezar a jugar y ahora se está actualizando nuestra barra de progreso. Tan solo para terminar esta sección, también vamos a añadir un poco de estilo CSS a nuestra barra de progreso. También, nuestra hoja de estilo, seleccione nuestros elementos de progreso. Voy a empezar estableciendo el ancho para que sea 100 por ciento del espacio disponible. El alto de nuestra barra de progreso para ser tres rems, y luego algún espaciado en la parte inferior, que es un margin-fondo. Por lo que este archivo ahora tendrá un bonito estilo para nuestra barra de progreso. A primera vista, todo parece funcionar completamente bien, sin embargo, si entramos dentro de las herramientas de desarrollador, y luego dentro de la consola, seleccionamos una de nuestras canciones. Si abrimos esto, y si ampliamos esto, podemos ver que tenemos un mensaje de “Failed to set the “value” property” en nuestra barra de progreso. Esto puede parecer un poco extraño al principio porque nuestra barra de progreso está completamente actualizada dentro del navegador. No obstante, aunque este error se provoca en cuanto se ha reproducido nuestra canción. Esto es justo al principio por nuestro jugador.duración. Volvamos a nuestra UpdateProgress y podemos hacer un console.log por el valor de player.duration. Volvamos a la consola, actualicemos. En cuanto lo hagas, vemos el valor de no un número. Entonces en cuanto se carga, no tenemos ningún dato de duración justo al principio. Esto se debe a que estamos llamando a nuestra función antes de que se haya establecido la duración. Para superar esto solo vamos a llamar a esta función una vez que la canción haya comenzado a tocar. Quitemos el console.log y también estas dos líneas de código dentro de nuestra función. Podemos entonces crear una sentencia if, que va a comprobar si el jugador.CurrentTime es mayor que cero y esta sección sólo se ejecutará una vez que el reproductor de audio haya comenzado. Por lo tanto, podemos pasar en nuestras dos líneas de código que acabamos cortar y podemos probar esto de nuevo en el navegador. Abre las herramientas de desarrollador, selecciona cualquier arco nuestras canciones. Esta zona ahora desaparece. Estamos a punto de terminar con nuestro proyecto y en el siguiente video, vamos a añadir algunos toques finales a este proyecto. 13. Retoques finales: Ahora terminemos este proyecto agregando algunos toques finales. Vamos a añadir algunas fuentes de Google. También vamos a añadir una pequeña animación a nuestros auriculares cada vez que se ha seleccionado una pista de audio. También vamos a arreglar un pequeño problema a la hora de seleccionar una de nuestras canciones. En primer lugar, pasemos a Google Fonts. Voy a agarrar una fuente para este proyecto. El tipo de letra que voy a seleccionar para este proyecto se va a llamar Marcador Permanente. Estoy viendo esto igual que en los proyectos anteriores. Todo lo que necesitamos hacer es seleccionar nuestro estilo, click en el “Embar”, y luego traer nuestro enlace a nuestra página de Índice. Después de esto, también necesitamos nuestras reglas CSS, así que copia esta sección, en la parte superior de nuestras hojas de estilo, podemos luego pegar esto en nuestro HTML, guardar esto, y refrescar el reproductor de música, y nuestra fuente ahora está tomando efecto. Por defecto, el espaciado entre letras para esta fuente está bastante aplastado juntos. Para darle a esto un poco más de espaciado, voy a agregar una propiedad llamada espaciado entre letras, y luego darle a esto algo de espaciado de cuatro píxeles. A continuación, voy a añadir una pequeña animación de pulso a nuestros auriculares, cada vez que el usuario haga clic en cualquiera de estas canciones. Para hacer esto de nuevo en nuestro guión, vamos a añadir una nueva clase a nuestra imagen de auriculares, y luego podemos ajustar esta animación en nuestra hoja de estilos. Para agarrar la imagen de nuestros auriculares, podemos agregar un ID a este elemento, por lo que ID de los audífonos. Entonces podemos ir a nuestro script, y agregar un nuevo nombre de clase a estos elementos, cada vez que un usuario hace clic en cualquiera de estas canciones, justo al final de esta función. Seleccionemos los documentos, y luego podemos usar getElementById, o también un QuerySelector, igual que usamos antes. El ID era audífonos, agarra nuestra ClassList, y luego podemos añadir una nueva propiedad llamada pulso. Esto está agarrando la imagen de nuestros auriculares. Después agregamos una nueva ClassList de pulso, que ahora podemos usar sobre en nuestras hojas de estilo. Abajo en la parte inferior, el nombre de la animación, que se va a llamar pulso; voy a crear esto en tan solo un segundo. Entonces la duración de esta animación va a ser superior a 0.4 segundos. Para que esto funcione, también necesitamos crear nuestros fotogramas clave, es decir, animación de pulso. Utilizamos la sección de, y esto es para el inicio de nuestra animación. Todo lo que vamos a hacer aquí dentro es establecer la transformación y la propiedad de escala, para ser un valor de uno. Para empezar, este va a ser exactamente del mismo tamaño que originalmente era, mitad de camino, que va a ser del 50 por ciento. Después estableceremos la transformación para que sea un valor de escala de 0.9. Para terminar con nuestra transición, vamos a establecer el valor a, y esto va a transformar nuestra escala de nuevo a nuestro valor original de uno. Esto es sólo un cambio sutil. Vamos a pasar de la talla original al 90 por ciento, luego volver a la talla original. Esto ocurrirá a lo largo de una duración de 0.4 segundos. Dale a esto un ahorro, y podemos probar esto de nuevo en el navegador. Vamos a dar click a nuestra primera canción, y vemos ver pulso. Pero ahora si hacemos click en cualquier otra canción, no vemos la animación teniendo lugar. Esto se debe a que de vuelta en nuestro guión, agregamos en una clase, pero cada vez que seleccionamos una nueva canción, también necesitamos quitar a este aula cualquiera de los elementos. Esto va a ser muy similar, por lo que podemos copiar esta última línea, pegar esto en la función iniciada. Pero esta vez en lugar de sumar nuestra clase, vamos a quitar. Probemos esto; da click en cualquier canción, funciona nuestra animación de pulso. Probemos el segundo, y esto funciona para cada ítem en el que hacemos click. Lo último que vamos a hacer es arreglar un problema a la hora de seleccionar nuestras canciones. Esto puede, o puede que no sea un tema que usted ha destapado todavía. Pero si hacemos clic en alguna de nuestras canciones, esto entonces establecerá el texto Ahora Reproduciendo. No obstante, para ciertas partes de la sección, si hacemos click en justo encima de nuestro ítem de lista, obtenemos el contenido de todas nuestras canciones. Esto se debe a que de vuelta en nuestro JavaScript, estamos agregando este manejador de clics a nuestra sección completa de la lista de canciones. El listado de canciones es nuestro rapero, y esto contiene todos los elementos de nuestra lista. Todo funciona perfectamente bien si hiciéramos click en estos ítems de la lista. Pero si hiciéramos click en justo fuera de los ítems de la lista como acabamos de ver, esto seleccionará el contenido completo de nuestra lista de canciones. Para solucionar esto, vamos a reorganizar esta función para solo escuchar cualquier clics en los ítems de nuestra lista. El modo de hacerlo es seleccionando nuestros documentos completos, y luego podemos usar QuerySelectorAll plus en nuestros elementos 'li'. Esto va a agarrar todos los elementos de nuestra lista en la página. Podemos instalar esto dentro de una constante llamada enlaces, y ponerlo igual a nuestro valor. Este valor de los enlaces ahora serán nuestras seis canciones. Necesitamos recorrer todos estos seis valores, y luego agregar nuestro oyente de eventos a cada uno de estos ítems de la lista. Para ello, vamos a hacer uso de un for of loop, y esto se ve así. Entonces decimos por, y luego creamos una constante llamada enlace de enlaces. Esto va a recorrer todos nuestros seis enlaces, luego almacenar el valor individual dentro de una constante llamada enlace. Para cada enlace, entonces vamos a agregar un oyente de eventos, y el evento que queremos escuchar es 'click', que luego va a activar una función llamada SetSong, lo que significa que ahora ya no necesitamos recorrer nuestra canción completa lista, para que podamos eliminar esto. Ahora podemos convertir nuestra función en SetSong. Podemos entonces mover esto hacia abajo al lado de nuestra función. Dale a esto un guardado, y ahora puedes probar esto en el navegador. Haga clic en una canción, y todavía suena bien. Podemos cambiar canciones, y finalmente, si hacemos clic justo fuera de nuestros ítems de lista, esta función ya no se ejecutará. Con este problema ahora solucionado, este es ahora el final de nuestra aplicación de reproductor de música. Gracias por mirar, y espero que hayan disfrutado. 14. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare y también sígueme para cualquier actualización. También para ser informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más. Buena suerte. Ojalá te vuelva a ver en una futura clase.