Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Vue
Code

Створення музичного плеєра за допомогою Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Final product image
What You'll Be Creating

Створювати застосування за допомогою Vue.js просто, весело та приємно. Він дозволяє вам створювати робочий додаток завдяки мінімальним зусиллям. Щоб це підтвердити, сьогодні я покажу вам, наскільки це легко – створити свій власний повнофункціональний музичний плеєр. Щоб нам було ще простіше, ми скористаємося Vuetify.js, бібліотекою UI (* user interface – користувальницький інтерфейс. Тут і надалі примітка перекладача), що працює на основі Vue.js, для прискорення створення UI. Я майже відчуваю ваше бажання взятися до справи, так що поїхали.

З повним початковим кодом ви можете ознайомитися у цьому репозиторії GitHub. А тут розташовується робоча демоверсія. Передбачається, що ви знайомі з компонентами Vue, однофайловими компонентами Vue та синтаксисом ES2015 (* специфікація ES6).Також нам знадобиться верхня панель, що, ми так припустимо, поки що буде постійно відкрита до того,

Плануємо додаток

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

Vue music player wireframe sketch

Я створив цей каркас, щоб ви могли отримати загальне уявлення про UI, який хочемо створити. Наступний етап – опис функціональних можливостей, які збираємося реалізувати.

Як сказав Джон Джонсон (* досвідчений розробник, що спеціалізується в області платформи 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

Створюємо компонент пошукового рядка

Cтворіть файл 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.