feat. OSD Lyrics | 增加桌面歌词功能 (#685)
* Add OSD Lyrics * tidy files * fix OSDLyrics: last line of lyrics not showing, performance * tidy files * make user can resize the lyrics window * Fix bug of initial window size * Fix: 1. auto resize osdlyrics window after packaging; 2. lyric parser problem with %; * tidy filesmaster
Shi Liang
4 years ago
committed by
GitHub
parent
d464e30d83
commit
85592142af
@ -0,0 +1,239 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Barlow, -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
user-select: none;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 0px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: block;
|
||||||
|
padding: 9px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(128, 128, 128, 0.800);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>OSD Lyrics</title>
|
||||||
|
<script>
|
||||||
|
const electron = process && process.versions && process.versions.hasOwnProperty('electron') ? window.require('electron') : null;
|
||||||
|
const ipcRenderer = electron ? electron.ipcRenderer : null;
|
||||||
|
const player_api = window.location.origin + "/player";
|
||||||
|
const lyrics_api = window.location.origin + "/api/lyric?id=";
|
||||||
|
const min_update_interval = 50;
|
||||||
|
const max_update_interval = 500;
|
||||||
|
song_id = null;
|
||||||
|
lyrics = null;
|
||||||
|
current_line = null;
|
||||||
|
current_index = 0;
|
||||||
|
next_time = 0;
|
||||||
|
function lyric_parser(lrc) {
|
||||||
|
if (!lrc) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
lines = lrc
|
||||||
|
.split('\n')
|
||||||
|
.map(nx => {
|
||||||
|
//nx = decodeURIComponent(x);
|
||||||
|
text = nx.split(']');
|
||||||
|
lrc = text[1];
|
||||||
|
if (!lrc) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
_time = text[0].split('[')[1];
|
||||||
|
if (!_time) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
time = _time.split(':')
|
||||||
|
min = Number(time[0]);
|
||||||
|
sec = Number(time[1]);
|
||||||
|
if (lrc.length < 1) {
|
||||||
|
return [min * 60 + sec, " "]
|
||||||
|
} else {
|
||||||
|
return [min * 60 + sec, lrc];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter(x => Boolean(x));
|
||||||
|
if (lines.length > 0) {
|
||||||
|
return lines;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function update_window_size() {
|
||||||
|
if (!ipcRenderer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
offsetHeight = document.getElementById('line1').offsetHeight + 4;
|
||||||
|
if (offsetHeight == window.innerHeight) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ipcRenderer.send('resizeOSDLyrics', offsetHeight);
|
||||||
|
}
|
||||||
|
function search_line(progress) {
|
||||||
|
for (i = 1; i < lyrics.length; i++) {
|
||||||
|
if (progress < lyrics[i][0]) {
|
||||||
|
current_index = i - 1;
|
||||||
|
next_time = lyrics[i][0];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
current_index = lyrics.length - 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
function translation_combine(lrc, tr) {
|
||||||
|
if (!lrc) {
|
||||||
|
lyrics = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!tr) {
|
||||||
|
lyrics = lrc.map(x => [x[0], x[1], null]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lyrics = new Array(lrc.length);
|
||||||
|
lrc_length = lrc.length;
|
||||||
|
t_length = tr.length;
|
||||||
|
for (i = 0, j = 0; i < lrc_length;) {
|
||||||
|
if (j >= t_length) {
|
||||||
|
lyrics[i] = [lrc[i][0], lrc[i][1], null];
|
||||||
|
i++;
|
||||||
|
} else {
|
||||||
|
lrc_time = lrc[i][0];
|
||||||
|
tr_time = tr[j][0];
|
||||||
|
if (lrc_time == tr_time) {
|
||||||
|
lyrics[i] = [lrc_time, lrc[i][1], tr[j][1]];
|
||||||
|
i++; j++;
|
||||||
|
} else if (lrc_time < tr_time) {
|
||||||
|
lyrics[i] = [lrc_time, lrc[i][1], null];
|
||||||
|
i++;
|
||||||
|
} else if (lrc_time > tr_time) {
|
||||||
|
while (lrc_time > tr[j][0] && j < t_length) {
|
||||||
|
j++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
j++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function update_display() {
|
||||||
|
document.getElementById("line1").innerHTML = current_line;
|
||||||
|
update_window_size();
|
||||||
|
}
|
||||||
|
function update_line(progress) {
|
||||||
|
next_update = max_update_interval;
|
||||||
|
if (!lyrics) {
|
||||||
|
current_line = "纯音乐，请欣赏";
|
||||||
|
} else {
|
||||||
|
lyrics_length = lyrics.length;
|
||||||
|
if (progress > lyrics[current_index][0]) {
|
||||||
|
next_index = current_index + 1;
|
||||||
|
if (next_index < lyrics_length) {
|
||||||
|
if (progress < lyrics[next_index][0]) {
|
||||||
|
next_update = (next_time - progress) * 1000;
|
||||||
|
} else {
|
||||||
|
next_next_index = next_index + 1;
|
||||||
|
if (next_next_index < lyrics_length) {
|
||||||
|
if (progress < lyrics[next_next_index][0]) {
|
||||||
|
current_index = next_index;
|
||||||
|
current = lyrics[next_index];
|
||||||
|
current_line = current[2] ? (current[1] + "<br>" + current[2]) : current[1];
|
||||||
|
next_time = lyrics[next_next_index][0];
|
||||||
|
next_update = (next_time - progress) * 1000;
|
||||||
|
} else {
|
||||||
|
search_line(progress);
|
||||||
|
current = lyrics[current_index];
|
||||||
|
current_line = current[2] ? (current[1] + "<br>" + current[2]) : current[1];
|
||||||
|
next_update = (next_time - progress) * 1000;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// next line is last line
|
||||||
|
current_index = next_index;
|
||||||
|
current = lyrics[next_index];
|
||||||
|
current_line = current[2] ? (current[1] + "<br>" + current[2]) : current[1];
|
||||||
|
next_update = max_update_interval;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// last line
|
||||||
|
next_update = max_update_interval;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
search_line(progress);
|
||||||
|
current = lyrics[current_index];
|
||||||
|
current_line = current[2] ? (current[1] + "<br>" + current[2]) : current[1];
|
||||||
|
next_update = (next_time - progress) * 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (next_update > max_update_interval) {
|
||||||
|
interval = parseInt(next_update / max_update_interval);
|
||||||
|
next_update = next_update / interval;
|
||||||
|
} else if (next_update < min_update_interval) {
|
||||||
|
next_update = min_update_interval;
|
||||||
|
}
|
||||||
|
setTimeout(update_lyrics, next_update);
|
||||||
|
update_display();
|
||||||
|
}
|
||||||
|
function get_lyrics(_song_id) {
|
||||||
|
var url = lyrics_api + _song_id;
|
||||||
|
fetch(url)
|
||||||
|
.then(
|
||||||
|
(_lyric) => {
|
||||||
|
_lyric
|
||||||
|
.text()
|
||||||
|
.then(
|
||||||
|
(text) => {
|
||||||
|
result = JSON.parse(text);
|
||||||
|
if (!result.lrc) {
|
||||||
|
lyrics = null;
|
||||||
|
update_line(_progress);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
_lyrics = lyric_parser(result.lrc.lyric);
|
||||||
|
_translation = lyric_parser(result.tlyric.lyric);
|
||||||
|
translation_combine(_lyrics, _translation);
|
||||||
|
current_index = 0;
|
||||||
|
update_line(_progress);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function update_lyrics() {
|
||||||
|
fetch(player_api)
|
||||||
|
.then(
|
||||||
|
(player) => {
|
||||||
|
player
|
||||||
|
.text()
|
||||||
|
.then((text) => {
|
||||||
|
_status = JSON.parse(text);
|
||||||
|
_song_id = _status.currentTrack.id;
|
||||||
|
_progress = _status.progress;
|
||||||
|
if (_song_id !== song_id) {
|
||||||
|
song_id = _song_id;
|
||||||
|
get_lyrics(_song_id);
|
||||||
|
} else {
|
||||||
|
update_line(_progress);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function init_lyrics() {
|
||||||
|
update_window_size();
|
||||||
|
update_lyrics();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onload="init_lyrics()">
|
||||||
|
<div id="line1">YesPlayMusic</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in new issue