адрес проекта:GitHub.com/Ermu5922752…
Демонстрационный адрес:Глаза и уши 592275254.GitHub.IO/mini music PL…(ссылка на песню устарела)
идея до разработки
интерфейс
Чтобы быть музыкальным проигрывателем, интерфейс должен быть классным. Это слишком низко, чтобы слушать музыку. Он для использования на работе, поэтому сделан интерфейс похожий на NetEase Cloud Music, да и размер подходящий. Не совместим с мобильными телефонами.
сделать иконки с помощью css
Учитывая простые и практичные потребности, иконки могут быть SVG, URL или CSS. По сравнению с URL SVG и CSS лучше. Для практики окончательный выбор css. Использование after и before может уменьшить вложенность dom.
.next {
position: relative;
display: inline-block;
height: 36px;
width: 36px;
border: 2px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.next:before {
content: '';
height: 0;
width: 0;
display: block;
border: 10px transparent solid;
border-right-width: 0;
border-left-color: #fff;
position: absolute;
top: 8px;
left: 10px;
}
.next:after {
content: '';
height: 20px;
width: 4px;
display: block;
background: #fff;
position: absolute;
top: 8px;
left: 22px;
}
поставить рекорд
Пластинка Netease Cloud очень красивая, я тоже хочу такую же! использовать это хорошоbox-shadow, один элемент может создать красивый эффект записи.
.disc {
position: relative;
margin-top: 10%;
margin-left: 10%;
width: 300px;
height: 300px;
border-radius: 300px;
transform: rotate(45deg);
background-image: radial-gradient(5em 30em ellipse, #fff, #000);
border: 2px solid #131313;
box-shadow: 0 0 0 10px #343935;
opacity: 0.7;
}
Использовать диапазон в качестве индикатора выполнения
Сам стиль звука уродлив, и разные браузеры отображают его по-разному. Конечно, вы можете изменить стиль звука.Традиционный способ — скрыть звук через атрибут управления, а затем использовать вместо него div. Сейчас эпоха html5, конечно, нам нужно использовать новый элемент, который больше соответствует сцене — range.
input[type=range] {
-webkit-appearance: none;
width: 80%;
height: 8px;
border-radius: 10px;
background-color: #fff;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 20px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -3px;
height: 14px;
width: 14px;
background: #eb7470;
border-radius: 50%;
border: solid 3px #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
размытие фона фильтром
Как здорово установить картинку в качестве фона, можно сказать, что фон обеспечивает половину внешнего вида всего плеера. Настройка тоже очень простая, с помощью фильтра css3.
.bg-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(20px);
z-index: -1;
}
Фоновое изображение контролируется JS.
<div class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></div>
ресурс песни
Спуститься по интерфейсу
Перейдите непосредственно на официальный сайт Xiami, чтобы открыть сеть, и скопируйте URL-адрес в почтальон, чтобы сделать запрос. Изменив заголовки, Referer будет проверен. То есть только доменные имена, разрешенные Xiami, могут получить доступ к этому интерфейсу. http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs
Решение междоменных проблем
Поскольку интерфейс поддерживает jsonp. Сначала попробуйте настроить браузер chrome на междоменный режим, а затем сделайте jsonp-запрос через $.ajax. можно получить доступ в обычном режиме.
Затем вдруг умирают, это не креветки были ограничены?
Запустите службу с Node, подделайте запрос, инициированный Referr, а затем перенаправьте запрос на страницу. Нечаянно написал прокси.
...
case '/song':
let songOptions = {
url: 'http://api.xiami.com/web?'+ urlArr[1],
headers: {
'Referer': 'http://m.xiami.com/'
}
};
function callback1(error, response, body) {
if (!error && response.statusCode == 200) {
res.end(body);
}
}
request(songOptions, callback1);
break;
...
Прокрутка текстов песен
Как высококачественный проигрыватель, прокрутка текста является обязательной.
принцип
Сохраните каждую лирику как объект с соответствующим временем. Когда текущее время воспроизведения песни больше или равно времени лирики и меньше времени следующей лирики лирики, прокрутите лирику до видимой области. И изменить цвет шрифта.
отформатировать текст
Тексты песен, возвращаемые интерфейсом, были перепутаны, после тщательного изучения я обнаружил, что они правильные.
[ti:aLIEz]
[ar:SawanoHiroyuki[nZk]:mizuki]
[al:o1]
[ly:澤野弘之]
[mu:澤野弘之]
[ma:]
[pu:]
[by:ttpod]
[total:268512]
[offset:0]
[00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki
[x-trans]彻头彻尾的谎言 - SawanoHiroyuki[nZk]:mizuki
[00:01.095]<201>作<250>詞<200>：<201>澤<200>野<199>弘<300>之
[x-trans]
[00:02.846]<200>作<150>曲<150>：<200>澤<200>野<351>弘<349>之
[x-trans]
[00:20.828]<200>決<250>め<200>つ<201>け<149>ば<201>か<349>り
[x-trans]一直独断专权
[00:23.279]<200>自<200>惚<200>れ<200>を<200>着<400>た
[x-trans]总是自负逞强
[00:24.979]<200>チ<200>ー<200>プ<450>な<550>hokori<350>で
[x-trans]明明只是一文不值的骄傲
......
refactoringLyrics(lyric){
let text = lyric.split('[offset:0]')[1];
let textArr = text.split('\n');
let lyricsArr = [], translate = [];
textArr.forEach((item, index) => {
let time = 0, text = '';
if (item.indexOf('[x-trans]') > -1) {
translate.push(item.split('[x-trans]')[1])
} else if (item.trim() != '') {
time = item.slice(1, 6).split(':');
time = parseInt(time[0]) * 60 + parseInt(time[1]);
text = item.slice(11);
let arr = text.split('>');
let str = arr.reduce((a, b) => {
return a.split('<')[0] + b.split('<')[0]
});
let obj = {
time: time,
text: str
};
lyricsArr.push(obj);
}
});
for (let i in translate) {
lyricsArr[i].text = lyricsArr[i].text + '\n' + translate[i];
}
this.currentLyrics = lyricsArr;
},
реализация панели поиска
Смонтировать подкомпоненты в одном файле
Чтобы следовать модульной разработке, было решено написать панель поиска как подкомпонент. Важно писать подкомпоненты на одной странице и монтировать подкомпоненты в соответствующий шаблон. Этот шаблон не может содержаться в элементе mount родительского компонента, иначе родительский компонент сообщит об ошибке undefined, поскольку данные в дочернем компоненте не могут быть отображены при отображении родительского компонента.
<div id="app" class="main">
...
</div>
<template id="search-box">
...
</template>
var searchBox = {
template: '#search-box',
props: {
isShow: Boolean,
openFun: Function
},
data(){
return {
resultList: [],
searchValue: '',
}
},
methods: {
}
};
new Vue({
el: '#app',
components: {
'com-tip': tip,
'search-box': searchBox
},
...
})
eventBus решает проблему передачи данных
Чтобы запросить данные через jsonp, вам нужно установить функцию обратного вызова, которая написана как глобальная функция. В виде searchBox.methods.callback этот указатель будет методами. И не может напрямую присваивать значение данным searchBox. Таким образом, это обрабатывается EventBus, который легче поддерживать.
var EventBus = new Vue();
var callBack = function(result) {
console.log(result);
EventBus.$emit('callBack', result);
};
...
mounted(){
let self = this;
EventBus.$on('callBack', function(res) {
if (res && res.data) {
self.resultList = res.data.songs;
}
})
}
...
localStrong хранит информацию о песнях
При следующем открытии плейлист должен сохранить последние данные, что можно реализовать напрямую с помощью localstrong.
Техническое дополнение
размытие фильтра http://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/
значок csswww.uiplayground.in/css3-icons/
гибкая совместимая запись:woo woo woo.cn blog on.com/Iris Zhang/Afraid…
учебник по гибкой версткеУууу. Руан Ифэн.com/blog/2015/0…
Настройка стиля слайдераblog.CSDN.net/U013347241/…
Совместимость со скрытыми полосами прокруткисегмент fault.com/please/101000000…
аудио свойствоdeveloper.Mozilla.org/this-cn/docs/…
аудио событиеdeveloper.Mozilla.org/this-cn/docs/…
наступил на яму
данные передачи реквизита
Используя cdn, реквизит vue поддерживает только формат осевой линии, а формат верблюжьего регистра не действует.
ps: Верблюжий кейс можно использовать в проектах, упакованных с помощью webpack, и он будет обработан в процессе упаковки.
// 正确写法
<search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong"
@play-song="playSong"></search-box>
// 错误写法
<search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong"
@playSong="playSong"></search-box>
быть оптимизированным
Вручную измените прогресс, иногда это не вступит в силу.
Поиск не поддерживается
Создание списка воспроизведения не поддерживается
Цвет фона похож на цвет индикатора выполнения, вам нужно изменить цвет индикатора выполнения.
Выбор режима воспроизведения - одиночный цикл - воспроизведение в случайном порядке не поддерживается