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

Создание музыкального плеера при помощи Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Final product image
What You'll Be Creating

Создавать приложения с помощью Vue.js просто, весело и приятно. Он позволяет вам создать рабочее приложение за счет минимальных усилий. Чтобы это подтвердить, сегодня я покажу вам, насколько это легко – создать свой собственный полнофункциональный музыкальный плеер. Чтобы нам было еще проще, мы воспользуемся Vuetify.js, библиотекой UI (* пользовательский интерфейс. Здесь и далее примеч. пер.), работающей на основе Vue.js, для ускорения создания UI. Я почти что чувствую ваше желание взяться за дело, так что поехали.

С полным исходным кодом вы можете ознакомиться в этом репозитории GitHub. А тут располагается рабочая демоверсия. Предполагается, что вы знакомы с компонентами Vue, однофайловыми компонентами Vue и синтаксисом ES2015 (* спецификация ES6).

Планируем приложение

Создание чего угодно начинается с идеи и как минимум некоторого базового планирования. Так что для начала нам необходимо определиться с тем, что мы хотим создать и какие функциональные возможности реализовать. Говорят, что лучше один раз увидеть, чем сто раз услышать, поэтому давайте для начала рассмотрим базовый набросок нашего музыкального плеера.

Vue music player wireframe sketch

Я создал этот каркас, чтобы вы могли получить базовое представление о UI, который хотим создать. Следующий шаг – описание функциональных возможностей, которые собираемся реализовать.

Как сказал John Johnson (* опытный разработчик, специализирующийся в области платформы Windows Server):

First, solve the problem. Then, write the code (* Сначала реши проблему. Затем пиши код).

Мы воспользуемся этим мудрым советом и спланируем наше приложение перед написанием его кода.

Компоненты приложения

Vue.js – фреймворк, работающий на основе компонентов. Так что для начала нам нужно поделить наше приложение на отдельные компоненты (в нашем случае их пять, как показано на наброске выше) и наметить в общих чертах характеристики и функциональные возможности каждого компонента.

Строка заголовка

В этом компоненте будут содержаться следующие части:

  • меню слева
  • имя приложения в центре
  • три статические иконки справа

Информационная панель

В этом компоненте будет отображаться базовая информация о треке, проигрываемом в текущий момент:

  • название исполнителя трека и его заголовок слева
  • позиция текущего трека (* сколько минут проиграно) и его продолжительность справа

Панель с управляющими элементами

В этом компоненте будут находиться две панели, в которых будут содержаться все управляющие элементы, необходимые для управления звуковыми дорожками плей-листа (* список аудио-и/или видеофайлов для воспроизведения) плеера:

  • регулятор уровня громкости с иконкой слева (ее вид будет меняться в зависимости от уровня громкости и при приглушении звука) и уровень громкости в процентах справа
  • кнопки для проигрывания, паузы, остановки и пропуска треков
  • две кнопки у края справа: одна для повторного проигрывания трека и одна для перетасовки порядка проигрывания треков
  • панель для позиционирования проигрываемого в данный момент трека с возможностью изменения позиции при помощи нажатия мыши по ней

Панель с плей-листом

В этом компоненте будет содержаться плей-лист треков со следующими возможностями:

  • отображение трека с соответствующим номером, именем исполнителя, названием и продолжительностью
  • выбора трека при одиночном нажатии мыши
  • проигрывания трека при двойном нажатии мыши

Поисковая строка

Этот компонент будет предоставлять функциональную возможность поиска трека, если нам необходимо будет найти и проиграть определенный трек(и).

Конечно же, в вышеприведенном наброске не могут быть учтены все детали и нюансы, и это вполне нормально. Пока что нам достаточно получить общее представление о конечном продукте. Мы разберемся со всеми деталями и возможными трудностями в процессе создания плеера.

Так что давайте перейдем к интересной части и начнем писать код!

Начало работы

