diff --git a/src/css/app.css b/src/css/app.css index 984355c..300804c 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.app .album-cover{overflow:hidden;position:absolute;z-index:-1;left:0;top:0;width:100%;height:394px}.app .album-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(35px) opacity(0.8);filter:blur(35px) opacity(0.8)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:26px;background:rgba(32,32,32,0.5)}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between;background:rgba(32,32,32,0.5)}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,0.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{width:100%;height:269px;padding:16px 6px;border-top:1px solid rgba(32,32,32,0.1)}.app .main-body .song-box .list{height:237px;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{flex:1}.app .main-body .song-box .list .item .artist{width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:'▶ '}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,0.15)}.app .play-bar{height:66px;width:100%;background:rgba(24,24,24,0.3);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{position:relative;flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .progress input{position:absolute;left:0;top:0;display:block;width:100%;height:3px;opacity:0}.app .play-bar .stat-bar .thumb{height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;height:42px}.app .play-bar .ctrl-box .holder{flex:1}.app .play-bar .ctrl-box .info{display:flex;flex-direction:column;justify-content:center;width:320px;height:42px;padding-left:12px;line-height:1.25}.app .play-bar .ctrl-box .info strong{font-size:14px;font-weight:500}.app .play-bar .ctrl-box .info cite{font-size:12px;font-style:normal;color:#aeaeae}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px;margin-left:32px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:22px;margin-right:16px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume,.app .play-bar .ctrl-box .play-action .item.mute{position:relative}.app .play-bar .ctrl-box .play-action .item.volume a,.app .play-bar .ctrl-box .play-action .item.mute a{display:block;width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out}.app .play-bar .ctrl-box .play-action .item.volume .range,.app .play-bar .ctrl-box .play-action .item.mute .range{visibility:hidden;position:absolute;right:-5px;bottom:20px;width:32px;height:128px;padding:14px;border-radius:3px;background:rgba(128,128,128,0.8)}.app .play-bar .ctrl-box .play-action .item.volume .range input,.app .play-bar .ctrl-box .play-action .item.mute .range input{display:block;width:4px;height:100px;border-radius:3px;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.app .play-bar .ctrl-box .play-action .item.volume:hover .range,.app .play-bar .ctrl-box .play-action .item.mute:hover .range{visibility:visible}.app .play-bar .ctrl-box .play-action .item.volume a{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume a:hover,.app .play-bar .ctrl-box .play-action .item.volume a:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute a{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute a:hover,.app .play-bar .ctrl-box .play-action .item.mute a:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} +.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.app .album-cover{overflow:hidden;position:absolute;z-index:-1;left:0;top:0;width:100%;height:394px}.app .album-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(35px) opacity(0.8);filter:blur(35px) opacity(0.8)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:26px;background:rgba(32,32,32,0.5)}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between;background:rgba(32,32,32,0.5)}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{display:flex;flex-direction:column;width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,0.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{overflow:hidden;flex:1;width:100%;padding:16px 6px;border-top:1px solid rgba(32,32,32,0.1)}.app .main-body .song-box .list{height:100%;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{flex:1}.app .main-body .song-box .list .item .artist{width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:'▶ '}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,0.15)}.app .play-bar{height:66px;width:100%;background:rgba(24,24,24,0.3);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{position:relative;flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .progress input{position:absolute;left:0;top:0;display:block;width:100%;height:3px;opacity:0}.app .play-bar .stat-bar .thumb{height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;height:42px}.app .play-bar .ctrl-box .holder{flex:1}.app .play-bar .ctrl-box .info{display:flex;flex-direction:column;justify-content:center;width:320px;height:42px;padding-left:12px;line-height:1.25}.app .play-bar .ctrl-box .info strong{font-size:14px;font-weight:500}.app .play-bar .ctrl-box .info cite{font-size:12px;font-style:normal;color:#aeaeae}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px;margin-left:32px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:22px;margin-right:16px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume,.app .play-bar .ctrl-box .play-action .item.mute{position:relative}.app .play-bar .ctrl-box .play-action .item.volume a,.app .play-bar .ctrl-box .play-action .item.mute a{display:block;width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out}.app .play-bar .ctrl-box .play-action .item.volume .range,.app .play-bar .ctrl-box .play-action .item.mute .range{visibility:hidden;position:absolute;right:-5px;bottom:20px;width:32px;height:128px;padding:14px;border-radius:3px;background:rgba(128,128,128,0.8)}.app .play-bar .ctrl-box .play-action .item.volume .range input,.app .play-bar .ctrl-box .play-action .item.mute .range input{display:block;width:4px;height:100px;border-radius:3px;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.app .play-bar .ctrl-box .play-action .item.volume:hover .range,.app .play-bar .ctrl-box .play-action .item.mute:hover .range{visibility:visible}.app .play-bar .ctrl-box .play-action .item.volume a{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume a:hover,.app .play-bar .ctrl-box .play-action .item.volume a:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute a{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute a:hover,.app .play-bar .ctrl-box .play-action .item.mute a:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/src/css/app.scss b/src/css/app.scss index 9d864d3..ad08d94 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -85,6 +85,8 @@ } .song-box { + display: flex; + flex-direction: column; width: 618px; .preview { @@ -139,14 +141,15 @@ } .scroll-box { + overflow: hidden; + flex: 1; width: 100%; - height: 269px; padding: 16px 6px; border-top: 1px solid rgba(32, 32, 32, 0.1); } .list { - height: 237px; + height: 100%; font-size: 12px; .item { diff --git a/src/index.html b/src/index.html index 99a3b64..aba5526 100644 --- a/src/index.html +++ b/src/index.html @@ -37,7 +37,7 @@
-
+
@@ -50,7 +50,7 @@
- +
- * @date 2018/12/23 23:14:40 - */ - -'use strict' - -const { EventEmitter } = require('events') -const util = require('util') -const path = require('path') - -class AudioPlayer { - constructor() { - this.__PLAYER__ = new Audio() - this.__IS_PLAYED__ = false - this.__CURR__ = -1 // 当前播放的歌曲的id - this.__LIST__ = [] //播放列表 - this.__PLAY_MODE__ = 'all' // all | single | random - this.__PLAYER__.volume = 0.7 - - this.__init__() - } - - __init__() { - this.__PLAYER__.addEventListener( - 'timeupdate', - _ => { - this.emit('play', this.__PLAYER__.currentTime) - }, - false - ) - - this.__PLAYER__.addEventListener( - 'ended', - _ => { - this.emit('stop') - }, - false - ) - } - - get stat() { - return this.__LIST__.length ? 'ready' : 'stop' - } - - get IS_MUTED() { - return this.__PLAYER__.muted - } - - set volume(val) { - this.__PLAYER__.muted = false - this.__PLAYER__.volume = val / 100 - } - - set mode(val = 'all') { - this.__PLAY_MODE__ = val - } - - clear() { - this.__LIST__ = [] - } - - push(songs) { - this.__LIST__.push.apply(this.__LIST__, songs) - } - - getCurrSong() { - if (this.__CURR__ > -1) { - return this.__LIST__[this.__CURR__] - } - return null - } - - // 上一首 - prev() { - let id = this.__CURR__ - - switch (this.__PLAY_MODE__) { - case 'all': - id-- - if (id < 0) { - id = this.__LIST__.length - 1 - } - break - case 'random': - id = (Math.random() * this.__LIST__.length) >>> 0 - break - // single - default: - break - } - - this.play(id) - return Promise.resolve(this.__LIST__[id]) - } - - // 下一首 - next() { - let id = this.__CURR__ - - switch (this.__PLAY_MODE__) { - case 'all': - id++ - if (id >= this.__LIST__.length) { - id = 0 - } - break - case 'random': - id = (Math.random() * this.__LIST__.length) >>> 0 - break - // single - default: - break - } - - this.play(id) - return Promise.resolve(this.__LIST__[id]) - } - - // 播放 - play(id) { - // 播放列表里没有数据的话, 不作任何处理 - if (!this.__LIST__.length) { - return Promise.reject(this.__LIST__) - } - - // 有ID的话,不管之前是否在播放,都切换歌曲 - if (id !== undefined) { - let song = this.__LIST__[id] - if (song) { - this.__CURR__ = id - this.__IS_PLAYED__ = true - - this.__PLAYER__.pause() - this.__PLAYER__.currentTime = 0 - this.__PLAYER__.src = song.path - this.__PLAYER__.play() - - Anot.ls('last-play', id) - return Promise.resolve(song) - } - return Promise.reject('song not found') - } else { - if (!this.__IS_PLAYED__) { - this.__IS_PLAYED__ = true - this.__PLAYER__.play() - } - return Promise.resolve(true) - } - } - - // 暂停 - pause() { - if (!this.__IS_PLAYED__) { - return - } - this.__IS_PLAYED__ = false - - this.__PLAYER__.pause() - } - - // 切换静音 - mute() { - if (this.__CURR__ < 0) { - return false - } - this.__PLAYER__.muted = !this.__PLAYER__.muted - return this.__PLAYER__.muted - } - - // 跳到指定位置播放 - seek(time) { - if (this.__CURR__ < 0) { - return - } - this.__PLAYER__.currentTime = time - } -} - -util.inherits(AudioPlayer, EventEmitter) - -export default AudioPlayer