Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Vue
Code

Desarrolla un reproductor de música con Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Antonio Sejas (you can also view the original English article)

Final product image
What You'll Be Creating

Desarrollar aplicaciones con Vue.js es fácil, divertido y agradable. Puedes crear una aplicación totalmente funcional con el mínimo esfuerzo. Para demostrarlo, hoy te voy a mostrar lo fácil que es crear tu propio reproductor de música completo. Para hacer las cosas aún más fácil, que vamos a utilizar Vuetify.js, una librería de Vue.js con elementos de interfaz de usuario (UI), lo que acelerará el desarrollo de la interfaz. Casi puedo sentir tu impaciencia, así que vamos a empezar.

Usted puede encontrar el código fuente completo en el repositorio de GitHub. Y aquí está el ejemplo funcionando. Para seguir este tutorial, debe estar familiarizado con los componentes de la Vue, componentes de Vue en archivos independientes y sintaxis ES2015.

Planificación de la aplicación

Toda creación comienza con una idea y por lo menos algunos proyectos básicos. Primero que tenemos que decidir lo que queremos construir y qué funcionalidad que queremos implementar. Se dice que una imagen vale 1 mil palabras, así que empecemos con un simple bosquejo del reproductor de música.

Vue music player wireframe sketch

Hice este alambre para que pueda obtener una noción general de la interfaz de usuario que queremos construir. El siguiente paso es describir la funcionalidad que pretendemos aplicar.

Como John Johnson dice:

En primer lugar, resolver el problema. A continuación, escriba el código.

Usaremos como fuente de sabiduría, y nosotros hacemos la aplicación hacia fuera antes de empezar la codificación lo.

Componentes de la aplicación

Vue.js es un framework basado en componentes. Así que primero necesitamos dividir la aplicación en componentes individuales (cinco en nuestro caso, como se muestra en la figura anterior) y esbozar las características y funcionalidad para cada uno de ellos.

Barra de título

Este componente contendrá las siguientes partes:

  • un menú en el lado izquierdo
  • el nombre de la aplicación en el centro
  • tres iconos estáticos en el lado derecho

Panel de información

Este componente mostrará información básica sobre la pista actualmente jugada:

  • artista y título en el lado izquierdo de la pista
  • posición y la duración en el lado derecho de la pista actual

Barras de control

Este componente contendrá dos barras, que incluyen todos los controles necesarios para manipular las pistas de audio en listas de reproducción del jugador.

  • un deslizador de volumen con un icono de la izquierda (su aspecto cambiará según el nivel de volumen y cuando se haya silenciado el sonido) y porcentaje de volumen a la derecha
  • botones para jugar, pausar, detener y saltar las pistas.
  • la derecha dos botones: uno para repetir la pista actual y otro para barajar el orden de las pistas de juego
  • una búsqueda de la barra que muestra la posición de la pista actualmente jugado, con la habilidad de cambiar con un clic del ratón en la barra de

Panel lista de reproducción

Este componente contendrá la lista de reproducción de las pistas con las siguientes funciones:

  • Mostrar una pista con las propiedades de número, artista, título y duración adecuadas
  • seleccionar una pista en solo clic
  • reproducir una pista con doble clic

Barra de búsqueda

Este componente ofrece una funcionalidad de búsqueda en los casos cuando queremos buscar y reproducir pista particular.

Por supuesto, el esquema anterior no puede cubrir todos los detalles y matices, y esto es perfectamente bien. Por ahora, es suficiente para que consigamos una visión global del producto final. Te manejamos todos los detalles y eventuales dificultades durante el proceso de construcción.

Así que vamos a entrar en la diversión parte y escribir algo de código!

Para empezar

La página de introducción de Vuetify ofrece un montón de opciones para empezar. Vamos a usar una de las plantillas prefabricadas de Vue CLI llamadas Webpack Simple. Ejecute los siguientes comandos en el directorio que desea utilizar para este proyecto:

En primer lugar, instalar Vue CLI:

A continuación, crear la aplicación:

A continuación, vaya al directorio de la aplicación e instalar todas las dependencias:

Usaremos Howler.js (una biblioteca de audio de JavaScript) para manejar las piezas de audio el reproductor de música. Así que tenemos que incluir en el proyecto también. Ejecute el siguiente comando:

Y por último, ejecutar la aplicación:

La aplicación se abrirá en localhost:8080 en el navegador por defecto. Debería ver un esqueleto de aplicación simple de Vuetify.

Ajustar la plantilla

Para ajustarlo a nuestras necesidades, debemos limpiar la plantilla y retocarlo un poco. Renombrar el archivo App.vue a Player.vue, abrir, borrar todo dentro y agregue lo siguiente en su lugar:

Envolvemos nuestra aplicación de reproductor de música en el componente v-app, que es necesario para la aplicación funcione correctamente. También pasamos la propiedad dark, para aplicar el tema oscuro de Vuetify.

Ahora, abra el archivo main.js, borrar el contenido original y agregar lo siguiente:

También, abra el archivo index.html y cambiar el contenido de la <title> etiqueta para reproductor de música de Vue.

Ahora, en tu navegador, debería ver una página de oscurezca vacíela. Y listo. Estás listo para comenzar a crear.

Antes de iniciar la codificación, es bueno saber que Vuetify ofrece fragmentos de código y autocompletado para los editores de código principal: código de VS, átomo y Sublime. Para obtener los fragmentos de código, busque la extensión en su editor favorito (vuetify-vscode, o vuetify-atom o vuetify-sublime).

Construir la barra de título componentes

En el directorio src, crear una nueva carpeta de componentes. Entonces, en esa carpeta, crear el archivo PlayerTitleBar.vue con el siguiente contenido:

Aquí, utilizamos los siguientes componentes de Vuetify: barra de herramientas, menú, botón, icono, lista, cuadro de diálogo y tarjeta.

 Separamos el menú, el nombre y los iconos con el componente . Para mostrar u ocultar el cuadro de diálogo, crear el cuadro de diálogo: false datos de propiedades. Su valor cambiará cuando hacemos clic en el elemento de menú acerca de.

Ahora, en el archivo Player.vue, importar el componente de barra de título, registro en el objeto de los componentes y agregar en la plantilla.

Ahora, compruebe el resultado en tu navegador. Debería ver lo siguiente:

The player title bar

A repetir estos tres pasos para los otros cuatro componentes. Así que cuando en las siguientes secciones te diga importar, registrar y agregar un componente de la plantilla, debe seguir el mismo procedimiento descrito aquí.

Construir el componente de lista de reproducción

En el directorio raíz, crear una nueva carpeta de lista de reproducción y añadir los archivos de audio que desee reproducir. Los nombres de archivo deben escribirse con guiones bajos entre las palabras y una extensión .mp3 al final — por ejemplo, Remember_the_Way.mp3. Ahora, crear una matriz de pistas de audio dentro de objeto de datos de Player.vue:

Cada pista tiene título y artista, un howl objeto establecidas en null y una propiedad display asignada a true.

La propiedad display se utilizará cuando implemente la funcionalidad de búsqueda. Ahora se establece a true para todas las pistas, todas ellas son accesibles.

Howler envuelve un archivo de audio en un objeto de howl. Establecemos howl a null debido a lo pueblan dinámicamente en la creación de la instancia de Vue. Para ello, utilizamos el hook del ciclo de vida created que nos facilita Vue.

Esto establece un nuevo objeto de Howl para cada pista en la lista de reproducción.

Ahora, crear el componente de PlayerPlaylistPanel.vue y agregue este interior:

En primer lugar, pasamos a la lista de reproducción de apoyo desde el archivo Player.vue. A continuación, en la plantilla, pasamos por cada pista con el v-for Directiva y pantalla índice de la pista, seguido por título y artista de la pista y la duración de la pista de la extrema derecha. También utilizamos v-mostrar a la propiedad display. Pista será visible sólo si la pantalla es cierto.

