yaslonane/itassistent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+

Browse Source
This commit is contained in:
Андрей Защепкин
2018-10-17 11:14:36 +03:00
parent 75a35947e5
commit 04d60d7e2c
2716 changed files with 431449 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/player/src/APlayer.js
+545
View File
@@ -0,0 +1,545 @@
/**
* APlayer constructor function
*
* @param {Object} option - See README
* @constructor
*/
(function () {
function APlayer(option) {
this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
// compatibility: some mobile browsers don't suppose autoplay
if (this.isMobile) {
option.autoplay = false;
}
// default options
var defaultOption = {
element: document.getElementsByClassName('aplayer')[0],
narrow: false,
autoplay: false,
showlrc: false,
theme: '#b7daff'
};
for (var defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
option[defaultKey] = defaultOption[defaultKey];
}
}
// multiple music
this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;
this.option = option;
this.audios = [];
this.loop = true;
}
/**
* AutoLink initialization function
*/
APlayer.prototype.init = function () {
this.element = this.option.element;
this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;
var i;
// parser lrc
if (this.option.showlrc) {
var lrcs = [];
for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
}
this.lrcs = this.parseLrc(lrcs);
}
// fill in HTML
var eleHTML = ''
+ '<div class="aplayer-pic">'
+ '<div class="aplayer-button aplayer-play">'
+ '<i class="demo-icon aplayer-icon-play"></i>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-info">'
+ '<div class="aplayer-music">'
+ '<span class="aplayer-title"></span>'
+ '<span class="aplayer-author"></span>'
+ '</div>'
+ '<div class="aplayer-lrc">'
+ '<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>'
+ '</div>'
+ '<div class="aplayer-controller">'
+ '<div class="aplayer-bar-wrap">'
+ '<div class="aplayer-bar">'
+ '<div class="aplayer-loaded" style="width: 0"></div>'
+ '<div class="aplayer-played" style="width: 0; background: ' + this.option.theme + ';">'
+ '<span class="aplayer-thumb" style="border: 1px solid ' + this.option.theme + ';"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-time">'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
+ '<div class="aplayer-volume-wrap">'
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
+ '<div class="aplayer-volume-bar-wrap">'
+ '<div class="aplayer-volume-bar">'
+ '<div class="aplayer-volume" style="height: 80%; background: ' + this.option.theme + ';"></div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<i class="demo-icon aplayer-icon-loop"></i>'
+ (this.playIndex > -1 ? '<i class="demo-icon aplayer-icon-menu"></i>' : '')
+ '</div>'
+ '</div>'
+ '</div>';
if (this.playIndex > -1) {
eleHTML += ''
+ '<div class="aplayer-list">'
+ '<ol>';
for (i = 0; i < this.option.music.length; i++) {
eleHTML += ''
+ '<li>'
+ '<span class="aplayer-list-cur" style="background: ' + this.option.theme + ';"></span>'
+ '<span class="aplayer-list-index">' + (i + 1) + '</span>'
+ '<span class="aplayer-list-title">' + this.option.music[i].title + '</span>'
+ '<span class="aplayer-list-author">' + this.option.music[i].author + '</span>'
+ '</li>'
}
eleHTML += ''
+ '</ol>'
+ '</div>'
}
this.element.innerHTML = eleHTML;
// switch to narrow style
if (this.option.narrow) {
this.element.classList.add('aplayer-narrow');
}
var _self = this;
// play and pause button
this.button = this.element.getElementsByClassName('aplayer-button')[0];
this.button.addEventListener('click', function () {
if (this.classList.contains('aplayer-play')) {
_self.play.call(_self);
}
else if (this.classList.contains('aplayer-pause')) {
_self.pause.call(_self);
}
});
// click music list: change music
if (this.playIndex > -1) {
for (i = 0; i < this.option.music.length; i++) {
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () {
var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
if (musicIndex !== _self.playIndex) {
_self.setMusic(musicIndex);
}
_self.play();
});
}
}
// control play progress
this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
var barWidth;
this.bar.addEventListener('click', function (event) {
var e = event || window.event;
barWidth = _self.bar.clientWidth;
var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
_self.updateBar.call(_self, 'played', percentage, 'width');
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
});
this.thumb.addEventListener('mouseover', function () {
this.style.background = _self.option.theme;
});
this.thumb.addEventListener('mouseout', function () {
this.style.background = '#fff';
});
this.thumb.addEventListener('mousedown', function () {
barWidth = _self.bar.clientWidth;
clearInterval(_self.playedTime);
document.addEventListener('mousemove', thumbMove);
document.addEventListener('mouseup', thumbUp);
});
function thumbMove(event) {
var e = event || window.event;
var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
_self.updateBar.call(_self, 'played', percentage, 'width');
if (_self.option.showlrc) {
_self.updateLrc.call(_self, parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration);
}
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
}
function thumbUp() {
document.removeEventListener('mouseup', thumbUp);
document.removeEventListener('mousemove', thumbMove);
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
_self.play();
}
// control volume
this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];
var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];
var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
var barHeight = 35;
this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
var e = event || window.event;
var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
_self.updateBar.call(_self, 'volume', percentage, 'height');
_self.audio.volume = percentage;
if (_self.audio.muted) {
_self.audio.muted = false;
}
if (percentage === 1) {
volumeicon.className = 'demo-icon aplayer-icon-volume-up';
}
else {
volumeicon.className = 'demo-icon aplayer-icon-volume-down';
}
});
volumeicon.addEventListener('click', function () {
if (_self.audio.muted) {
_self.audio.muted = false;
volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down';
_self.updateBar.call(_self, 'volume', _self.audio.volume, 'height');
}
else {
_self.audio.muted = true;
volumeicon.className = 'demo-icon aplayer-icon-volume-off';
_self.updateBar.call(_self, 'volume', 0, 'height');
}
});
// get element's view position
function getElementViewLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
var elementScrollLeft;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
return actualLeft - elementScrollLeft;
}
function getElementViewTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
var elementScrollTop;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
return actualTop - elementScrollTop;
}
// loop control
this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () {
if (_self.loop) {
this.classList.add('aplayer-noloop');
_self.loop = false;
_self.audio.loop = _self.playIndex > -1 ? false : _self.loop;
}
else {
this.classList.remove('aplayer-noloop');
_self.loop = true;
_self.audio.loop = _self.playIndex > -1 ? false : _self.loop;
}
});
// toggle menu control
if (this.playIndex > -1) {
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () {
var list = _self.element.getElementsByClassName('aplayer-list')[0];
if (!list.classList.contains('aplayer-list-hide')) {
list.classList.add('aplayer-list-hide');
}
else {
list.classList.remove('aplayer-list-hide');
}
});
}
this.setMusic(0);
};
/**
* Set music
*/
APlayer.prototype.setMusic = function (index) {
// get this.music
if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') {
this.playIndex = arguments[0];
}
var indexMusic = this.playIndex;
this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music;
// set html
if (this.music.pic) {
this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')';
}
this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;
this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + this.music.author;
if (this.playIndex > -1) {
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
}
this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light');
}
// set the previous audio object
if (this.audio) {
this.pause();
this.audio.currentTime = 0;
}
// get this audio object
if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) {
this.audio = document.createElement("audio");
this.audio.src = this.music.url;
this.audio.preload = this.isMobile ? 'none' : 'metadata';
// show audio time
var _self = this;
this.audio.addEventListener('durationchange', function () {
if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
_self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
}
});
// show audio loaded bar
_self.audio.addEventListener('progress', function () {
var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0;
_self.updateBar.call(_self, 'loaded', percentage, 'width');
});
// audio download error
this.audio.addEventListener('error', function () {
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥';
});
// multiple music play
if (this.playIndex > -1) {
this.audio.addEventListener('ended', function () {
if (_self.playIndex < _self.option.music.length - 1) {
_self.setMusic(++_self.playIndex);
}
else if (_self.loop) {
_self.setMusic(0);
}
else if (!_self.loop) {
_self.pause();
}
});
}
else {
this.audio.addEventListener('ended', function () {
if (!_self.loop) {
_self.pause();
}
});
}
// control volume
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
// loop
this.audio.loop = this.playIndex > -1 ? false : this.loop;
if (this.playIndex > -1) {
this.audios[indexMusic] = this.audio;
}
}
else {
this.audio = this.audios[indexMusic];
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
this.audio.currentTime = 0;
}
// fill in lrc
if (this.option.showlrc) {
this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0];
this.element.classList.add('aplayer-withlrc');
var lrcHTML = '';
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
for (var i = 0; i < this.lrc.length; i++) {
lrcHTML += '<p>' + this.lrc[i][1] + '</p>';
}
this.lrcContents.innerHTML = lrcHTML;
if (!this.lrcIndex) {
this.lrcIndex = 0;
}
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
this.lrcContents.style.transform = 'translateY(0px)';
this.lrcContents.style.webkitTransform = 'translateY(0px)';
}
// set duration time
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';
}
// autoplay
if (this.option.autoplay && !this.isMobile) {
this.play();
}
this.option.autoplay = true; // autoplay next music
if (this.isMobile) {
this.pause();
}
};
/**
* Play music
*/
APlayer.prototype.play = function () {
var _self = this;
this.button.classList.remove('aplayer-play');
this.button.classList.add('aplayer-pause');
this.button.innerHTML = '';
setTimeout(function () {
_self.button.innerHTML = '<i class="demo-icon aplayer-icon-pause"></i>';
}, 100);
this.audio.play();
if (this.playedTime) {
clearInterval(this.playedTime);
}
this.playedTime = setInterval(function () {
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
if (_self.option.showlrc) {
_self.updateLrc.call(_self);
}
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
}, 100);
};
/**
* Pause music
*/
APlayer.prototype.pause = function () {
var _self = this;
this.button.classList.remove('aplayer-pause');
this.button.classList.add('aplayer-play');
this.button.innerHTML = '';
setTimeout(function () {
_self.button.innerHTML = '<i class="demo-icon aplayer-icon-play"></i>';
}, 100);
this.audio.pause();
clearInterval(this.playedTime);
};
/**
* Update progress bar, including loading progress bar and play progress bar
*
* @param {String} type - Point out which bar it is, should be played loaded or volume
* @param {Number} percentage
* @param {String} direction - Point out the direction of this bar, Should be height or width
*/
APlayer.prototype.updateBar = function (type, percentage, direction) {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this[type + 'Bar'].style[direction] = percentage * 100 + '%';
};
/**
* Update lrc
*
* @param {Number} currentTime
*/
APlayer.prototype.updateLrc = function (currentTime) {
if (typeof(arguments[0]) === 'undefined') {
currentTime = this.audio.currentTime;
}
if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) {
for (var i = 0; i < this.lrc.length; i++) {
if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
this.lrcIndex = i;
this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
this.lrcContents.style.webkitTransform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
}
}
}
};
/**
* Parse second to 00:00 format
*
* @param {Number} second
* @return {String} 00:00 format
*/
APlayer.prototype.secondToTime = function (second) {
var add0 = function (num) {
return num < 10 ? '0' + num : '' + num;
};
var min = parseInt(second / 60);
var sec = parseInt(second - min * 60);
return add0(min) + ':' + add0(sec);
};
/**
* Parse lrc, suppose multiple time tag
*
* @param {Array} arr - Format:
* [mm:ss.xx]lyric
* [mm:ss.xxx]lyric
* [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
*
* @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...]
*/
APlayer.prototype.parseLrc = function (arr) {
var lrcs = [];
for (var k = 0; k < arr.length; k++) {
var lyric = arr[k].split('\n');
var lrc = [];
var lyricLen = lyric.length;
for (var i = 0; i < lyricLen; i++) {
// match lrc time
var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g);
// match lrc text
var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, '');
if (lrcTimes != null) {
// handle multiple time tag
var timeLen = lrcTimes.length;
for (var j = 0; j < timeLen; j++) {
var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]);
var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
lrc.push([lrcTime, lrcText]);
}
}
}
// sort by time
lrc.sort(function (a, b) {
return a[0] - b[0];
});
lrcs.push(lrc);
}
return lrcs;
};
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = APlayer
}
else {
window.APlayer = APlayer;
}
})();
lib/player/src/APlayer.scss
+424
View File
@@ -0,0 +1,424 @@
$aplayer-height: 66px;
$lrc-height: 40px;
$aplayer-height-lrc: $aplayer-height + $lrc-height;
@font-face {
font-family: 'aplayer-fontello';
src: url('font/aplayer-fontello.eot?72550380');
src: url('font/aplayer-fontello.eot?72550380#iefix') format('embedded-opentype'),
url('font/aplayer-fontello.woff?72550380') format('woff'),
url('font/aplayer-fontello.ttf?72550380') format('truetype'),
url('font/aplayer-fontello.svg?72550380#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.aplayer-narrow {
width: $aplayer-height;
.aplayer-info {
display: none;
}
}
.aplayer-withlrc {
&.aplayer-narrow {
width: $aplayer-height-lrc;
}
&.aplayer .aplayer-pic {
height: $aplayer-height-lrc;
width: $aplayer-height-lrc;
}
&.aplayer .aplayer-info {
margin-left: $aplayer-height-lrc;
height: $aplayer-height-lrc;
}
&.aplayer .aplayer-lrc {
display: block;
}
}
.aplayer {
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
border-radius: 2px;
overflow: hidden;
user-select: none;
line-height: initial;
[class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before {
font-family: "aplayer-fontello";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
}
.aplayer-icon-play:before {
content: '\e806';
}
.aplayer-icon-pause:before {
content: '\e807';
}
.aplayer-icon-to-start:before {
content: '\e808';
}
.aplayer-icon-to-end:before {
content: '\e809';
}
.aplayer-icon-loop:before {
content: '\e803';
}
.aplayer-icon-menu:before {
content: '\e80b';
}
.aplayer-icon-volume-off:before {
content: '\e800';
}
.aplayer-icon-volume-down:before {
content: '\e801';
}
.aplayer-icon-volume-up:before {
content: '\e802';
}
.aplayer-lrc-content {
display: none;
}
.aplayer-pic {
position: relative;
float: left;
height: $aplayer-height;
width: $aplayer-height;
background-image: url(./default.jpg);
background-size: 100%;
transition: all 0.3s ease;
.aplayer-button {
position: absolute;
color: #fff;
border-radius: 50%;
opacity: 0.8;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
transition: all 0.1s ease;
&:hover {
opacity: 1;
}
}
.aplayer-hide {
display: none;
}
.aplayer-play {
width: 26px;
height: 26px;
border: 2px solid #fff;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0;
.aplayer-icon-play {
position: absolute;
top: 2px;
left: 4px;
font-size: 20px;
line-height: 23px;
}
}
.aplayer-pause {
width: 16px;
height: 16px;
border: 2px solid #fff;
bottom: 4px;
right: 4px;
.aplayer-icon-pause {
position: absolute;
top: 1px;
left: 2px;
font-size: 12px;
line-height: 14px;
}
}
}
.aplayer-info {
margin-left: $aplayer-height;
padding: 14px 7px 0 10px;
height: $aplayer-height;
box-sizing: border-box;
.aplayer-music {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 17px;
.aplayer-title {
font-size: 14px;
}
.aplayer-author {
font-size: 12px;
color: #666;
}
}
.aplayer-controller {
position: relative;
.aplayer-bar-wrap {
margin: 0 140px 0 5px;
.aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd;
cursor: pointer !important;
.aplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #aaa;
height: 2px;
transition: all 0.5s ease;
}
.aplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 2px;
.aplayer-thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 8px;
width: 8px;
border-radius: 50%;
background: #fff;
cursor: pointer !important;
}
}
}
}
.aplayer-time {
position: absolute;
right: 0;
bottom: -5px;
height: 17px;
color: #999;
font-size: 11px;
i {
color: #666;
font-size: 15px;
cursor: pointer;
transition: all 0.2s ease;
&.aplayer-icon-loop {
margin: 2px;
}
&.aplayer-noloop {
color: #ddd;
&:hover {
color: #bbb;
}
}
&:hover {
color: #000;
}
}
}
.aplayer-volume-wrap {
position: relative;
display: inline-block;
margin-left: 7px;
cursor: pointer !important;
&:hover .aplayer-volume-bar-wrap {
display: block;
}
.aplayer-volume-bar-wrap {
display: none;
position: absolute;
bottom: 17px;
right: -5px;
width: 25px;
height: 40px;
z-index: 99;
.aplayer-volume-bar {
position: absolute;
bottom: 0;
right: 10px;
width: 5px;
height: 35px;
background: #aaa;
.aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
transition: all 0.1s ease;
}
}
}
}
}
}
.aplayer-lrc {
display: none;
position: relative;
height: $lrc-height;
background: #fff;
text-align: center;
overflow: hidden;
margin: -10px 0 10px;
&:before {
position: absolute;
top: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 10%;
content: ' ';
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
&:after {
position: absolute;
bottom: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 33%;
content: ' ';
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
p {
font-size: 12px;
color: #666;
line-height: 20px !important;
height: 20px !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.5s ease-out;
opacity: 0.4;
overflow: hidden;
&.aplayer-lrc-current {
opacity: 1;
}
}
.aplayer-lrc-contents {
width: 100%;
transition: all 0.5s ease-out;
}
}
.aplayer-list {
max-height: 300px;
overflow: auto;
transition: all 0.5s ease;
&.aplayer-list-hide {
max-height: 0;
}
ol {
list-style-type: none;
margin: 0;
padding: 0;
li {
position: relative;
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 12px;
border-top: 1px solid #e9e9e9;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #efefef;
}
&.aplayer-list-light {
background: #e9e9e9;
.aplayer-list-cur {
display: inline-block;
}
}
.aplayer-list-cur {
display: none;
width: 3px;
height: 22px;
position: absolute;
left: 0;
top: 5px;
cursor: pointer;
}
.aplayer-list-index {
color: #666;
margin-right: 12px;
cursor: pointer;
}
.aplayer-list-author {
color: #666;
float: right;
cursor: pointer;
}
}
}
}
}
@keyframes aplayer-roll {
0%{left:0}
100%{left: -100%}
}
lib/player/src/default.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

lib/player/src/font/aplayer-fontello.eot
BIN
View File
Binary file not shown.
lib/player/src/font/aplayer-fontello.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="volume-off" unicode="&#xe800;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
<glyph glyph-name="volume-down" unicode="&#xe801;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
<glyph glyph-name="volume-up" unicode="&#xe802;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-8-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-26 11t-10 25q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
<glyph glyph-name="loop" unicode="&#xe803;" d="m800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
<glyph glyph-name="play" unicode="&#xe806;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
<glyph glyph-name="pause" unicode="&#xe807;" d="m440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
<glyph glyph-name="to-start" unicode="&#xe808;" d="m174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
<glyph glyph-name="to-end" unicode="&#xe809;" d="m412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
<glyph glyph-name="menu" unicode="&#xe80b;" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
</font>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

lib/player/src/font/aplayer-fontello.ttf
BIN
View File
Binary file not shown.
lib/player/src/font/aplayer-fontello.woff
BIN
View File
Binary file not shown.