Страница Vuetify для быстрого старта предлагает вам множество вариантов для начала работы с этой библиотекой. Мы будем использовать один из заранее подготовленных шаблонов Vue CLI (* Vue CLI – инструмент для базовой настройки рабочего места в экосистеме Vue. Благодаря ему гарантируется, что настройки по умолчанию инструментов для сборки проекта имеют целесообразные значения, так что вы можете сосредоточиться на написании кода вашего приложения, а не тратить дни на конфигурирование системы. Vuetify предлагает 8 заранее подготовленных шаблонов Vue CLI для ускорение процесса разработки вашего будущего проекта) под названием Webpack Simple (* этот шаблон предназначен для тех, кто уже знаком с Vue/Webpack. Он содержит очень постой набор настроек webpack и предназначен для создания базовых приложений. Это заранее заданная конфигурация комплекса Vue 2.0 + Vuetify + Webpack & vue-loader (загрузчик для webpack, который способен транформировать компоненты Vue, написанные по определенным правилам, в простой модуль JavaScript. При помощи загрузчиков мы можем научить webpack транформировать все типы файлов согласно определенным правилам). Webpack –  сборщик пакетов для JavaScript с открытым исходным кодом), за счет которого осуществляется укомплектование ресурсов JavaScript и других ресурсов для браузера (он работает подобно grunt или gulp)). Выполните следующие команды в папке, которую хотите использовать для этого проекта:

Для начала устанавливаем Vue CLI:

Далее создаем приложение:

Далее переходим в папку приложения и устанавливаем все зависимости:

Мы будем использовать Howler.js (библиотека JavaScript для работы с аудио) для реализации частей музыкального плеера, отвечающих за воспроизведение аудиоматериала. Так что нам необходимо подключить ее к нашему проекту тоже: Выполните следующую команду:

И, наконец, запустите приложение:

Оно откроется по адресу localhost:8080 в вашем браузере по умолчанию. Вы должны будете увидеть основу приложения Vuetify.

Подгоняем наш шаблон

Для того чтобы шаблон соответствовал нашим требованиям, нам необходимо очистить его и внести некоторые изменения: Переименуйте файл App.vue на Player.vue, откройте его, удалите все его содержимое и добавьте вместо него следующее:

Мы оборачиваем наш музыкальный плеер в компонент v-app, который необходим для корректной работы приложения. Также мы передаем проп (* пропы – пользовательские атрибуты, которые вы можете зарегистрировать для компонента. При передаче значения этому атрибуту оно становится свойством образца того компонента) dark для применения темы Vuetify dark.

Теперь откройте файл main.js, удалите изначальное содержимое и добавьте следующее:

Также откройте файл index.html и измените содержимое тега <title> на «Vue Music Player».

Теперь вы должны будете увидеть в вашем браузере пустую темную страницу. И вуаля. Вы готовы к созданию плеера.

Перед написанием кода полезно знать, что Vuetify предлагает фрагменты кода и возможность автозаполнения для основных редакторов кода: VS Code, Atom и Sublime. Для получения фрагментов поищите расширение в вашем любимом редакторе (vuetify-vscode, vuetify-atom или  vuetify-sublime).

Создаем компонент со строкой заголовка

В папке src создайте новую папку components. Затем в этой папке создайте файл PlayerTitleBar.vue со следующим содержимым:

Здесь мы используем следующие компоненты Vuetify: toolbar, menu, button, icon, list, dialog и card.

Мы отделяем меню, имя и иконки при помощи компонента <v-spacer>. Для сворачивания или разворачивания диалога мы добавляем свойство dialog со значением false к объекту, возвращаемому функцией data. Его значение будет меняться при нажатии элемента About меню.

Теперь в файле Player.vue импортируйте компонент строки заголовка, зарегистрируйте его в объекте components и добавьте его в шаблоне.

Далее проверьте результат в вашем браузере. Вы должны увидеть следующее:

The player title bar

Мы повторно выполним эти три шага и для остальных четырех компонентов. Так что когда в следующих разделах я говорю вам импортировать, зарегистрировать или добавить компонент в шаблон, вы должны выполнить ту же последовательность операций, как и здесь.

Создаем компонент с плей-листом

В корневой папке создайте новую папку playlist и добавьте туда аудиофайлы, которые хотите воспроизвести. Имена файлов должны быть написаны с использованием символа подчеркивания между словами и расширения .mp3 в конце, например Remember_the_Way.mp3. Теперь создайте массив с аудио-треками внутри объекта, возвращаемого функцией data:

У каждого трека имеются свойства title и artist, объект howl со значением null и свойство display со значением true.

Свойство display будет использоваться при реализации возможности поиска треков. Сейчас для всех треков в качестве значения этого свойства установлено true, так что все они отображаются.

Howler оборачивает аудио-файл в объект howl. Мы устанавливаем в качестве значения howl null, поскольку мы заполним его динамично при создании экземпляра Vue. Чтобы это стало возможным мы используем зацепку жизненного цикла created Vue (* каждый экземпляр проходит серию шагов инициализации при создании. Также при этом запускаются зацепки – место в программе, куда можно подсоединить дополнительный код (обычно для расширения её функциональных возможностей), за счет которых у пользователя появляется возможность добавления своего собственного кода на определенных стадиях).