Ahora, en el archivo Player.vue, importación, registro y añada el componente de lista de reproducción de la plantilla. Entonces, nos unen el apoyo lista de reproducción a la propiedad de datos de lista de reproducción como este: <player-playlist-panel :playlist="playlist"> </player-playlist-panel>.

Vamos a ver el resultado en el navegador:

The player playlist panel

Hay dos problemas aquí. En primer lugar, los números de las pistas no son correctas y segundo, duración de la pista se muestra en milisegundos, pero queremos que sea en minutos. Lo arreglaremos cada uno de estos temas mediante la creación de un filtro de formato.

En el archivo main.js, cree un filtro de números y un filtro de minutos, que será accesible a nivel mundial. A continuación, en PlayerPlaylistPanel.vue, los utilizamos como esta: {{index | numbers}} y {{track.howl.duration() | minutes}}.

Ahora, si revisas la aplicación, todo debe mostrar correctamente.

The player playlist panel with fixed numbers and minutes

Hacer pistas seleccionable

En el archivo Player.vue, agregue el selectedTrack: null propiedad de datos y enlazar con el componente de lista de reproducción (:selectedTrack = "selectedTrack"). Luego, pasamos el apoyo en el archivo PlayerPlaylistPanel.vue (selectedTrack: objeto).

También agregamos un oyente de evento de click a <v-list-tile-content @click="selectTrack(track)">y crear el método selectTrack():

Ahora, en Player.vue, agregue el evento selecttrack para el componente de lista de reproducción (@selecttrack = "selectTrack") y crear el método selectTrack():

Ahora, si vas a la lista de reproducción y haga clic en una pista, se seleccionarán. No podemos verlo, pero podemos probarlo en el Vue DevTools. En la siguiente pantalla, se selecciona la segunda pista:

The player playlist with selected track shown in DevTools

Fila y el estilo de la selección

El siguiente paso es hacer la selección visible. Para ello, a enlazar una clase que se colorean la pista seleccionada en color naranja y otra clase que hará que incluso las filas más oscuro para hacer las pistas más distinguible. Poner lo siguiente después de la Directiva de v-show:

También vamos a añadir otra clase, que mostrará una barra de desplazamiento cuando la lista es demasiado grande.

Añadimos las clases necesarias al final del archivo.

Y eso es todo. Ahora, la pista seleccionada se resalta en naranja.

The player playlist with selected track colored

Vamos a añadir que el doble click jugar funcionalidad al final de la sección siguiente.

Construir el componente de controles del reproductor

Vamos a crear los controles del reproductor ahora. Comenzaremos con el juego, pausa y botones de parada.

Añadir el juego, pausa y parada de botones

Crear el componente de PlayerControlsBars.vue y agregue este interior:

Aquí, utilizamos el componente de barra de herramientas de Vuetify.

Hay tres botones con registrados haga clic en eventos. Vamos a crear los métodos para ellos:

Ahora, en el archivo Player.vue, importar, registrar y agregar el componente de la plantilla. A continuación, registrar los detectores de eventos (@playtrack = "play", @pausetrack = "pausa", @stoptrack = "stop").

A continuación, cree la propiedad index: 0 , que tendrá lugar en el índice de la pista actual. A continuación, crear un currentTrack() computada:

Y ahora podemos empezar a crear el play, pausa y stop  métodos. Comenzaremos con el método play(), pero antes de que tenemos que crear el playing:false propiedad de datos falsos, que indicará si se reproduce la pista o no. Agregue el código siguiente para el método play():

El método tiene un índice como el parámetro que especifica la pista a reproducir. Primero, obtenemos el índice de la pista seleccionada. A continuación, realizamos algunas comprobaciones para determinar el valor del index. Si un índice se presenta como un argumento y es un número, entonces lo usamos. Si está seleccionada una pista, utilizamos el índice de la pista seleccionada. Si la pista seleccionada es diferente a la actual, utilizamos el método stop() para parar actual. Por último, si se pasa un argumento índice ni está seleccionada una pista, utilizamos el valor de la propiedad de datos de index.

