H5-плеер для прослушивания музыки

Введение

H5-плеер для прослушивания музыки, созданный на основе Angular и Ionic. Поддерживает адаптацию под ПК и мобильные устройства, а также кроссплатформенную упаковку приложений.

Новая версия!!!

В этом проекте будут использоваться три фреймворка: Angular, Vue и React. Для каждого из них будет написан соответствующий код, чтобы изучить концепцию «разделения фреймворков и бизнес-логики».

Эксклюзивные функции!!!

1. Использование Proxy для помощи React в реализации реактивности и замены setState.
2. Реализация управления состоянием на основе Proxy в Vue и React.
3. Использование rxjs для обеспечения универсальной функциональности взаимодействия между компонентами в трёх фреймворках.
4. В результате достигается использование полностью согласованного стиля кода для написания бизнес-модулей в трёх фреймворках, что снижает сложность изучения фреймворков и повышает эффективность разработки.

Пример адреса

Рекомендуется использовать оригинальные версии Chrome или Edge для доступа (поддерживаются как ПК, так и мобильные устройства), поскольку браузеры китайского производства могут не поддерживать некоторые функции последней версии Angular: https://intelyes.club/114514.

Функции

1. Отображение текста песен в реальном времени.
2. Поддержка отображения иероглифов с чтением и переводом песен (в данном коде используется пример с японскими иероглифами).
3. Возможность перехода к соответствующему моменту песни при нажатии на текст песни.
4. Визуализация аудио.

Как запустить

1. Установите последнюю LTS-версию Node.js. Можно переключиться на источники Tencent или Huawei (не рекомендуется использовать источники CNPM или Alibaba для проектов Angular).
2. Установите angular-cli (npm install -g @angular/cli).
3. Установите ionic-cli (npm install -g @ionic/cli).
4. Перейдите в папку проекта и запустите npm install для установки зависимостей проекта.
5. Запустите npm start, и доступ к приложению можно получить через http://localhost:5300/.

Упаковка и развёртывание

1. Можно напрямую упаковать в веб-формат или в APK или iOS-приложение.
2. Подробные инструкции по упаковке для Android и iOS см. в официальной документации Ionic, соответствующие команды упаковки уже добавлены в package.json.

Примеры изображений

Примечание

Встроенная музыка предназначена только для изучения этого программного обеспечения.