Используйте jQuery для имитации мобильного терминала NetEase Cloud Music

внешний интерфейс SVG регулярное выражение jQuery

адрес предварительного просмотра

01 мая 2018 г. 21:37:28 Завершена рекомендуемая музыка, список популярных песен, страницы поиска и воспроизведения на главной странице.

20 апреля 2018 15:18:13 Это проект примечания для записи битов и кусочков создания этого проекта.

Четкий спрос

原型图
Сначала слева: домашняя страница (рекомендуемая музыка), список популярных песен, поиск, плейлист и интерфейс воспроизведения.

Производственный процесс

Настройка рабочего процесса

Я выбрал синхронизацию с браузером, потому что этот проект относительно легкий (не нужно вводить множество модулей), поэтому я могу напрямую использовать синхронизацию с браузером для разработки обновления в реальном времени. После завершения проекта просто используйте инструмент упаковки для создания дистрибутива~~

вращающийся диск

В конце концов, как добиться вращения диска? Анимация CSS с использованием ключевых кадров:

@keyframes circle {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.disc {
	animation:circle 20s infinite linear;
	/*选择动画，circle；时间；无限循环；线性变化*/
}
  1. родительский контейнерpage, верхняя половина - музыкальный автоматdisc-containerКонтейнер, нижняя половина - информация о песнеsong-description. (Добавьте к нему каждый материал img.)
  2. Нижняя часть связана с двумя кнопками, обернутыми в div.linksконтейнер. (ложные данные)
  3. ДатьpageПолная высота экрана, 100vh. Три части располагаются сверху вниз, используется лен. Затем установите ширину и высоту для каждого изображения в соответствии с суждением.

текст песни

  1. Сначала получите запрос на текст. Используйте сеть > фильтр > XHR в инструментах разработчика, чтобы получить запрос. Сделайте копию и используйте ее, чтобы издеваться над текстом. Сохранить как json-файл.
  2. Представьте jQuery, отправьте запрос ajax на только что сохраненный lyric.json и введите ответ (обещание)
  3. Процесс лир. (lyr относится к значению, ключ которого в ответе lyric. lyr = object.lyric) Это строка, которую мы печатаем, формируя новый массив с возвратом каретки в качестве разделителей ('\n'). Эффект следующий:
    效果图
  4. Используйте регулярные выражения, чтобы сопоставить время в квадратных скобках и следующий текст песни. Затем используйте обычный API для захвата содержимого и возврата его в массив. Обратите внимание, что карта используется здесь для сопоставления каждой строки в массиве.
  5. Вставьте содержимое массива в тег html P и вставьте его в документ, атрибутом является время.
  6. Высота — это высота, на которой отображаются три строки текста. Установите размер шрифта и отцентрируйте его.
  7. Установите активный стиль, установите фиксированную высоту для лирического текста и установите высоту строки для лирического фрагмента p.
  8. Когда текст воспроизводится, отрегулируйте стиль преобразования строк (то есть div, в котором хранится текст).

играть

  1. получить src песни
  2. Ознакомьтесь с различными API-интерфейсами аудио (воспроизведение, пауза, получение текущего времени, аудиособытия).
  3. Во время воспроизведения песни верхний диск вращается соответственно.
  4. Добавьте кнопку воспроизведения (здесь я использовал изображение).

Пауза

  1. нажмите на запись,audio.pause(), при удалении класса состояния, представляющего игру.

титульная страница

Домашнюю страницу относительно просто сделать.

  1. Логотип вырезан с официального сайта и представляет собой svg (прозрачный, вы можете увидеть его с фоновым цветом).
  2. Завершите его стиль CSS (это требует времени и усилий)
  3. Получите несколько песен в качестве образцов. Вы можете поместить его в Qiniu, чтобы имитировать запросы ajax.
  4. Смоделируйте song.json, а затем удалите мертвый узел в html. По возвращенному json склеивается в html и вставляется в dom.
  5. После загрузки домашней страницы, до поступления соответствующих данных, должна отображаться анимация загрузки, указывающая на то, что данные загружаются; когда данные поступают, элементы страницы визуализируются, а анимация загрузки удаляется, чтобы улучшить Пользовательский опыт. (Вы можете использовать gif или повернуть значок svg.)
  6. Отправьте запрос ajax, соединив адрес ссылки для перехода в соответствии с ответом и одновременно соединив информацию о песне. (строка шаблона ES6)
    代码截图
  7. После завершения склейки он рендерится в html и анимация загрузки удаляется.
    效果图
  8. После нажатия он перейдет к./song.htmlвместе с идентификатором песни. существуетsong.jsвыше, согласноlocation.searchПолучить идентификатор песни. (требуется регулярное сопоставление)
location.search.match(/\bid=([^&]*)/)[1]

список популярных песен

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

поиск

  1. API необходимо изменить, а целевой адрес предложения поиска изменить на предложение/ключевое слово, если ответ находится вcode===200указывает на успех.
    效果
  2. Интерактивные поисковые подсказки и интерактивные теги горячего поиска.

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

  1. Во-первых, получите время выполнения текущей песни:audio.currentTimeВы получаете количество секунд текущего хода воспроизведения (обратите внимание, что вам нужно установить время, чтобы получать его каждые 500 миллисекунд)
  2. Преобразование в обычное отображение времени01:25,суть в том,чтобы склеить минуты и секунды вместе.Что нужно решить,так это округлением цифр определить нужно ли прибавлять0.
setInterval(()=>{
	let  nowScends  =  audio.currentTime;
	let  minutes  =  ~~(nowScends/60)
	let  scends  =  ~~(nowScends%60)
	let  currentTime  = `${padTime(minutes)}:${padTime(scends)}`;
 },300)
function  padTime(number)  {
      return  number>10?number+'':'0'+number
    }
  1. Код для реализации прокрутки текстов песен:
let  $lrcArray  =  $('.lyric .lines>p'); //这里取的是每一段歌词的集合。
let  lrcLength  =  $lrcArray.length;
for(let  i=0;  i<lrcLength;  i++){
	let  $whitchLines  =  $lrcArray.eq(i);	//指应当显示的歌词行
	let  $nextLines  =  $lrcArray.eq(i+1);	//指接下来要显示的歌词行
	
	//当没有下一段歌词的时候，意味歌曲播放到最后，return。
	if($nextLines.length  ===  0){            
		return;
	}else if($whitchLines.attr('data-time')  <  currentTime  &&  $nextLines.attr('data-time')>currentTime){
		//遍历所有歌词，针对其属性`data-time`与当前的`currentTime`进行比较，如果当前时间比`i`的`data-time`大，比`i+1`的小，说明此时歌词应该是在`i`与`i+1`之间，应该显示$whitchLines的内容。
		$whitchLines.addClass('active').siblings().removeClass('active')
		let  gap  =  $whitchLines.offset().top  -  $('.lines').offset().top  ;
		log('gap ='+  gap)
		//因为歌词显示区域的高度是显示五行歌词，那么中间的高度就是总高度的五分之三
		let  middle  =  $('.lyric').height()  /  5  *  2
		$('.lines').css('transform',`translateY(-${gap-middle}px)`)
	}
}

Сложный процесс записи и решения

1. `处理歌词data,需要会用正则来对字符串进行分割。`
解决：可以利用在线正则网站好好设计一遍你的正则表达式。

2. `对播放动画进行设计，实现播放暂停的时候唱片旋转角度不会归零。`
解决：使用 `animation-play-state: paused `
3. `mock数据会很繁琐。`
解决：七牛存储/自建api

4. `搜索框提示`和`搜索显示内容的节流`

5. `歌词滚动`
解决：要想好好歌词显示的逻辑：
	- 确定歌曲时间戳（`audio.currentTime`）
	- 根据时间戳匹配歌词(遍历歌词节点，根据歌词节点的`data-time`属性与时间戳进行比较，当时间戳位于两行歌词的`data-time`之间，高亮上一条歌词)
	- 滚动歌词（`transform:translateY`）

ожидающее обновления

Категории