A continuación, obtenemos el aullido (basado en el valor de índice) para la pista y comprobar si se está reproduciendo. Si es así, volvemos a nada; Si no es así, lo jugamos.

Finalmente, actualizamos las propiedades de datos selectedTrack, playing e index.

Ahora creamos los métodos pause() y stop().

Acabamos aquí, pausar o detener la pista actual y actualizar la propiedad de datos de juego.

También hagamos una salida de pista en doble clic.

Añadir @dblclick="playTrack()" a <v-list-tile-content> en la PlayerPlaylistPanel.vue y crear el método playTrack():

Registrar el oyente @playtrack = "play" en el archivo Player.vue y listo.

Añadir los botones anteriores y siguientes

Vamos a añadir ahora los botones anteriores y siguientes.

Crear el método skipTrack():

Registrar el detector de eventos (@skiptrack = "skip") en Player.vue.

Y crear el método skip():

En primer lugar comprobamos si la dirección es el siguiente. Si es así, aumentamos el índice de 1. Y si el índice es más grande que el último índice de la matriz, entonces empezamos otra vez de cero. Cuando la dirección es anterior, disminuir el índice de 1. Y si el índice es menor que cero, entonces el último índice. Al final, utilizamos el índice como argumento para el método de skipTo(). Se deja la pista actual y juega el siguiente o anterior.

Aquí es cómo se ve el reproductor con los botones:

The player play buttons

Agregar el control deslizante de volumen

Agregue lo siguiente antes de todos los botones:

Aquí, utilizamos el componente Vuetify de slider.

Añadir la propiedad volumen: 0,5  y luego crear el método updateVolume():

Aquí, utilizamos el objeto global de aulladores para ajustar el volumen a nivel mundial para todos aullidos.

También, tenemos que sincronizar el volumen inicial de aulladores, que por defecto se establece en 1, a la propiedad de volumen. Si no lo haces, el volumen mostrará 0.5 pero será inicialmente 1. Para ello, utilizaremos el gancho created otra vez:

Queremos ver el nivel de volumen en porcentaje a la derecha del control deslizante de volumen, para esto añadimos en la plantilla: {{this.volume * 100 + ' %'}}

Añadir el botón de silencio

Ahora, añadimos un icono de volumen antes de la barra deslizante.

El icono cambiará según los valores de las propiedades de muted y volumen.

Añadir el muted:false a la propiedad de datos falsos y crear el método toggleMute():

Utilizamos el objeto global de aulladores otra vez para establecer al silencio a nivel mundial, y luego cambiar el valor muted.

En la pantalla de abajo, usted puede ver cómo el cursor de volumen debe:

The player volume slider

Añadir el botón de repetición

Añadir lo siguiente después de todos los botones:

Añadir el lazo: false propiedad en Player.vue, enlazarlo :loop = "loop" y pasar el apoyo (bucle: Boolean) en PlayerControlsBars.vue.

Ahora, vamos a crear el método toggleLoop():

Ahora, en Player.vue, registro de eventos (@toggleloop = "toggleLoop") y crear el método toggleLoop():

En este punto, nos enfrentamos a un pequeño problema. Cuando una pista busca el final, simplemente se detiene. El jugador no se mueve a la siguiente pista, ni repetición de la pista actual. Para solucionar eso, tenemos que agregar lo siguiente a la función created después de la propiedad src:

Ahora, cuando loop está en on, se repetirá la pista actual. Si está apagado, el jugador se moverá a la siguiente pista.

Añadir el botón Shuffle

Añadir lo siguiente después de que el botón de repetición:

Añadir el shuffle: false propiedad en Player.vue, enlazarlo (:shuffle = "shuffle") y el apoyo (shuffle: Boolean) en PlayerControlsBars.vue.

Ahora, vamos a crear el método toggleShuffle();

