From 06bf60ad49c33e77360137918d9a49a5d1f2c6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Sun, 16 Jan 2022 23:30:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E9=9F=B3=E4=B9=90?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/font.css | 27 +++- css/style.css | 164 ++++++++++++++++++++- img/pause.png | Bin 0 -> 4052 bytes img/play.png | Bin 0 -> 4114 bytes index.html | 68 +++++++-- js/music.js | 396 ++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 634 insertions(+), 21 deletions(-) create mode 100644 img/pause.png create mode 100644 img/play.png create mode 100644 js/music.js diff --git a/css/font.css b/css/font.css index 7da64c9..76c35d3 100644 --- a/css/font.css +++ b/css/font.css @@ -15,9 +15,10 @@ @font-face { font-family: "iconfont"; - src: url('../font/font_2831425_ekwvaabvo8l.woff2') format('woff2'), - url('../font/font_2831425_ekwvaabvo8l.woff') format('woff'), - url('../font/font_2831425_ekwvaabvo8l.ttf') format('truetype'); + /* Project id 2831425 */ + src: url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.woff2?t=1642345600138') format('woff2'), + url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.woff?t=1642345600138') format('woff'), + url('//at.alicdn.com/t/font_2831425_312vsfjkcz9.ttf?t=1642345600138') format('truetype'); } .iconfont { @@ -28,6 +29,26 @@ -moz-osx-font-smoothing: grayscale; } +.icon-music:before { + content: "\e986"; +} + +.icon-next-one:before { + content: "\e609"; +} + +.icon-next-one-copy:before { + content: "\ebd5"; +} + +.icon-pause:before { + content: "\e733"; +} + +.icon-play:before { + content: "\e65c"; +} + .icon-undo:before { content: "\e875"; } diff --git a/css/style.css b/css/style.css index 21f43bd..586f26a 100644 --- a/css/style.css +++ b/css/style.css @@ -203,6 +203,18 @@ i.iconfont.icon-yinhao-copy { font-size: 1.10rem; } +.close-music { + display: none; + justify-content: center; + background: rgb(0 0 0 / 25%); + padding: 4px 0px; + animation: fade; + -webkit-animation: fade 0.5s; + -moz-animation: fade 0.5s; + -o-animation: fade 0.5s; + -ms-animation: fade 0.5s; +} + /*时间卡片*/ .time { width: 100%; @@ -349,6 +361,10 @@ span.link-name { } /*box*/ +.box-left { + flex: 0 44%; + min-width: 400px; +} .box { position: fixed; @@ -377,8 +393,8 @@ span.link-name { animation: fade .3s; padding: 40px; display: flex; - flex-direction: column; - justify-content: space-evenly; + flex-direction: row; + justify-content: space-between; } .upnote { @@ -404,6 +420,150 @@ i.iconfont.icon-close { font-size: 1.45rem; } +/*Aplayer*/ +.box-right { + flex: 0 54%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.aplayer { + background: transparent !important; + width: 100%; + border-radius: 6px !important; + margin-right: 18px; +} + +.aplayer.aplayer-withlrc .aplayer-pic { + border-radius: 6px !important; +} + +/*歌曲名称*/ +.aplayer .aplayer-info .aplayer-music .aplayer-title { + font-size: 16px !important; +} + +/*音乐列表*/ +.aplayer.aplayer-withlist .aplayer-list { + margin-top: 8px; +} + +.aplayer .aplayer-list ol li.aplayer-list-light { + background: #ffffff57 !important; + border-radius: 6px !important; +} + +.aplayer .aplayer-list ol li:hover { + background: #ffffff57 !important; + border-radius: 6px !important; +} + +.aplayer .aplayer-list ol li { + border-top: 1px solid transparent !important; +} + +.aplayer.aplayer-withlist .aplayer-info { + border-bottom: 1px solid transparent !important; +} + +/*控制面板 - Bug*/ +.aplayer .aplayer-info .aplayer-controller { + display: none !important; +} + +/*歌词间距*/ +.aplayer .aplayer-lrc { + margin: 4px 0 0px !important; + height: 34px !important; +} + +/*歌词大小*/ +.aplayer .aplayer-lrc p.aplayer-lrc-current { + font-size: 14.5px !important; +} + +/*全局字体颜色*/ +.aplayer .aplayer-info .aplayer-music .aplayer-title, +.aplayer .aplayer-info .aplayer-music .aplayer-author, +.aplayer .aplayer-lrc p, +span.aplayer-list-title, +span.aplayer-list-author, +span.aplayer-list-index { + color: white !important; +} + +/*全局背景*/ +.aplayer .aplayer-lrc:after, +.aplayer .aplayer-lrc:before { + background: transparent !important; +} + +/*Aplayer结束*/ + +/*音乐播放器*/ +#music { + display: none; +} + +.music { + width: 100%; + background: rgb(0 0 0 / 25%); + backdrop-filter: blur(10px); + padding: 20px; + border-radius: 6px; + height: 165px; + display: flex; + justify-content: center; + flex-direction: column; +} + +.music-all { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: 100%; +} + +.music-button { + display: flex; + align-items: center; +} + +.music-control { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + width: 100%; +} + +i.iconfont.icon-play, +i.iconfont.icon-pause { + font-size: 2.25rem; +} + +i#last, +i#next { + font-size: 2.0rem; +} + +.music-text { + font-size: 1.15rem; + text-overflow: ellipsis; + max-width: 160px; +} + +#music-open, +#music-close { + background: rgb(255 255 255 / 20%); + padding: 2px 8px; + border-radius: 6px; + margin: 0px 6px; +} + /*移动端页面切换按钮*/ i.iconfont.icon-bars, i.iconfont.icon-times { diff --git a/img/pause.png b/img/pause.png new file mode 100644 index 0000000000000000000000000000000000000000..c3ce9818759ad51ffac91d1d1a201893cdaf1393 GIT binary patch literal 4052 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 V{q&`_TS$`+*jhVURj}A`{{bPR7w`Z8 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index c5a4872..a820270 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,11 @@ + + + + diff --git a/js/music.js b/js/music.js new file mode 100644 index 0000000..3d76421 --- /dev/null +++ b/js/music.js @@ -0,0 +1,396 @@ +/* 右键音乐图标 */ +document.getElementById("music").onmousedown = function (e) { + if (e.button == 2 && $(document).width() >= 990) { + $('#box').css("display", "block"); + $('#row').css("display", "none"); + $('#more').css("cssText", "display:none !important"); + } +} + +const ap = new APlayer({ + container: document.getElementById('aplayer'), + order: 'random', + preload: 'auto', + listMaxHeight: '336px', + volume: 0.5, + mutex: true, + lrcType: 3, + audio: [{ + name: "夜曲", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%A4%9C%E6%9B%B2.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M0000024bjiL2aocxT_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%A4%9C%E6%9B%B2.lrc", + theme: "#171513" + }, + { + name: "断了的弦", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%96%AD%E4%BA%86%E7%9A%84%E5%BC%A6.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000001BGzMs369FzU_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%96%AD%E4%BA%86%E7%9A%84%E5%BC%A6.lrc", + theme: "#0057a7" + }, + { + name: "花海", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E8%8A%B1%E6%B5%B7.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E8%8A%B1%E6%B5%B7.lrc", + theme: "#954a17" + }, + { + name: "发如雪", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8F%91%E5%A6%82%E9%9B%AA.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M0000024bjiL2aocxT_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8F%91%E5%A6%82%E9%9B%AA.lrc", + theme: "#171513" + }, + { + name: "稻香", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.lrc", + theme: "#e3ae55" + }, + { + name: "七里香", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%83%E9%87%8C%E9%A6%99.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%83%E9%87%8C%E9%A6%99.lrc", + theme: "#395732" + }, + { + name: "晴天", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%99%B4%E5%A4%A9.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%99%B4%E5%A4%A9.lrc", + theme: "#08362e" + }, + { + name: "以父之名", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%BB%A5%E7%88%B6%E4%B9%8B%E5%90%8D.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%BB%A5%E7%88%B6%E4%B9%8B%E5%90%8D.lrc", + theme: "#08362e" + }, + { + name: "本草纲目", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%9C%AC%E8%8D%89%E7%BA%B2%E7%9B%AE.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%9C%AC%E8%8D%89%E7%BA%B2%E7%9B%AE.lrc", + theme: "#171513" + }, + { + name: "一路向北", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%80%E8%B7%AF%E5%90%91%E5%8C%97.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000002MAeob3zLXwZ_2.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%80%E8%B7%AF%E5%90%91%E5%8C%97.lrc", + theme: "#383a37" + }, + { + name: "半岛铁盒", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8D%8A%E5%B2%9B%E9%93%81%E7%9B%92.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000004MGitN0zEHpb_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8D%8A%E5%B2%9B%E9%93%81%E7%9B%92.lrc", + theme: "#f0a059" + }, + { + name: "简单爱", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%AE%80%E5%8D%95%E7%88%B1.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000000I5jJB3blWeN_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%AE%80%E5%8D%95%E7%88%B1.lrc", + theme: "#c21c0f" + }, + { + name: "青花瓷", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E9%9D%92%E8%8A%B1%E7%93%B7.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002eFUFm2XYZ7z_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E9%9D%92%E8%8A%B1%E7%93%B7.lrc", + theme: "#000000" + }, + { + name: "烟花易冷", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000000bviBl4FjTpO_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7.lrc", + theme: "#86b5bb" + }, + { + name: "给我一首歌的时间", + artist: "周杰伦", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%BB%99%E6%88%91%E4%B8%80%E9%A6%96%E6%AD%8C%E7%9A%84%E6%97%B6%E9%97%B4.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%BB%99%E6%88%91%E4%B8%80%E9%A6%96%E6%AD%8C%E7%9A%84%E6%97%B6%E9%97%B4.lrc", + theme: "#e3ae55" + }, + { + name: "千里之外", + artist: "周杰伦 / 费玉清", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E8%B4%B9%E7%8E%89%E6%B8%85-%E5%8D%83%E9%87%8C%E4%B9%8B%E5%A4%96.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E8%B4%B9%E7%8E%89%E6%B8%85-%E5%8D%83%E9%87%8C%E4%B9%8B%E5%A4%96.lrc", + theme: "#171513" + }, + { + name: "珊瑚海", + artist: "周杰伦 / 梁心颐", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E6%A2%81%E5%BF%83%E9%A2%90-%E7%8F%8A%E7%91%9A%E6%B5%B7.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M0000024bjiL2aocxT_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E6%A2%81%E5%BF%83%E9%A2%90-%E7%8F%8A%E7%91%9A%E6%B5%B7.lrc", + theme: "#181714" + }, + { + name: "单车", + artist: "陈奕迅", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%95%E8%BD%A6.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000004S8YQr3UmEbG_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%95%E8%BD%A6.lrc", + theme: "#32201f" + }, + { + name: "浮夸", + artist: "陈奕迅", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000003J6fvc0bVJon_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.lrc", + theme: "#040402" + }, + { + name: "十年", + artist: "陈奕迅", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%81%E5%B9%B4.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000003J6fvc0bVJon_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%81%E5%B9%B4.lrc", + theme: "#040402" + }, + { + name: "一丝不挂", + artist: "陈奕迅", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E9%99%88%E5%A5%95%E8%BF%85-%E4%B8%80%E4%B8%9D%E4%B8%8D%E6%8C%82.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001sjRhH0wqa4Q_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E9%99%88%E5%A5%95%E8%BF%85-%E4%B8%80%E4%B8%9D%E4%B8%8D%E6%8C%82.lrc", + theme: "#0d0d0d" + }, + { + name: "麻雀", + artist: "李荣浩", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E9%BA%BB%E9%9B%80.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000003P3ByD1n8nBK_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E9%BA%BB%E9%9B%80.lrc", + theme: "#849fbd" + }, + { + name: "老街", + artist: "李荣浩", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E8%80%81%E8%A1%97.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001LP8hk0a6pOp_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E8%80%81%E8%A1%97.lrc", + theme: "#e0d7bb" + }, + { + name: "年少有为", + artist: "李荣浩", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000000RLvtE1eDyOs_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.lrc", + theme: "#d2ddd5" + }, + { + name: "爸爸妈妈", + artist: "李荣浩", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E7%88%B8%E7%88%B8%E5%A6%88%E5%A6%88.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001fi1zG0EjU2u_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E7%88%B8%E7%88%B8%E5%A6%88%E5%A6%88.lrc", + theme: "#aec3ce" + }, + { + name: "干杯", + artist: "五月天", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%B9%B2%E6%9D%AF.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001fbipy4azgKM_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%B9%B2%E6%9D%AF.lrc", + theme: "#0f1e32" + }, + { + name: "倔强", + artist: "五月天", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%80%94%E5%BC%BA.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M0000006MmDz4Hl2Ud_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%80%94%E5%BC%BA.lrc", + theme: "#b3dae1" + }, + { + name: "你不是真正的快乐", + artist: "五月天", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E4%BD%A0%E4%B8%8D%E6%98%AF%E7%9C%9F%E6%AD%A3%E7%9A%84%E5%BF%AB%E4%B9%90.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M0000020I7sO0ayXhN_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E4%BD%A0%E4%B8%8D%E6%98%AF%E7%9C%9F%E6%AD%A3%E7%9A%84%E5%BF%AB%E4%B9%90.lrc", + theme: "#0a0708" + }, + { + name: "派对动物", + artist: "五月天", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E6%B4%BE%E5%AF%B9%E5%8A%A8%E7%89%A9.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002fRO0N4FftzY_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2F%E4%BA%94%E6%9C%88%E5%A4%A9-%E6%B4%BE%E5%AF%B9%E5%8A%A8%E7%89%A9.lrc", + theme: "#d0e8f2" + }, + { + name: "Numb", + artist: "Linkin Park", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FLinkin%20Park-Numb.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000000C4MQU17Phga_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FLinkin%20Park-Numb.lrc", + theme: "#0d0d0d" + }, + { + name: "In The End", + artist: "Linkin Park", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FLinkin%20Park-In%20The%20End.mp3", + cover: "https://y.qq.com/music/photo_new/T002R300x300M000004ImTxE1OkGqR_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FLinkin%20Park-In%20The%20End.lrc", + theme: "#270408" + }, + { + name: "All About Us", + artist: "He Is We / Owl City", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FHe%20Is%20We%26Owl%20City-All%20About%20Us.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000004b2Efp2dEWlo_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FHe%20Is%20We%26Owl%20City-All%20About%20Us.lrc", + theme: "#ee5a75" + }, + { + name: "You're Not Alone", + artist: "Owl City / Britt Nicole", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City%26Britt%20Nicole-You're%20Not%20Alone.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002ke9Cq3KeWYj_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City%26Britt%20Nicole-You're%20Not%20Alone.lrc", + theme: "#eff8fa" + }, + { + name: "Good Time", + artist: "Owl City / Carly Rae Jepsen", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City%26Carly%20Rae%20Jepsen-Good%20Time.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001mat8F3tAzsu_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City%26Carly%20Rae%20Jepsen-Good%20Time.lrc", + theme: "#dd111c" + }, + { + name: "Unbelievable", + artist: "Owl City / Hanson", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City%26Hanson-Unbelievable.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000004O8zk80vaqfl_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City%26Hanson-Unbelievable.lrc", + theme: "#de7227" + }, + { + name: "Fireflies", + artist: "Owl City", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City-Fireflies.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002FEF7L03Cv7T_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City-Fireflies.lrc", + theme: "#33658d" + }, + { + name: "Gold", + artist: "Owl City", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City-Gold.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000001Y76KO1Vpg7b_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City-Gold.lrc", + theme: "#94c1de" + }, + { + name: "The Saltwater Room", + artist: "Owl City", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City-The%20Saltwater%20Room.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002FEF7L03Cv7T_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City-The%20Saltwater%20Room.lrc", + theme: "#33658d" + }, + { + name: "When Can I See You Again？", + artist: "Owl City", + url: "https://s-sh-2127-music.oss.dogecdn.com/song%2FOwl%20City-When%20Can%20I%20See%20You%20Again%EF%BC%9F.mp3", + cover: "https://y.gtimg.cn/music/photo_new/T002R300x300M0000034UcqG3UwYdy_1.jpg?max_age=2592000", + lrc: "https://s-sh-2127-music.oss.dogecdn.com/lrc%2FOwl%20City-When%20Can%20I%20See%20You%20Again%EF%BC%9F.lrc", + theme: "#0e1c3a" + } + ] +}); + +/* 音乐通知及控制 */ +ap.on('play', function () { + iziToast.info({ + iconUrl: './img/play.png', + title: '音乐通知', + message: '音乐开始播放' + }); + $("#play").html(""); + $("#music-name").html($(".aplayer-title").text()); + $("#music-artist").html($(".aplayer-author").text()); +}); + +ap.on('pause', function () { + $("#play").html(""); +}); + +/* 一言与音乐切换 */ +$('#close-music').on('click', function () { + $('#hitokoto').css("display", "none"); + $('#music').css("display", "flex"); +}); + +$("#hitokoto").hover(function () { + $('#close-music').css("display", "flex"); +}, function () { + $('#close-music').css("display", "none"); +}) + +$('#music-close').on('click', function () { + $('#music').css("display", "none"); + $('#hitokoto').css("display", "flex"); +}); + +/* 上下曲 */ +$('#play').on('click', function () { + ap.toggle(); + $("#music-name").html($(".aplayer-title").text()); + $("#music-artist").html($(".aplayer-author").text()); +}); + +$('#last').on('click', function () { + ap.skipBack(); + $("#music-name").html($(".aplayer-title").text()); + $("#music-artist").html($(".aplayer-author").text()); +}); + +$('#next').on('click', function () { + ap.skipForward(); + $("#music-name").html($(".aplayer-title").text()); + $("#music-artist").html($(".aplayer-author").text()); +}); +/* +$("#a").click(function () { + $("#b").toggle() +}) +*/ +/* 打开音乐列表 */ +$('#music-open').on('click', function () { + if ($(document).width() >= 990) { + $('#box').css("display", "block"); + $('#row').css("display", "none"); + $('#more').css("cssText", "display:none !important"); + } +}); \ No newline at end of file