В результате для каждого трека плей-листа будет задан новый объект Howl.

Теперь создайте компонент PlayerPlaylistPanel.vue и добавьте в него следующий код:

Вначале мы передаем проп playlist из файла Player.vue. Далее в шаблоне мы пробегаемся по всем трекам при помощи директивы v-for и отображаем номер трека, за которым следует имя артиста, название трека и продолжительность трека с самого края справа. Также мы используем директиву v-show, привязанную к свойству display. Трек будет отображаться только в том случае, если в качестве значения display установлено true.

Теперь в файле Player.vue мы импортируем, регистрируем и добавляем компонент плей-листа в шаблоне. Далее мы привязываем проп playlist к свойству playlist объекта, возвращаемого функцией data, следующим образом: <player-playlist-panel :playlist="playlist"></player-playlist-panel>.

Давайте посмотрим в браузере, что у нас получилось.

The player playlist panel

У нас здесь имеется две проблемы. Во-первых, номера треков отображаются некорректно, и во-вторых, продолжительность трека выражена в миллисекундах, а не в секундах, как мы хотим. Мы разрешим эти проблемы путем создания фильтров для форматирования.

В файле main.js создайте фильтры numbers и minutes, к которым будет глобальный доступ. Далее мы используем их в PlayerPlaylistPanel.vue следующий образом: {{ index | numbers }} и {{ track.howl.duration() | minutes }}.

Теперь, если вы проверите приложение, то все должно отображаться корректно.

The player playlist panel with fixed numbers and minutes

Добавляем возможность выбора треков

В файле Player.vue добавьте свойство selectedTrack: null к объекту, возвращаемому функцией data, и привяжите его к компоненту с плей-листом (:selectedTrack="selectedTrack"). Далее передаем проп в файл PlayerPlaylistPanel.vue (selectedTrack: Object).

Также мы добавляем обработчик события click для <v-list-tile-content @click="selectTrack(track)"> и затем создаем метод selectTrack():

Теперь возвращаемся к Player.vue, добавляем обработчик события selecttrack для компонента с плей-листом (@selecttrack="selectTrack") и создаем метод selectTrack():

Теперь, если вы перейдете к плей-листу и нажмете по треку, то он будет выбран. Мы не можем этого увидеть, однако мы можем в этом убедиться за счет использования DevTools. На следующем скриншоте показано, что выбран второй трек:

The player playlist with selected track shown in DevTools

Добавляем стилевое оформление для выбранного трека и строк

Далее нам необходимо сделать выделенный трек заметным. Для этого мы добавим класс, за счет которого выбранный трек будет окрашен в оранжевый, и еще один, за счет которого  четные строки станут более темными, благодаря чему треки станут более различимыми. Вставьте следующий код после директивы v-show:

Также мы добавим еще один класс, за счет которого будет отображена полоса прокрутки (* управляющая линейка с бегунком (горизонтальная или вертикальная) вдоль границы экрана), если список становится слишком длинным.

Мы добавляем необходимые классы в конце файла.

Вот и все! Теперь выбранный трек подсвечивается оранжевым.

The player playlist with selected track colored

Мы добавим функциональную возможность проигрывания трека при двойном нажатии в конце следующего раздела.

Создаем компонент с управляющими элементами плеера

Давайте теперь создадим управляющие элементы плеера. Мы начнем с добавления кнопок Play, Pause и Stop.

Добавляем кнопки Play, Pause и Stop

Создайте компонент PlayerControlsBars.vue и добавьте в него следующий код:

Здесь мы используем компонент Vuetify toolbar.

У нас имеется три кнопки с зарегистрированными обработчиками события click. Давайте создадим методы для них:

Теперь в файле Player.vue импортируйте, зарегистрируйте и добавьте компонент плей-листа в шаблоне. Далее зарегистрируйте обработчики событий (@playtrack="play", @pausetrack="pause", @stoptrack="stop").

Далее создаем свойство index со значеием 0 для объекта, возвращаемого функцией data, в котором будет храниться номер текущего трека. Затем создайте метод currentTrack() в свойстве computed (* используется при реализации какой-либо сложной логики).

И теперь мы можем приступить к созданию методов play, pause и stop. Начнем с метода play(), однако вначале нам необходимо создать свойство playing со значением false объекта, возвращаемого функцией data, которое нам подскажет, проигрывается трек или нет. Добавьте следующий код для метода play():

