替換 marumaru 播放的影片成你指定的 youtube 影片，方便用純音樂版練歌，也可以調整歌詞延遲
// ==UserScript==
// @name 替換 marumaru 影片與歌詞延遲
// @name:en substitute marumaru video, and offsets for lyrics
// @name:zh-TW 替換 marumaru 影片與歌詞延遲
// @description 替換 marumaru 播放的影片成你指定的 youtube 影片，方便用純音樂版練歌，也可以調整歌詞延遲
// @description:en substitute marumaru video to your desire youtube video, also adjust offset for lyrics
// @description:zh-TW 替換 marumaru 播放的影片成你指定的 youtube 影片，方便用純音樂版練歌，也可以調整歌詞延遲
// @license MIT
// @namespace https://greasyfork.org/users/1303696
// @version 1.1
// @author xswzaq44321
// @match https://www.jpmarumaru.com/tw/JPSongPlay*
// @run-at document-end
// @icon https://www.google.com/s2/favicons?sz=64&domain=jpmarumaru.com
// @grant GM.getValue
// @grant GM.setValue
// ==/UserScript==
function fromHTML(html, trim = true) {
// Process the HTML string.
html = trim ? html.trim() : html;
if (!html) return null;
// Then set up a new template element.
const template = document.createElement('template');
template.innerHTML = html;
const result = template.content.children;
// Then return either an HTMLElement or HTMLCollection,
// based on whether the input HTML had one or more roots.
if (result.length === 1) return result[0];
return result;
}
(async function() {
'use strict';
if(!document.querySelector("#VideoID").textContent){ // probabliy no youtube player available, abort execution
return;
}
const songPK = document.querySelector("#SongPK").textContent
let state = await GM.getValue(songPK, {"instrumental": false, "VideoID": "", "offset": 0});
let messages = {
"btn": Intl.DateTimeFormat().resolvedOptions().locale == 'zh-TW' ? "切換影片" : "switch video",
"regFail": Intl.DateTimeFormat().resolvedOptions().locale == 'zh-TW' ? "無法解析替代影片 ID" : "cannot resole video ID",
"vidIDEmpty": Intl.DateTimeFormat().resolvedOptions().locale == 'zh-TW' ? "沒有可替換的影片 ID" : "no available video ID to substitute",
"resetOffset": Intl.DateTimeFormat().resolvedOptions().locale == 'zh-TW' ? "重設歌詞延遲 (sec)" : "reset offset for lyrics (sec)",
}
var switchBtn = fromHTML(`<a href="javascript:;" class="easyui-linkbutton l-btn l-btn-small" style="margin-bottom:4px;" group="" id=""><span class="l-btn-left"><span class="l-btn-text">${state.instrumental ? "🎼" : "🎤"}${messages.btn}</span></span></a>`);
var VideoIDInput = fromHTML(`<input style="margin:0 3px 0 3px; width: 10em" type="text" placeholder="${state.VideoID}">`);
var resetOffsetBtn = fromHTML(`<a href="javascript:;" class="easyui-linkbutton l-btn l-btn-small" style="margin-bottom:4px;" group="" id=""><span class="l-btn-left"><span class="l-btn-text">${messages.resetOffset}</span></span></a>`);
var offsetInput = fromHTML(`<input type="number" id="LSToffset" name="LSToffset" value="0" step="0.1" style="width: 5em; margin-left:3px">`);
var elementWrapper = fromHTML(`<div style="padding:0 0 5px 5px"></div>`);
elementWrapper.appendChild(switchBtn);
elementWrapper.appendChild(VideoIDInput);
if(state.instrumental){
elementWrapper.appendChild(resetOffsetBtn);
elementWrapper.appendChild(offsetInput);
}
const reg = new RegExp(/(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu\.be\/|^)([A-Za-z0-9_-]{11})(?:&.*)?$/)
switchBtn.onclick = function(){
let VideoID = state.VideoID;
if(VideoIDInput.value){
let regRes = reg.exec(VideoIDInput.value);
if(!regRes){
alert(`${messages.regFail}`);
return;
}
VideoID = regRes[1];
}
if(!VideoID){
alert(`${messages.vidIDEmpty}`);
return;
}
state.instrumental = !state.instrumental;
state.VideoID = VideoID;
GM.setValue(songPK, state);
location.reload();
};
resetOffsetBtn.onclick = function(){
unsafeWindow.LST = offsetInput.value = 0;
unsafeWindow.currentLyries = -1;
if(state.instrumental){
state.offset = 0;
GM.setValue(songPK, state);
}
}
offsetInput.oninput = function(){
unsafeWindow.LST = parseFloat(this.value);
unsafeWindow.currentLyries = -1;
}
offsetInput.onchange = function(){
if(state.instrumental){
state.offset = parseFloat(this.value);
GM.setValue(songPK, state);
}
}
document.querySelector("#left_col > div:nth-child(2) > div.main > div.main-content.cf > div.clear").nextElementSibling.after(elementWrapper);
if(state.instrumental && state.VideoID){
document.querySelector("#VideoID").textContent = state.VideoID
offsetInput.value = state.offset;
offsetInput.oninput();
}
})();