Ahora, en Player.vue, registro de eventos (@toggleshuffle = "toggleShuffle") y crear el método toggleShuffle():

Ahora, se añadirá lo siguiente al método skip() índice = 0:

Aquí es cómo su aplicación sería ahora:

The player repeat and shuffle buttons

Añadir la barra de buscar

En primer lugar, en Player.vue, crear la seek: 0 propiedad. Entonces tendremos que ver la propiedad playing para actualizar la búsqueda.

Esto actualizará el valor de buscar cuatro veces por segundo.

Ahora, cree un progress() computada:

Enlazarlo (:progress = "progreso") en la plantilla.

Ahora, en PlayerControlsBars.vue, pase el pilar del progreso (progreso: número) y añada otra barra de herramientas por debajo de la que ya hemos creado:

Aquí, utilizamos el componente de progreso Vuetify.

Crear un trackProgress() computada, que conseguirá el progreso de la pista como un porcentaje.

Y ahora, crear el método updateSeek():

Aquí, tenemos el elemento de la barra de progreso, que utiliza la clase .progress-linear__bar. Encontré este con el navegador DevTools. A continuación, tenemos el ratón posición y la anchura de la barra. Entonces, obtenemos la posición del ratón haga clic en porcentaje.

En Player.vue, agregar y registrar el detector de eventos (@updateseek = "setSeek") y crear el método setSeek():

¡Y boom! Puede utilizar el ratón para cambiar la posición de la pista jugada.

Construir el componente del Panel de información

Crear el archivo PlayerInfoPanel.vue con el siguiente contenido:

Aquí, pasamos un trackInfo prop, que utilizamos para rellenar la información de pista en nuestro componente.

Ahora, en Player.vue, importar, registrar y agregar el componente de la plantilla.

A continuación, crear un getTrackInfo() computada:

A continuación, unen en la plantilla (:trackInfo = "getTrackInfo") y listo. Obtenemos información básica para la pista actualmente jugada, como se puede ver en la captura de pantalla abajo.

The player info panel

Construir la barra de búsqueda de componente

Crear el archivo PlayerSearchBar.vue con el siguiente contenido:

Creamos un campo de texto y añadir la propiedad clearable para mostrar un icono claro cuando escribimos algo.

Utilizando el v-model, nos unen a searchString, que es una cadena vacía inicialmente. Y añadir un listener de evento de entrada.

También pasamos el apoyo lista de reproducción, que utilizamos en el método searchPlaylist(). En este método, utilice la propiedad display y desactivar off para cada pista en el título o el artista no coincide con la cadena de búsqueda, y mantenerlo o encender on durante todos los partidos. Por último, si la cadena de búsqueda está vacío o igual a null, que ocurre cuando tenemos claro el campo con el botón borrar, encender la pantalla para todas las pistas.

Ahora, en Player.vue, importar, registrar y agregar el componente de la plantilla.

Enlazar la propiedad de lista de reproducción (:playlist = "playlist") y comprobar el funcionamiento. Aquí está cómo debe mirar en acción:

The player search bar test

Algunas Ideas de mejora

Como se puede ver, con un objetivo claro y una planificación adecuada, construyendo una aplicación Vue/Vuetify puede ser muy fácil y agradable. Ahora tiene un reproductor de música de trabajo que puede utilizar durante su descanso o tiempo de codificación. Por supuesto, siempre hay espacio para mejoras y adiciones, así que aquí están algunas ideas que puede probar a hacer que el jugador aún más rico:

  • soporte de múltiples listas de reproducción
  • capacidad de agregar o eliminar pistas de la lista de reproducción
  • soporte de arrastrar y colocar
  • capacidad para ordenar las pistas
  • visualización de audio

Conclusión

En este tutorial, vimos lo fácil y agradable puede ser construir una aplicación con Vue.js y con Vuetify.js en particular. Espero que hayas disfrutado este jugador del edificio tanto como lo hice. Estaré feliz de ver su propia versión mejorada del reproductor. Así que si creas uno, sólo caer un link de demo en los comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.