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

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

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

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

Функции: 

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

Демо-версия

Репозиторий 

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

Функции: 

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

Репозиторий 

3. Azuracast PWA-плеер

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

Демо-версия

Репозиторий 

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

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

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

Демо-версия

Репозиторий 

5. Клиент Spotify

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

Демо-версия

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

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

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

Демо-версия

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

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

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

Демо-версия

Репозиторий 

8. Gokotta

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

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

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

Репозиторий 

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

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

Демо-версия

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

10. Клиент Soundcloud

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

• Vue.js;
• Vue Router;
• Vuex;
• Axios;
• Element;
• Howler.js.

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