caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

底栏增加歌词显示

Browse Source
This commit is contained in:
底层用户 2022-01-18 12:31:38 +08:00
parent 7ff8f34dbd
commit 5722d17f43
3 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/style.css
View File

@ -614,6 +614,11 @@ footer {
opacity: 0.8;
}
.lrc-show {
/*播放音乐时底栏歌词*/
font-size: 1.15rem;
}
/*弹窗样式*/
.iziToast {
background: rgb(0 0 0 / 45%) !important;

2
index.html
View File

@ -369,7 +369,7 @@
</main>
<!-- 版权信息 -->
<footer id="footer" class="fixed-bottom footer">
<div class="power">Copyright&nbsp;&copy;&nbsp;2020
<div class="power" id="lrc">Copyright&nbsp;&copy;&nbsp;2020
<script>
document.write(' - ' + (new Date()).getFullYear())
</script>&nbsp;<a href="https://imsyy.top">無名</a>&nbsp;&amp;&nbsp;

49
js/music.js
View File

@ -3,7 +3,7 @@ const ap = new APlayer({
order: 'random',
preload: 'auto',
listMaxHeight: '336px',
volume: 0.5,
volume: 0.3,
mutex: true,
lrcType: 3,
audio: [{
@ -126,6 +126,46 @@ const ap = new APlayer({
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-%E9%9C%8D%E5%85%83%E7%94%B2.mp3",
cover: "https://y.qq.com/music/photo_new/T002R300x300M000000OixvE1YjIqd_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-%E9%9C%8D%E5%85%83%E7%94%B2.lrc",
theme: "#295249"
},
{
name: "兰亭序",
artist: "周杰伦",
url: "https://s-sh-2127-music.oss.dogecdn.com/song%2F%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%85%B0%E4%BA%AD%E5%BA%8F.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-%E5%85%B0%E4%BA%AD%E5%BA%8F.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-%E6%9E%AB.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-%E6%9E%AB.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-%E5%A4%A9%E6%B6%AF%E8%BF%87%E5%AE%A2.mp3",
cover: "https://y.qq.com/music/photo_new/T002R300x300M000001uqejs3d6EID_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%A9%E6%B6%AF%E8%BF%87%E5%AE%A2.lrc",
theme: "#b88e16"
},
{
name: "千里之外",
artist: "周杰伦 / 费玉清",
@ -332,10 +372,17 @@ ap.on('play', function () {
});
$("#play").html("<i class='iconfont icon-pause'>");
$("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
if ($(document).width() >= 990) {
window.lrc = setInterval(function () {
$("#lrc").html("<span class='lrc-show'><i class='iconfont icon-music'></i> " + $(".aplayer-lrc-current").text() + " <i class='iconfont icon-music'></i></span>");
}, 500);
}
});
ap.on('pause', function () {
$("#play").html("<i class='iconfont icon-play'>");
clearInterval(window.lrc);
$("#lrc").html("Copyright © 2020-2022 <a href='https://imsyy.top'>無名</a> & Made by <a href='https://github.com/imsyy/home' target='_blank'>imsyy</a>");
});
/* 一言与音乐切换 */