diff --git a/css/style.css b/css/style.css index c938edd9..336d84f7 100644 --- a/css/style.css +++ b/css/style.css @@ -448,7 +448,7 @@ header.mdui-appbar.mdui-appbar-fixed { font-size: calc(8px + 1vmin); } [data-player]>.info>[data-lrc]>[data-lrc="inner"] { - padding: 80px 0; + padding: 20px 0; } } @@ -519,10 +519,14 @@ header.mdui-appbar.mdui-appbar-fixed { transform: scaleX(0); opacity: 0; } - 100% { + 90% { transform: scaleX(1); opacity: 1; } + 100% { + transform: scaleX(1); + opacity: 0; + } } [data-lrc] p { @@ -532,7 +536,7 @@ header.mdui-appbar.mdui-appbar-fixed { } [data-lrc] p.mdui-text-color-theme-accent, -[data-lrc] p.mdui-text-color-theme-accent+p { +[data-lrc] p.mdui-text-color-theme-accent:not(:empty)+p { opacity: 1; } diff --git a/js/script.js b/js/script.js index 384d5f9b..a1b8355a 100644 --- a/js/script.js +++ b/js/script.js @@ -10,6 +10,7 @@ ap.on("play", async function() { //沒歌就隨機播放 if (ap.list.audios.length == 0) play_random(); updateMediaSession() + lrc.load(`[00:00.000]歌詞讀取中`) // 歌詞清空 }) ap.on("loadedmetadata", async function() { lrc.load(`[00:00.000]歌詞讀取中`) @@ -569,6 +570,12 @@ async function show_now() { html += `
${text}
` } $('div[data-lrc="inner"]').html(html) + let nowLrc = lrc.select(ap.audio.currentTime) + if (nowLrc > -1) { + $('[data-player] div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent') + let sh = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('[data-player] .info>div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight + $('[data-player] .info>div[data-lrc]').scrollTop(sh); + } } ap.on("pause", function() { @@ -665,6 +672,12 @@ function show_lrc() { html += `${text}
` } $("#content>div[data-lrc]>[data-lrc=\"inner\"]").html(html) + let nowLrc = lrc.select(ap.audio.currentTime) + if (nowLrc > -1) { + $('#content>div[data-lrc]>div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent') + let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight * 2 + $('#content>div[data-lrc]').animate({ scrollTop: top }, 0); + } } ap.on("timeupdate", function() { // 歌詞亮亮 @@ -674,7 +687,7 @@ function show_lrc() { if (before != after && nowLrc > -1) { $('#content>div[data-lrc]>div[data-lrc="inner"] p').removeClass('mdui-text-color-theme-accent') $('#content>div[data-lrc]>div[data-lrc="inner"] p').eq(nowLrc).addClass('mdui-text-color-theme-accent') - let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight + let top = $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].offsetTop - $('div[data-lrc]').height() / 2 - $('div[data-lrc="inner"] p.mdui-text-color-theme-accent')[0].clientHeight * 2 $('#content>div[data-lrc]').animate({ scrollTop: top }, 300); } }); diff --git a/package.json b/package.json index cfc07cde..46ec5273 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pokaplayer", - "version": "0.4.0", + "version": "0.4.1", "description": "", "main": "index.js", "scripts": {