You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
9.2 KiB
239 lines
9.2 KiB
4 years ago
|
<!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>
|