Метод принимает в качестве параметра номер трека, благодаря которому указывается, какой трек необходимо проиграть. Для начала мы получаем номер выбранного трека. Далее мы выполняем определенные проверки, чтобы определить значение index. Если номер трека передан в качестве аргумента и является числом, то мы используем его. Если трек выбран, то мы используем номер выбранного трека. Если выбранный трек отличается от того, что проигрывается в текущий момент, то мы используем метод stop() для остановки текущего. Наконец, если и аргумент index не передан и трек не выбран, то мы используем значение свойства index объекта, возвращаемого функцией data.

Далее мы получаем объект howl (на основании значения index) для трека и проверяем, проигрывается ли он. Если да, то мы ничего не возвращаем; если нет, то мы его проигрываем.

Наконец, мы обновляем свойства selectedTrack, playing и index  объекта, возвращаемого функцией data.

Теперь давайте создадим методы pause() и stop().

Здесь мы всего лишь ставим на паузу или останавливаем трек, проигрываемый в данный момент, и обновляем свойство playing.

Давайте также добавим возможность запуска трека при двойном нажатии мыши.

Добавьте @dblclick="playTrack()" к <v-list-tile-content> в PlayerPlaylistPanel.vue и создайте метод playTrack():

Зарегистрируйте обработчики @playtrack="play" в файле Player.vue и вуаля.

Добавляем кнопки Previous и Next

Теперь давайте добавим кнопки для перехода к следующему и предыдущему трекам.

Создаем метод skipTrack():

Регистрируем обработчик события (@skiptrack="skip") в Player.vue.

И создаем метод skip():

Вначале мы проверяем, является ли значением direction next. Если да, то мы увеличиваем значение index на 1. И если значение index становится больше, чем последнее в массиве, то мы задаем в качестве значения index 0. Если значением direction является prev, то мы уменьшаем значение index на 1. И если значение index становится меньше 0, то мы используем последний номер. В конце мы используем index в качестве аргумента метода skipTo(). Благодаря нему останавливается текущий трек и проигрывается следующий или предыдущий.

Вот как выглядит плеер с этими кнопками.

The player play buttons

Добавляем регулятор уровня громкости

Добавьте следующий код перед всеми кнопками:

Здесь мы используем компонент Vuetify slider.

Добавьте свойство volume со значением 0.5 к объекту, возвращаемому функцией data, и затем создайте метод updateVolume():

Здесь мы используем глобальный объект Howler для того, чтобы задать уровень громкости глобально для всех объектов howl.

Также нам необходимо синхронизировать изначальный уровень громкости Howler, значение которого по умолчанию составляет 1, со значением свойства volume. Если вы этого не сделаете, то изначально уровень громкости будет показывать значение 0.5, но будет иметь значение 1. Для этого мы воспользуемся зацепкой created снова:

Нам необходимо, чтобы уровень громкости был выражен в процентах справа от регулятора уровня громкости, поэтому мы добавляем следующий код в шаблоне {{this.volume * 100 + '%'}}.

Добавляем кнопку Mute (* кнопка приглушения звука)

Теперь мы добавляем иконку громкости перед слайдером.

Она будет меняться в зависимости от значений свойств volume и muted.

Добавьте свойство muted со значением false к объекту, возвращаемому функцией data, и создайте метод toggleMute():

Мы снова используем глобальный объект Howler для того, чтобы задать приглушение звука глобально, и затем мы меняем значение свойства muted.

Вы можете увидеть, как должен выглядеть регулятор уровня громкости, на скриншоте ниже:

The player volume slider

Добавляем кнопку Repeat (* повторить)

Добавьте следующий код после всех кнопок:

Добавьте свойство loop со значением false в Player.vue, привяжите его (:loop="loop") и добавьте проп (loop: Boolean) в PlayerControlsBars.vue.

Теперь давайте создадим метод toggleLoop():

Теперь возвращаемся к Player.vue, регистрируем обработчик события (@toggleloop="toggleLoop") и создаем метод toggleLoop():

На данном этапе мы столкнулись с незначительной проблемой. По достижении конца трек просто останавливается. Плеер и не переходит к воспроизведению следующего трека, и не проигрывает текущий трек заново. Чтобы это поправить, нам необходимо добавить следующий код к функции created после свойства src:

Теперь, если значением loop является true, то текущий трек будет проигран заново. Если же loop имеет обратное значение, то плеер перейдет к воспроизведению следующего трека.

Добавляем кнопку Shuffle (* для перетасовки порядка проигрывания треков)

Добавьте следующий код после кнопки для повторного проигрывания треков:

Добавьте свойство shuffle со значением false в Player.vue, привяжите его (:shuffle="shuffle") и добавьте проп (shuffle: Boolean) в PlayerControlsBars.vue.

