Создать свой музыкальный плеер: 10 идей для проекта на Vue.js

Фреймворк Vue.js позволяет легко создавать рабочие приложения. Чтобы это доказать, на сайте Vuejsexamples опубликовали список из 10 примеров полнофункциональных музыкальных плееров со ссылками на открытый исходный код и демоверсии. Они помогут вам разобраться в работе фреймворка и создать свой собственный плеер для проекта или портфолио. 

1. Vusic — Apple Music веб-плеер

Создан с помощью Vue, Vuex, Vue Router на базе Genius, YouTube и Apple MusicKitJS SDK. 

Функции: 

• поиск популярных песен по каталогу Apple Music;
• рекомендации Apple;
• оценка треков;
• интеграция с YouTube для просмотров клипов на песню;
• отображение текста песни.

Vusic

Демо-версия

Репозиторий 

2. Музыкальный плеер FLB

Функции: 

• сортировка по исполнителям, альбомам и плейлистам;
• отображение текста песни в режиме офлайн;
• редактор тегов;
• загрузка треков с Deezer и YouTube;
• подборка песен на основе ваших вкусов;
• мини-режим;
• эквалайзер.

FLB Music Player

Репозиторий 

3. Azuracast PWA-плеер 

Инструмент Azuracast представляет собой бесплатное интернет-радио с открытым исходным кодом. С помощью кода из репозитория можно создать собственный FM-плеер для трансляции радиоэфиров. 

FM-плеер Azurcast

Демо-версия

Репозиторий 

4. Базовый музыкальный плеер с общедоступным плейлистом 

Проект разработан с помощью следующих технологий: 

• Vue.js;
• Eslint;
• Vue Fontawesome. 

Базовый музыкальный плеер с общедоступным плейлистом

Демо-версия

Репозиторий 

5. Клиент Spotify 

Основан на Vue.js и Vuex. Пользователи, прошедшие аутентификацию, должны иметь действующую подписку Spotify Premium, иначе SDK веб-воспроизведения не будет работать. 

Клиент Spotify

Демо-версия

Скачать исходный код 

6. Веб-сайт музыкального исполнителя 

Основан на Vue.js и Cosmic.js. 

Веб-сайт музыкального исполнителя

Демо-версия

Скачать исходный код 

7. Музыкальное приложение 

Основано на Veu.js, Veux и Vue Router.

Музыкальное приложение

Демо-версия

Репозиторий 

8. Gokotta 

Музыкальный проигрыватель, разработанный на основе Electron и Vue.js.

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

Пока что есть только альфа-версия на MacOS, скоро появится вариант для Linux и Windows. 

Gokotta

Репозиторий 

9. HTML5-музыкальный плеер для Vue.js 

Проект находится в статусе бета-тестирования. Большинство запланированных функций уже на борту, но еще есть некоторые недоработки. 

HTML5 музыкальный плеер для Vue

Демо-версия

Скачать исходный код

10. Клиент Soundcloud 

SoundCloud — это онлайн-платформа и сайт для распространения оцифрованной звуковой информации. Проект реализован с помощью следующих технологий:

• Vue.js;
• Vue Router;
Онлайн-курс "Продуктова аналітика" від Laba.
Станьте універсальним аналітиком, опанувавши 20+ інструментів для роботи з будь-яким продуктом.
Дізнатись більше про курс
• Vuex;
• Axios;
• Element;
• Howler.js.

Клиент Soundcloud

Скачать исходный код