Семейная корзина Vue для создания адаптивного музыкального веб-плеера

внешний интерфейс Vue.js Vuex
Семейная корзина Vue для создания адаптивного музыкального веб-плеера

Несмотря на то, что в Интернете есть много проектов Ele.me и xx music, имитирующих Vue, у меня все еще есть наглость, чтобы прийти сюда.В конце концов, я тоже немного нетрадиционный, веб-музыкальный проигрыватель, основанный на стороне ПК и дополненный мобильный терминал, так что я говорю, большие ребята, будьте осторожны, в конце концов, мой плеер только что вернулся из Кореи! ! !

Он имитирует интерфейс веб-версии QQ Music и принимает flexbox и макет позиции; хотя mmPlayer является адаптивным, он в основном используется для ПК, а мобильная сторона только делает соответствующие адаптации (без отображения текста); совместим только с основными браузерами ( для IE Попрощайтесь и сделайте специальные оптимизации, думая о предыдущих проектах, которые должны быть совместимы с IE7, все слезы!!!)

API: с открытым исходным кодомAPI NetEase Cloud Music NodeJS(Есть апи, чтобы была мотивация писать!!!)

Адрес исходного кода Vue-mmPlayer

Адрес онлайн-демонстрации Сервер хрупкий, с братом и сестренкой нужно обращаться бережно (лучше просматривать на ПК)

Как установить и использовать

mmPlayer

git clone https://github.com/maomao1996/Vue-mmPlayer.git  //下载mmPlayer

cd mmPlayer //进入mmPlayer播放器目录

npm install //安装依赖

npm run dev //服务端运行

npm run build  //项目打包

внутренний сервер

cd mmPlayer/server //进入后台服务器目录

npm install //安装依赖

node app.js //服务端运行 访问 http://localhost:3000

Не удается получить музыку после запуска mmPlayer. Проверьте, запущен ли фоновый сервер.

URL-адрес музыки в каталоге API должен совпадать с адресом фонового сервера.

стек технологий

  • Vue-Cli (инструмент для создания лесов Vue)
  • Vue (основной фреймворк)
  • Vue-Router (маршрутизация страниц)
  • Vuex (управление состоянием)
  • ES 6/7 (стандарт следующего поколения для языка JavaScript)
  • Меньше (препроцессор CSS)
  • Axios (сетевой запрос)
  • FastClick (устранение задержки клика в 300 мс на мобильном терминале)

оценка интерфейса

Интерфейс ПК выглядит нормально, но мобильный интерфейс всегда кажется странным, но эстетика ограничена, поэтому я перешел на версию React с высокой имитацией NetEase Cloud (если у младших братьев и сестер красивый интерфейс, добро пожаловать в общение . )

PC

Сейчас играет

正在播放

Таблица лидеров

排行榜

поиск

搜索

мой плейлист

我的歌单

Я слышал

我听过的

обзор песни

歌曲评论

мобильный

移动端一
移动端二

Функции

Проигрыватель, сочетание клавиш, прокрутка текста, воспроизведение в данный момент, список рейтинга, сведения о списке воспроизведения, поиск, история воспроизведения, просмотр комментариев, синхронизация облачного списка воспроизведения NetEase

игрок (основной)

Функция player на самом деле такая же, вызывающаяHTML5 аудиоМетоды, атрибуты и события , и различные статьи в Интернете также представлены плохо, но в обмане должна быть искренность.

Функции, которые я реализовал: предыдущая песня, следующая песня, пауза, воспроизведение, одиночный цикл, цикл списка, воспроизведение в случайном порядке, последовательное воспроизведение, индикатор выполнения, регулировка громкости.

Прежде чем представить эти функции, давайте разберемся с идеями. Вот небольшая демонстрация для ознакомления. В конце концов, кода нет.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Audio</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id="Audio">
		<audio ref="mmAudio" :src="src" controls></audio>
		<button @click="prev">上一曲</button>
		<button @click="play">暂停/播放</button>
		<button @click="next">下一曲</button>
	</div>
	<script>
		const vm = new Vue({
			el: '#Audio',
			data: {
				list: [
					'https://music.163.com/song/media/outer/url?id=450424527.mp3',
					'https://music.163.com/song/media/outer/url?id=557581284.mp3',
					'https://music.163.com/song/media/outer/url?id=452986458.mp3'
				],//歌曲数组
				index: 0,//当前歌曲下标
			},
			computed: {
				src() {
					return this.list[this.index] // 当前播放歌曲
				}
			},
			methods: {
				prev() {//上一曲
					let index = this.index - 1;
					if (index < 0) {
						index = this.list.length - 1
					}
					this.index = index;
					this.$nextTick(() => this.$refs.mmAudio.play())
				},
				play() {//暂停/播放
					this.$nextTick(() => this.$refs.mmAudio.paused ? this.$refs.mmAudio.play() : this.$refs.mmAudio.pause())
				},
				next() {//下一曲
					let index = this.index + 1;
					if (index === this.list.length) {
						index = 0
					}
					this.index = index;
					this.$nextTick(() => this.$refs.mmAudio.play())
				}
			}
		})
	</script>