Теперь давайте создадим метод toggleShuffle():

Теперь возвращаемся к Player.vue, регистрируем обработчик события (@toggleshuffle="toggleShuffle") и создаем метод toggleShuffle():

Теперь добавьте следующий код к методу skip() после index = 0:

Ниже показано, как должно теперь выглядеть наше приложение:

The player repeat and shuffle buttons

Добавляем панель для позиционирования проигрываемого в данный момент трека

Для начала в Player.vue создайте свойство seek со значением 0. Затем нам необходимо будет следить за изменением значений свойства playing для того, чтобы обновить позицию.

За счет этого кода значение свойства seek будет обновляться четыре раза за секунду.

Теперь создайте метод progress() в свойстве computed:

Привяжите его в шаблоне (:progress="progress").

Далее в PlayerControlsBars.vue передайте проп progress (progress: Number) и добавьте еще один компонент toolbar ниже того, что мы уже создали:

Здесь мы используем компонент Vuetify progress.

Создайте метод trackProgress() в свойстве computed, благодаря которому получим позицию трека в процентах.

И теперь создайте метод updateSeek():

Здесь мы получаем индикатор выполнения хода задания, для которого используется класс .progress-linear__bar. Я узнал это при помощи DevTools браузера. Далее мы получаем позицию мыши и значение ширины индикатора. Далее мы получаем позицию мыши после нажатия в процентах.

Возвращаемся к Player.vue, добавляем и регистрируем обработчик события (@updateseek="setSeek") и создаем метод setSeek():

И бац! Вы можете использовать свою мышь для изменения позиции проигрываемого трека.

Создаем компонент информационной панели

Создайте файл PlayerInfoPanel.vue со следующим содержимым:

Здесь мы передаем проп trackInfo, который мы используем для заполнения нашего компонента с информацией о треке.

Теперь в файле Player.vue импортируйте, зарегистрируйте и добавьте компонент в шаблоне.

Затем создайте метод getTrackInfo() в свойстве computed:

Далее привязываем его в шаблоне (:trackInfo="getTrackInfo") и вуаля. Теперь у нас имеется некоторая базовая информация о проигрываемом в текущий момент треке, как вы можете видеть на скриншоте ниже.

The player info panel

Создаем компонент поисковой строки

Создайте файл PlayerSearchBar.vue со следующим содержимым:

Мы используем компонент text field и добавляем проп clearable для отображения иконки для очищения строки во время того, как мы набираем какой-то текст.

За счет использования v-model мы привязываем компонент к searchString, значением которой изначально является пустая строка. И мы добавляем обработчик события input.

Также мы передаем проп playlist, который мы используем в методе searchPlaylist(). В этом методе мы используем свойство display, задаем в качестве его значения false для каждого трека, в котором название трека или исполнителя не совпадает с набираемым в поисковой строке текстом, и оставляем его прежнее значение или изменяем его на true для всех треков, в которых имеется совпадение с набираемым текстом. Наконец, если текст в поисковой строке отсутствует или в качестве значения searchString задано null, что происходит при очищении поля при помощи кнопки для очищения строки, то мы задаем в качестве значения display true для всех треков.

Теперь в файле Player.vue импортируйте, зарегистрируйте и добавьте компонент в шаблоне.

Привяжите свойство playlist (:playlist="playlist") и проверьте работоспособность этой функциональной возможности. Ниже показано, как она выглядит в действии:

The player search bar test

Некоторые советы по усовершенствованию плеера

Как вы видите, имея четкую цель и соответствующий план, создание приложения Vue/Vuetify не вызывает трудностей и приносит удовольствие. Теперь у вас имеется рабочий музыкальный плеер, который вы можете использовать во время отдыха или при программировании. Конечно же, всегда можно что-то улучшить и добавить, так что вот вам некоторые идеи, которыми вы можете попробовать реализовать, чтобы добавить в плеер еще больше функциональных возможностей:

  • поддержка плей-лист со сложной структурой
  • возможность добавления или удаления треков из плей-листа
  • поддержка drag-and-drop (* перемещение графического объекта вслед за экранным курсором)
  • возможность сортировки треков
  • визуализация звукозаписи

Заключение

В этом руководстве мы увидели, как легко и приятно создавать приложения при помощи Vue.js и Vuetify.js в особенности. Надеюсь, вам понравилось создавать этот плеер так же, как и мне. Буду рад увидеть вашу собственную усовершенствованную версию плеера. Так что при наличии таковой у вас просто оставьте ссылку на демоверсию в комментариях!

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.