Crear aplicaciones con Vue.js es fácil, divertido y agradable. Puede construir una aplicación de trabajo con el mínimo esfuerzo. Para demostrarlo, hoy te mostraré lo fácil que es construir tu propio reproductor de música con todas las funciones. Para hacer las cosas aún más fáciles, usaremos Vuetify.js, una biblioteca de interfaz de usuario impulsada por Vue.js, que acelerará la construcción de la interfaz de usuario. Casi puedo sentir tu impaciencia, así que empecemos.
Puede encontrar el código fuente completo en el repositorio de GitHub. Y aquí está la demostración de trabajo. Para seguir este tutorial, debe estar familiarizado con los componentes de Vue, los componentes de un solo archivo de Vue y la sintaxis de ES2015..
Planificación de la aplicación
Cada creación comienza con una idea y al menos una planificación básica. Entonces, primero debemos decidir qué queremos construir y qué funcionalidad queremos implementar. Se dice que una imagen vale más que mil palabras, así que comencemos con un simple boceto del reproductor de música..
Hice esta estructura alámbrica para que pueda obtener una idea general de la interfaz de usuario que queremos crear. El siguiente paso es describir la funcionalidad que pretendemos implementar..
Como dice John Johnson:
Primero, resuelve el problema. Luego, escribe el código.
Usaremos eso como una fuente de sabiduría y planearemos la aplicación antes de comenzar a codificarla.
Componentes de la aplicación
Vue.js es un marco basado en componentes. Por lo tanto, primero debemos dividir la aplicación en componentes individuales (cinco en nuestro caso, como se muestra en el esquema anterior), y describir las características y la funcionalidad de 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 reproducida:
El artista y el título de la pista en el lado izquierdo.
Posición y duración de la pista actual en el lado derecho.
Barras de control
Este componente contendrá dos barras, que incluirán todos los controles necesarios para manipular las pistas de audio en la lista de reproducción del reproductor.
un control deslizante de volumen con un icono a la izquierda (su apariencia cambiará de acuerdo con el nivel de volumen y cuando se silencia el sonido), y el porcentaje de volumen a la derecha
Botones para reproducir, pausar, detener y saltar pistas.
dos botones en el extremo derecho: uno para repetir la pista actual y otro para mezclar el orden de reproducción de las pistas
una barra de búsqueda que muestra la posición de la pista actualmente reproducida, con la capacidad de cambiarla con un clic del ratón en la barra
Panel de lista de reproducción
Este componente contendrá la lista de reproducción de las pistas con la siguiente funcionalidad:
muestra una pista con el número, el artista, el título y las propiedades de duración correspondientes
seleccione una pista en un solo clic
reproducir una pista haciendo doble clic
Barra de búsqueda
Este componente ofrecerá la funcionalidad de búsqueda en los casos en que deseamos encontrar y reproducir pistas en particular..
Por supuesto, el esquema anterior no puede cubrir todos los detalles y matices, y esto está perfectamente bien. Por ahora, es suficiente para nosotros obtener una imagen general del producto final. Manejaremos todos los detalles y eventuales desafíos durante el proceso de construcción..
Así que entremos en la parte divertida y escribamos un código!
Empezando
La página de inicio rápido de Vuetify ofrece muchas opciones para comenzar. Usaremos una de las plantillas de CLI de Vue prefabricadas llamada Webpack Simple. Ejecute los siguientes comandos en el directorio que desea usar para este proyecto:
A continuación, vaya al directorio de la aplicación e instale todas las dependencias:
$ cd vue-music player $ npm install
Usaremos Howler.js (una biblioteca de audio de JavaScript) para manejar las partes de audio del reproductor de música. Así que tenemos que incluirlo también en el proyecto. Ejecuta el siguiente comando:
$ npm instalar --save howler
Y por último, ejecuta la aplicación:
$ npm ejecutar dev
La aplicación se abrirá en localhost: 8080 en su navegador predeterminado. Deberías ver un simple esqueleto de la aplicación Vuetify.
Ajustar la plantilla
Para ajustarlo a nuestras necesidades, necesitamos limpiar la plantilla y modificarla un poco. Renombrar App.vue archivo a Jugador.vue, ábrelo, borra todo lo que está dentro y agrega lo siguiente:
Envolvemos nuestra aplicación de reproductor de música en el v-app componente, que se requiere para que la aplicación funcione correctamente. También pasamos el oscuro prop, para aplicar el tema oscuro Vuetify.
Ahora, abre el main.js archivo, elimine el contenido original y agregue lo siguiente:
importar Vue desde 'vue' importar Vuetify desde 'vuetify' importar 'vuetify / dist / vuetify.css' importar Player desde './Player.vue' importar Howl, Howler desde 'howler' Vue.use (Vuetify) new Vue (el: '#app', render: h => h (Jugador))
Además, abre el index.html archivo y cambiar el contenido de la </code> etiqueta para <em>Vue Music Player</em>.</p><p>Ahora, en tu navegador, deberías ver una página oscura vacía. Y voilá. Estás listo para empezar a crear..<br></p><p>Antes de comenzar a codificar, es bueno saber que Vuetify ofrece fragmentos de código y autocompletar para los principales editores de código: VS Code, Atom y Sublime. Para obtener los fragmentos, busque la extensión en su editor favorito (<code>vuetify-vscode</code>, o <code>vuetify-atom</code>, o <code>vuetify-sublime</code>).</p><h2>Construir el componente de la barra de título</h2><p>En el <strong>src</strong> directorio, crea un nuevo <strong>componentes</strong> carpeta. Luego, en esa carpeta, crea el <strong>PlayerTitleBar.vue</strong> Archivo con el siguiente contenido: <br></p><pre><template> <v-system-bar window> <v-menu offset-y transition="slide-y-transition"> <v-btn flat small right slot="activator"> <v-icon>auriculares</v-icon> MENÚ </v-btn> <v-list> <v-list-tile @click="dialog = true"> <v-list-tile-title>Acerca de</v-list-tile-title> </v-list-tile> <v-dialog v-model="dialog" max-width="300"> <v-card> <v-card-title><h2>Vue Music Player</h2></v-card-title> <v-card-text>Versión 1.0.0</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn flat @click="dialog = false">DE ACUERDO</v-btn> </v-card-actions> </v-card> </v-dialog> </v-list> </v-menu> <v-spacer></v-spacer> VUE MUSIC PLAYER <v-spacer></v-spacer> <v-icon>retirar</v-icon> <v-icon>check_box_outline_blank</v-icon> <v-icon>cerrar</v-icon> </v-system-bar> </template> <script> export default data () return dialog: false , </script></pre><p>Aquí, usamos los siguientes componentes de Vuetify: barra de herramientas, menú, botón, icono, lista, diálogo y tarjeta. </p><p>Separamos el menú, el nombre y los iconos con la tecla <code><v-spacer></code> componente. Para mostrar u ocultar el diálogo, creamos el <code>diálogo: falso</code> propiedad de datos Su valor cambiará cuando hagamos clic en el <em>Acerca de</em> opción del menú.<br></p><p>Ahora en el <strong>Jugador.vue</strong> archivo, importe el componente de la barra de título, regístrelo en el objeto de componentes y agréguelo a la plantilla.<br></p><pre><template> <v-app dark> <v-content> <v-container> <player-title-bar></player-title-bar> // AÑADIR el componente en la plantilla </v-container> </v-content> </v-app> </template> <script> import PlayerTitleBar from './components/PlayerTitleBar.vue' // IMPORT the component export default components: PlayerTitleBar // REGISTER the component , data () return </script></pre><p>Ahora, comprueba el resultado en tu navegador. Deberías ver lo siguiente:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_3.png"><p>Repetiremos estos tres pasos para los otros cuatro componentes. Entonces, cuando en las siguientes secciones le pido que importe, registre y agregue un componente en la plantilla, debe seguir el mismo procedimiento que se describe aquí..</p><h2>Construir el componente de lista de reproducción<br></h2><p>En el directorio raíz, cree un nuevo <strong>lista de reproducción</strong> y agregue los archivos de audio que desea reproducir. Los nombres de los archivos deben escribirse con guiones bajos entre las palabras y un <strong>.mp3</strong> extensión al final, por ejemplo, <strong>Recordar_la_Vía.mp3</strong>. Ahora, crea una matriz de pistas de audio dentro <strong>Jugador.vue</strong>objeto de datos: <br></p><pre>lista de reproducción: [título: "Streets of Sant'Ivo", artista: "Ask Again", aullido: null, display: true, title: "Remember the Way", artista: "Ask Again", aullido: null, display: true,…]</pre><p>Cada pista tiene <code>título</code> y <code>artista</code> propiedades, una <code>aullido</code> objeto establecido en <code>nulo</code>, y un <code>monitor</code> propiedad establecida en <code>cierto</code>. </p><p>los <code>monitor</code> propiedad será utilizada cuando implementamos la funcionalidad de búsqueda. Ahora está configurado para <code>cierto</code> Para todas las pistas, para que todas sean visibles..</p><p>Howler envuelve un archivo de audio en una <code>aullido</code> objeto. Nosotros fijamos <code>aullido</code> a <code>nulo</code> porque lo rellenaremos dinámicamente en la creación de la instancia de Vue. Para ello, utilizamos los de Vue. <code>creado</code> gancho de ciclo de vida. </p><pre>created: function () this.playlist.forEach ((track) => let file = track.title.replace (/ \ s / g, "_") track.howl = new Howl (src: ['. /playlist/$file.mp3 ']))</pre><p>Esto establecerá un nuevo <code>Aullido</code> Objeto para cada pista en la lista de reproducción..</p><p>Ahora, crea el <strong>PlayerPlaylistPanel.vue</strong> componente y agregar esto dentro: </p><pre><template> <v-card> <v-list> <v-list-tile v-for="(track, index) in playlist" :key="track.title" v-show="track.display"> <v-list-tile-content> <v-list-tile-title>index track.artist - track.title</v-list-tile-title> </v-list-tile-content> <v-spacer></v-spacer> track.howl.duration () </v-list-tile> </v-list> </v-card> </template> <script> export default props: playlist: Array </script></pre><p>Primero, pasamos el pilar. <code>lista de reproducción</code> desde el <strong>Jugador.vue</strong> expediente. A continuación, en la plantilla, recorremos cada pista con la <code>v-para</code> Directriz y muestra el índice de la pista, seguido por el artista y el título de la pista, y la duración de la pista en el extremo derecho. También usamos <code>v-show</code> atado a la <code>monitor</code> propiedad. Una pista solo será visible si <code>monitor</code> es <code>cierto</code>.</p><p>Ahora en el <strong>Jugador.vue</strong> archivo, importamos, registramos y agregamos el componente de lista de reproducción en la plantilla. Entonces, nos unimos el <code>lista de reproducción</code> apoyo a la <code>lista de reproducción</code> propiedad de datos como esta: <code><player-playlist-panel :playlist="playlist"></player-playlist-panel></code>.</p><p>Veamos el resultado en el navegador:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_4.png"><p>Hay dos problemas aquí. Primero, los números de las pistas no son correctos, y segundo, la duración de la pista se muestra en milisegundos, pero queremos que sea en minutos. Arreglaremos cada uno de estos problemas creando un filtro de formato.. </p><p>En el <strong>main.js</strong> archivo, crea un <code>números</code> filtro y un <code>minutos</code> Filtro, que será accesible globalmente. Siguiente, en <strong>PlayerPlaylistPanel.vue</strong>, Los usamos así: <code>index | números</code> y <code>track.howl.duration () | minutos </code>.</p><p>Ahora, si compruebas la aplicación, todo debería mostrarse correctamente.. </p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_5.png"><h3>Hacer pistas seleccionables<br></h3><p>En el <strong>Jugador.vue</strong> archivo, agregue el <code>selectedTrack: null</code> propiedad de datos y vincularla al componente de lista de reproducción (<code>: selectedTrack = "selectedTrack"</code>). Luego, pasamos el puntal en el <strong>PlayerPlaylistPanel.vue</strong> expediente (<code>selectedTrack: Objeto</code>). </p><p>También agregamos un detector de eventos de clic a <code><v-list-tile-content @click="selectTrack(track)"></code> y luego crear el <code>selectTrack ()</code> método:</p><pre>métodos: selectTrack (track) this. $ emit ('selecttrack', track) </pre><p>Ahora, de vuelta en <code>Jugador.vue</code>, añade el <code>pista de selección</code> evento al componente de lista de reproducción (<code>@ selecttrack = "selectTrack"</code>) y crea el <code>selectTrack ()</code> método:</p><pre>selectTrack (track) this.selectedTrack = track</pre><p>Ahora, si vas a la lista de reproducción y haces clic en una pista, se seleccionará. No podemos verlo, pero podemos probarlo en Vue DevTools. En la siguiente captura de pantalla, se selecciona la segunda pista:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_6.png"><h4>Estilo de fila y selección</h4><p>El siguiente paso es hacer visible la selección. Para hacerlo, enlazaremos una clase que coloreará la pista seleccionada en naranja y otra clase que hará que las filas parciales se vean más oscuras para que las pistas sean más distinguibles. Coloque lo siguiente después de la <code>v-show</code> directiva:</p><pre>: class = "[selected: track === selectedTrack, even: index% 2 == 0]" </pre><p>También agregaremos otra clase, que mostrará una barra de desplazamiento cuando la lista sea demasiado grande..</p><pre><v-card :class="playlist"></pre><p>Añadimos las clases necesarias al final del archivo.. </p><pre><style scoped> .seleccionado fondo-color: naranja! importante; .even background-color: # 505050 .playlist overflow: auto </style></pre><p>Y eso es. Ahora, la pista seleccionada se resalta en naranja.</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_7.png"><p>Agregaremos la funcionalidad de doble clic al final de la siguiente sección..</p><h2>Construye el componente de controles del jugador<br></h2><p>Vamos a crear los controles del jugador ahora. Comenzaremos con los botones de reproducción, pausa y parada.. <br></p><h3>Agregar los botones Reproducir, Pausa y Detener<br></h3><p>Crear el <strong>PlayerControlsBars.vue</strong> componente y agregar esto dentro: <br></p><pre><template> <div> <v-toolbar flat height=90> <v-spacer></v-spacer> <v-btn outline fab small color="light-blue" @click="stopTrack"> <v-icon>detener</v-icon> </v-btn> <v-btn outline fab color="light-blue" @click="playTrack()"> <v-icon large>play_arrow</v-icon> </v-btn> <v-btn outline fab small color="light-blue" @click="pauseTrack"> <v-icon>pausa</v-icon> </v-btn> <v-spacer></v-spacer> </v-toolbar> </div> </template></pre><p>Aquí, usamos el componente de la barra de herramientas Vuetify.</p><p>Hay tres botones con escuchas de eventos de clics registrados. Vamos a crear los métodos para ellos: </p><pre>métodos: playTrack (index) this. $ emit ('playtrack', index), pauseTrack () this. $ emit ('pausetrack'), stopTrack () this. $ emit ('stoptrack') </pre><p>Ahora en el <strong>Jugador.vue</strong> archivo, importar, registrar y agregar el componente en la plantilla. Luego, registre a los oyentes del evento (<code>@ playtrack = "jugar"</code>, <code>@ pausetrack = "pausa"</code>, <code>@ stoptrack = "stop"</code>).</p><p>A continuación, crea el <code>índice: 0</code> Propiedad de datos, que contendrá el índice de la pista actual. Luego, crea un computado <code>currentTrack ()</code>: </p><pre>calculado: currentTrack () return this.playlist [this.index]</pre><p>Y ahora podemos empezar a crear el <code>jugar</code>, <code>pausa</code>, y <code>detener</code> metodos Comenzaremos con el <code>jugar()</code> método, pero antes de eso tenemos que crear el <code>jugando: falso</code> propiedad de datos, que indicará si la pista se está reproduciendo o no. Agregue el siguiente código para el <code>jugar()</code> método:</p><pre>play (index) deje selectedTrackIndex = this.playlist.findIndex (track => track === this.selectedTrack) if (typeof index === 'number') index = index else if (this.selectedTrack) if (this.selectedTrack! = this.currentTrack) this.stop () index = selectedTrackIndex else index = this.index let track = this.playlist [index] .howl if (track.playing ()) return else track.play () this.selectedTrack = this.playlist [index] this.playing = true this.index = index</pre><p>El método toma un índice como parámetro, que especifica la pista a reproducir. Primero, obtenemos el índice de la pista seleccionada. Luego, hacemos algunas verificaciones para determinar el valor del <code>índice</code>. Si un índice se proporciona como un argumento y es un número, entonces lo usamos. Si se selecciona una pista, usamos el índice de la pista seleccionada. Si la pista seleccionada es diferente de la actual, usamos el <code>detener()</code> Método para detener el actual. Finalmente, si no se pasa un argumento de índice ni se selecciona una pista, usamos el valor de <code>índice</code> propiedad de datos.</p><p>Luego, obtenemos el aullido (basado en el valor del índice) de la pista y verificamos si se está reproduciendo. Si lo es, no devolvemos nada; si no lo es, lo jugamos. </p><p>Finalmente, actualizamos el <code>Seleccionado</code>, <code>jugando</code> y <code>índice</code> propiedades de datos.</p><p>Vamos a crear ahora <code>pausa()</code> y <code>detener()</code> metodos. </p><pre>pause () this.currentTrack.howl.pause () this.playing = false, stop () this.currentTrack.howl.stop () this.playing = false</pre><p>Aquí, simplemente hacemos una pausa o paramos la pista actual y actualizamos la <code>jugando</code> propiedad de datos.</p><p>Hagamos también una pista para empezar a tocar haciendo doble clic..</p><p>Añadir <code>@ dblclick = "playTrack ()"</code> a <code><v-list-tile-content></code> en el <strong>PlayerPlaylistPanel.vue</strong> y crea el <code>playTrack ()</code> método:</p><pre>playTrack (índice) this. $ emit ('playtrack', índice)</pre><p>Registrar el oyente <code>@ playtrack = "jugar"</code> en el <strong>Jugador.vue</strong> archivar y listo.</p><h3>Añadir los botones Anterior y Siguiente</h3><p>Añadamos ahora los botones anterior y siguiente..<br></p><pre><v-btn outline fab small color="light-blue" @click="skipTrack('prev')"> <v-icon>skip_previous</v-icon> </v-btn> <!-- stop, play, and pause buttons are here --> <v-btn outline fab small color="light-blue" @click="skipTrack('next')"> <v-icon>omitir próximo</v-icon> </v-btn></pre><p>Crear el <code>skipTrack ()</code> método:</p><pre>skipTrack (direction) this. $ emit ('skiptrack', direction)</pre><p>Registrar el oyente del evento (<code>@ skiptrack = "saltar"</code>) en <strong>Jugador.vue</strong>.</p><p>Y crea el <code>omitir()</code> método:</p><pre>skip (direction) let index = 0 if (direction === "next") index = this.index + 1 if (index> = this.playlist.length) index = 0 else index = this. índice - 1 si < 0) index = this.playlist.length - 1 this.skipTo(index) , skipTo (index) if (this.currentTrack) this.currentTrack.howl.stop() this.play(index) </pre><p>Primero comprobamos si la dirección es <code>siguiente</code>. Si es así, incrementamos el índice en 1. Y si el índice se vuelve más grande que el último índice en la matriz, entonces comenzamos nuevamente desde cero. Cuando la direccion es <code>prev</code>, disminuimos el índice en 1. Y si el índice es menor que cero, entonces usamos el último índice. Al final, utilizamos el <code>índice</code> como un argumento para el <code>pasemos a()</code> método. Detiene la pista actual y reproduce la siguiente o la anterior..</p><p>Así es como se ve el jugador con los botones:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_8.png"><h3>Añadir el control deslizante de volumen<br></h3><p>Agregue lo siguiente antes de todos los botones:<br></p><pre><v-slider v-model="volume" @input="updateVolume(volume)" max="1" step="0.1"></v-slider></pre><p>Aquí, usamos el componente deslizante Vuetify.</p><p>Añade el <code>volumen: 0.5</code> propiedad de datos, y luego crear el <code>updateVolume ()</code> método:</p><pre>updateVolume (volumen) Howler.volume (volumen)</pre><p>Aquí, usamos el objeto global Howler para configurar el volumen globalmente para todos los aullidos.</p><p>Además, debemos sincronizar el volumen de Howler inicial, que por defecto está establecido en 1, con el <code>volumen</code> propiedad. Si no lo haces, el volumen mostrará 0.5 pero inicialmente será 1. Para ello, utilizaremos el <code>creado</code> enganchar de nuevo:</p><pre>created: function () Howler.volume (this.volume)</pre><p>Queremos ver el nivel de volumen como un porcentaje a la derecha del control deslizante de volumen, por lo que agregamos esto en la plantilla: <code>this.volume * 100 + '%'</code> </p><h3>Añadir el botón de silencio </h3><p>Ahora, agregamos un icono de volumen antes del control deslizante. <br></p><pre><v-btn flat icon @click="toggleMute"> <template v-if="!this.muted"> <v-icon v-if="this.volume >= 0.5 "> volume_up</v-icon> <v-icon v-else-if="this.volume > 0 "> volume_down</v-icon> <v-icon v-else>volume_mute</v-icon> </template> <v-icon v-show="this.muted">volume_off</v-icon> </v-btn></pre><p>El icono cambiará de acuerdo a los valores de la <code>volumen</code> y <code>apagado</code> propiedades.</p><p>Añade el <code>silenciado: falso</code> propiedad de datos y crear el <code>toggleMute ()</code> método:</p><pre>toggleMute () Howler.mute (! this.muted) this.muted =! this.muted</pre><p>Usamos el objeto global Howler nuevamente para configurar el silencio globalmente, y luego alternamos el <code>apagado</code> valor. </p><p>En la captura de pantalla a continuación, puede ver cómo debe verse el control deslizante de volumen:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_9.png"><h3>Añadir el botón de repetición</h3><p>Agregue lo siguiente después de todos los botones:</p><pre><v-btn flat icon @click="toggleLoop"> <v-icon color="light-blue" v-if="this.loop">repetir</v-icon> <v-icon color="blue-grey" v-else>repetir</v-icon> </v-btn></pre><p>Añade el <code>bucle: falso</code> propiedad en <strong>Jugador.vue</strong>, atarlo <code>: loop = "loop"</code> y pasar el apoyo (<code>bucle: booleano</code>) en <strong>PlayerControlsBars.vue</strong>. </p><p>Ahora, vamos a crear el <code>toggleLoop ()</code> método:</p><pre>toggleLoop () this. $ emit ('toggleloop',! this.loop)</pre><p>Ahora, de vuelta en <strong>Jugador.vue</strong>, registrar el oyente del evento (<code>@ toggleloop = "toggleLoop"</code>) y crea el <code>toggleLoop ()</code> método:</p><pre>toggleLoop (value) this.loop = value</pre><p>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 repite la pista actual. Para arreglar eso, necesitamos agregar lo siguiente a la <code>creado</code> función después de la <code>src</code> propiedad:</p><pre>onend: () => if (this.loop) this.play (this.index) else this.skip ('next')</pre><p>Ahora, cuando el <code>lazo</code> está encendido, la pista actual se repetirá. Si está apagado, el jugador se moverá en la siguiente pista.</p><h3>Añadir el botón Aleatorio</h3><p>Agregue lo siguiente después del botón de repetición:</p><pre><v-btn flat icon @click="toggleShuffle"> <v-icon color="light-blue" v-if="this.shuffle">barajar</v-icon> <v-icon color="blue-grey" v-else>barajar</v-icon> </v-btn></pre><p>Añade el <code>barajar: falso</code> propiedad en <code>Jugador.vue</code>, atarlo<code>: shuffle = "shuffle"</code>), y pasar el apoyo (<code>barajar: booleano</code>) en <code>PlayerControlsBars.vue</code>. </p><p>Ahora, vamos a crear el <code>toggleShuffle ()</code> método;</p><pre>toggleShuffle () this. $ emit ('toggleshuffle',! this.shuffle)</pre><p>Ahora, de vuelta en <strong>Jugador.vue</strong>, registrar el oyente del evento (<code>@ toggleshuffle = "toggleShuffle"</code>) y crea el <code>toggleShuffle ()</code> método:</p><pre>toggleShuffle (value) this.shuffle = value</pre><p>Ahora, agregue lo siguiente a la <code>omitir()</code> método después <code>índice = 0</code>:</p><pre>lastIndex = this.playlist.length - 1 if (this.shuffle) index = Math.round (Math.random () * lastIndex) while (index === this.index) index = Math.round (Math.random () * lastIndex) else if (direction === "next") … </pre><p>Así es como debería verse tu aplicación ahora:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_10.png"><h3>Añadir la barra de búsqueda</h3><p>Primero en <strong>Jugador.vue</strong>, crear el <code>buscar: 0</code> propiedad. Entonces tendremos que ver el <code>jugando</code> Propiedad para actualizar la búsqueda..</p><pre>watch: playing (playing) this.seek = this.currentTrack.howl.seek () permite a updateSeek if (playing) updateSeek = setInterval (() => this.seek = this.currentTrack.howl.seek () , 250) else clearInterval (updateSeek),</pre><p>Esto actualizará el valor de búsqueda cuatro veces por segundo..</p><p>Ahora, crea un computado <code>Progreso()</code>:</p><pre>progress () if (this.currentTrack.howl.duration () === 0) return 0 return this.seek / this.currentTrack.howl.duration ()</pre><p>Enlazarlo<code>: progress = "progress"</code>) en la plantilla. </p><p>Ahora en <strong>PlayerControlsBars.vue</strong>, pasa el <code>Progreso</code> prop (<code>progreso: numero</code>) y agrega otra barra de herramientas debajo de la que ya hemos creado:</p><pre><v-toolbar flat> <v-progress-linear v-model="trackProgress" @click="updateSeek($event)"></v-progress-linear> </v-toolbar></pre><p>Aquí, usamos el componente de progreso Vuetify.</p><p>Crear un computado <code>sigue el progreso()</code>, Lo que conseguirá el progreso de la pista como porcentaje..</p><pre>calculado: trackProgress () return this.progress * 100,</pre><p>Y ahora, crea el <code>updateSeek ()</code> método: </p><pre>updateSeek (event) let el = document.querySelector (". progress-linear__bar"), mousePos = event.offsetX, elWidth = el.clientWidth, porcentajes = (mousePos / elWidth) * 100 este. $ emit ('updateseek', porcentajes) </pre><p>Aquí, obtenemos el elemento de la barra de progreso, que utiliza el <code>.progress-linear__bar</code> clase. Encontré esto con el navegador DevTools. A continuación, obtenemos la posición del ratón y el ancho de la barra. Entonces, obtenemos la posición del clic del ratón como un porcentaje.</p><p>De nuevo en <strong>Jugador.vue</strong>, añadir y registrar el detector de eventos (<code>@ updateseek = "setSeek"</code>) y crea el <code>setSeek ()</code> método:</p><pre>setSeek (porcentajes) let track = this.currentTrack.howl if (track.playing ()) track.seek ((track.duration () / 100) * porcentajes)</pre><p>¡Y bum! Puede usar el mouse para cambiar la posición de la pista reproducida.</p><h2>Construir el componente del panel de información</h2><p>Crear el <strong>PlayerInfoPanel.vue</strong> Archivo con el siguiente contenido:<br></p><pre><template> <v-card> <v-card-title> <h2>trackInfo.artist - trackInfo.title</h2> <v-spacer></v-spacer> <h3>trackInfo.seek | minutos / trackInfo.duration | minutos</h3> </v-card-title> </v-card> </template> <script> export default props: trackInfo: Object , </script></pre><p>Aquí, pasamos un pilar. <code>trackInfo</code>, que utilizamos para rellenar la información de la pista en nuestro componente.</p><p>Ahora, de vuelta en <strong>Jugador.vue</strong>, Importar, registrar y agregar el componente en la plantilla.. </p><p>Luego, crea un computado <code>getTrackInfo ()</code>: </p><pre>getTrackInfo () let artist = this.currentTrack.artist, title = this.currentTrack.title, seek = this.seek, duration = this.currentTrack.howl.duration () return artist, title, seek, duration,</pre><p>A continuación, lo atamos en la plantilla (<code>: trackInfo = "getTrackInfo"</code>) y voilá. Obtenemos información básica sobre la pista que se reproduce actualmente, como se puede ver en la captura de pantalla a continuación..</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_11.png"><h2>Construir el componente de la barra de búsqueda</h2><p>Crear el <strong>PlayerSearchBar.vue</strong> Archivo con el siguiente contenido: <br></p><pre><template> <v-toolbar flat> <v-text-field clearable prepend-icon="search" placeholder="Quick search" v-model="searchString" @input="searchPlaylist"> </v-text-field> <v-spacer></v-spacer> </v-toolbar> </template> <script> export default props: playlist: Array , data () return searchString: "", , methods: searchPlaylist () this.playlist.forEach((track) => if (this.searchString) if (!track.title.toLowerCase().includes(this.searchString.toLowerCase()) && !track.artist.toLowerCase().includes(this.searchString.toLowerCase())) track.display = false else track.display = true else if (this.searchString === "" || this.searchString === null) track.display = true ) , </script></pre><p>Creamos un campo de texto y añadimos el <code>desgarrable</code> prop para mostrar un icono de limpieza cuando escribimos algo.</p><p>Mediante el uso <code>modelo v</code>, lo atamos a la <code>cadena de búsqueda</code>, que es una cadena vacía inicialmente. Y añadimos un oyente de entrada de eventos..</p><p>También pasamos el <code>lista de reproducción</code> prop, que utilizamos en el <code>searchPlaylist ()</code> método. En este método, utilizamos el <code>monitor</code> propiedad y gire <code>apagado</code> para cada pista donde el título o el artista no coinciden con la cadena de búsqueda, y lo mantenemos o lo giramos <code>en</code> para todos los partidos. Finalmente, si la cadena de búsqueda está vacía o es igual a <code>nulo</code>, lo que sucede cuando despejamos el campo con el botón de borrar, giramos <code>en</code> la <code>monitor</code> para todas las pistas.</p><p>Ahora, de vuelta en <strong>Jugador.vue</strong>, Importar, registrar y agregar el componente en la plantilla.. </p><p>Enlazar la propiedad de la lista de reproducción (<code>: playlist = "playlist"</code>) y comprueba la funcionalidad. Aquí es cómo debe verse en acción:</p><img src="//accentsconagua.com/img/images_1/build-a-music-player-with-vuetify_12.png"><h2>Algunas ideas de mejora</h2><p>Como puede ver, con un objetivo claro y una planificación adecuada, construir una aplicación Vue / Vuetify puede ser realmente fácil y agradable. Ahora tiene un reproductor de música que puede usar durante su tiempo de relajación o codificación. Por supuesto, siempre hay espacio para nuevas mejoras y adiciones, así que aquí hay algunas ideas que puede probar para hacer que el jugador sea aún más rico en características: </p><ul> <li>soporte de lista de reproducción múltiple</li> <li>Posibilidad de añadir o eliminar pistas de la lista de reproducción.</li> <li>soporte para arrastrar y soltar</li> <li>capacidad de ordenar las pistas</li> <li>visualización de audio </li> </ul><h2>Conclusión</h2><p>En este tutorial, vimos lo fácil y divertido que puede ser crear una aplicación con Vue.js, y con Vuetify.js en particular. Espero que hayas disfrutado construyendo este jugador tanto como yo. Estaré encantado de ver tu propia versión mejorada del reproductor. Así que si creas uno, solo suelta un enlace de demostración en los comentarios!</p
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Código</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/gamedevelopment/build-a-neon-asteroids-shoot-em-up-from-scratch.html">Construye un Neon Asteroids Shoot-'Em-Up From Scratch</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/build-a-neon-asteroids-shoot-em-up-from-scratch.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/build-a-music-app-with-an-android-app-template.html">Crear una aplicación de música con una plantilla de aplicación de Android</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_3/build-a-music-app-with-an-android-app-template_15.jpg');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Buscar...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Lo que vas a crear
Accentsconagua