</body>
</html>

Логика этого кода очень проста, мы добавимcomputedдинамически генерируемые песниsrc, когда нажимается пауза/воспроизведение, он будет вызыватьсяplayметод, измените статус воспроизведения; при нажатии на предыдущую или следующую песню статус воспроизведения текущей песни будет изменен.index, который затем вызоветcomputedИсправлятьsrcтогда позвониplayспособ воспроизведения музыки

После прочтения этой небольшой демонстрации эти функции легко понять.

Предыдущий/Далее: изменить текущую воспроизводимую песню.index, который затем вызоветcomputedИсправлятьsrc, а затем позвонитеplayспособ воспроизведения музыки

Пауза/воспроизведение: через аудиоpausedСвойство определяет, находится ли звук в состоянии паузы, и если оно возвращает значение true, оно вызывается.playВоспроизведение музыки, если ответный ложный вызовpausedПауза музыки

Одиночный цикл: аудиовызовendedсобытие, после окончания воспроизведения текущей песниcurrentTimeсвойство сбрасывается на 0

Цикл списка: вызов аудиоendedсобытие, которое вызывает метод следующей песни в обратном вызове

Перемешать: перетасовать массив песен с помощью метода, использовать массив для хранения исходного массива песен перед перемешиванием массива.

Последовательное воспроизведение: вызов аудиоendedсобытие, чтобы определить, равен ли нижний индекс текущей песни длине массива песен -1, если он равен, метод следующей песни не будет вызываться.

Индикатор выполнения/регулятор громкости: используйте свой собственный инкапсулированныйкомпонент прогрессадля перетаскивания, нажмите, чтобы изменить соответствующий ход воспроизведенияcurrentTimeи объемvolumeПримечание: вprogressПривязки событий только для мышиmousedownи коснитесь начала событияtouchstartпривязан к соответствующему узлу DOM, другие движения мышиmousemoveи нажмите, чтобы двигатьсяtouchmove, отпустить мышьmouseupи сенсорный выпускtouchendDOM, привязанный к событию, — это всеdocument, в противном случае будут различные проблемы сбрасывания цепочки.Например, если в процессе перетаскивания фокус не находится на соответствующем DOM, перетаскивание будет прервано.

Быстрая операция

Предыдущая песня Ctrl + Влево

Пауза воспроизведения Ctrl + пробел

Следующая песня Ctrl + вправо

Переключить режим воспроизведения Ctrl + O

Громкость плюс Ctrl+Вверх

Уменьшить громкость Ctrl + Вниз

Прокрутка текстов песен

Принцип прокрутки текстов песен: по времени воспроизведения текущей музыкиaudio.currentTimeЧтобы сопоставить время текста с данными JSON, совпадающий текст центрируется и выделяется.

Во-первых, давайте сделаем очаровательную нефритовую фотографию текста JSON, чтобы облегчить тягу младших братьев и сестер.

{
lyric: "[by:鱼丸啊鱼丸QAQ] [00:00.00] 作曲 : willen [00:01.00] 作词 : 口袋易百 [00:04.60]伴唱：willen [00:05.10]混音/母带：willen [00:55.37]外婆的话 还记得吗 [00:59.01]慈祥的笑容伴我长大 [01:02.75]每当庭院开满了桂花 [01:06.50]淡淡花香都是爱的牵挂 [01:10.30]外婆的话 还记得吗 [01:14.01]受伤的孩子别忘了回家 [01:17.66]夕阳西下 岁月染白了发 "
}

так какaudio.currentTimeЭто в секундах, а формат лирики JSON похож на соус[00:00.00]Итак, сначала мы наложим немного макияжа на лирику JSON.

// 这是化妆过程，具体流程我就不多说了，毕竟我是厚着脸皮来掘金骗小心心的
 function parseLyric(lrc) {
    let lyrics = lrc.split("\n");
    let lrcObj = [];
    for (let i = 0; i < lyrics.length; i++) {
        let lyric = decodeURIComponent(lyrics[i]);
        let timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
        let timeRegExpArr = lyric.match(timeReg);
        if (!timeRegExpArr) continue;
        let clause = lyric.replace(timeReg, '');
        for (let k = 0, h = timeRegExpArr.length; k < h; k++) {
            let t = timeRegExpArr[k];
            let min = Number(String(t.match(/\[\d*/i)).slice(1)),
                sec = Number(String(t.match(/\:\d*/i)).slice(1));
            let time = min * 60 + sec;
            if (clause !== '') {
                lrcObj.push({time: time, text: clause})
            }
        }
    }
    return lrcObj;
}

Я скорее овощ, марсианский текст (обычный) полностью зависит от поисковых систем, этоТексты песен обычный оригинальный адрес, но мой немного изменен.

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

Сейчас играет

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

Таблица лидеров

Вызовите соответствующий интерфейс API, чтобы получить список списков лидеров NetEase Cloud Music (в настоящее время отложенная загрузка изображений отсутствует)

Детали плейлиста

Передайте идентификатор плейлиста и вызовите соответствующий интерфейс API, чтобы получить все песни в текущем плейлисте. Поскольку он получает все песни, он будет зависать при прокрутке на мобильном терминале. Это будет добавлено позже.Better-Scroll(Плагин, ориентированный на удовлетворение потребностей различных сценариев прокрутки на мобильном терминале)

поиск

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

В последнем споре об авторских правах между Netease Cloud Music и QQ Music все синглы Джея Чоу были GG, а затем я сначала запросил URL-адрес текущей песни в событии воспроизведения. Если нет, он подскажет: Текущая песня не может быть Если вы этого не сделаете, то будет плохо, если вас снова будут ругать, ведь пользователь большой парень, и его нельзя ни спровоцировать, ни избежать.

История игр

перечислитьcanplayсобытие, не будет воспроизводить песню с ошибками черезlocalStorageместо хранения PS: Сначала я прошелplayСобытие, в результате, независимо от того, можете ли вы его воспроизвести или нет, будет добавлено в историю воспроизведения, а затем будет обжаловано.Наконец, различные исследования показали, чтоcanplayболее элегантный

Посмотреть комментарии

Это одна из изюминок музыки Дуаньцзиюнь, надо добавить через текущую воспроизводимую музыкуidВызовите соответствующий интерфейс API для отображения популярных комментариев и последних комментариев соответственно. Когда я это делал в свое время, интерфейс был тривиальным, но время комментариев просто удручало.

только что / XX минут назад / XX:XX / XX месяц XX / XX год XX месяц XX

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

Синхронизировать облачный плейлист NetEase

иди первыйОблачная музыка NetEaseполучить свой собственныйUIDЗатем получите список воспроизведения пользователя, вызвав соответствующий интерфейс API, а затем передайте идентификатор списка воспроизведения, чтобы получить сведения о списке воспроизведения.

Когда соответствующееUIDвозвращениеplaylistПодскажите, когда длина массива равна 0未查询找UID为 ${uid} 的用户信息

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

Очистить при выходеlocalStorage, чтобы вы не вошли в систему снова при следующем открытии

следовать за

  1. Код для повышения скорости повторного использования
  2. Оптимизируйте мобильный интерфейс и возможности, такие какBetter-Scroll,Ленивая загрузка изображения
  3. Альбом / Исполнитель / Плейлист / Поиск пользователя
  4. использоватьkoaРефакторинг фоновых служб
  5. Улучшить опыт десктопной версии (ведь она слишком простая, я больше не могу)
  6. ... (у меня не хватает возможностей мозга, поэтому я пока могу думать об этом)

благодарный

Справочное руководство HTML Audio/Video DOM

API NetEase Cloud Music NodeJS

Обновление Vue.js и наступление на пит-ноты

Lodash (служебная библиотека JavaScript)

разное

Персональный тренировочный проект, в основном когда мне было скучно какое-то время, а потом я ходил по магазинамGayhubКогда я нашел музыкальный API с открытым исходным кодом——API NetEase Cloud Music NodeJSНаконец, пока бессовестная водная группа ищет симпатичный интерфейс, я кстати разберусь с идеями разработки.

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

Есть также босс React, который будет вести меня. В настоящее время я занимаюсь самообучением, и есть много головоломок, на которые нужно найти ответы. Это проект, которым я занимаюсь во время обучения.Мобильная версия React (высокая имитация NetEase Cloud MusicЯ чувствую, что в этом высоком подражании нет ничего плохого.

Наконец, давайте перейдем к теме, приветствую младших братьев и сестер, чтобы дать мне "Звезду" "Вилку" (адрес здесьАдрес исходного кода Vue-mmPlayer), в конце концов, это был первый раз, когда я разместил пост, чтобы обмануть лайки (с легкой улыбкой), мои младшие братья и сестры меня немного подбодрили.

Если у вас есть какие-либо вопросы, пожалуйста, ответьте в этой статье или прямо наIssuesСреднее упоминание, или вы нашли проблему и у вас есть очень хорошее решение, добро пожаловать в PR

Категории