Skip to content

Instantly share code, notes, and snippets.

@blueset

blueset/LRC translation combiner

Last active August 29, 2015 14:17
Show Gist options
  • Save blueset/ecb7268b4cb524d7aca0 to your computer and use it in GitHub Desktop.
Save blueset/ecb7268b4cb524d7aca0 to your computer and use it in GitHub Desktop.
Download ZIP
An LRC translation combiner. Helping LRC makers combining their lyrics translations easier. Available in English and Chinese at http://1a23.com/lyrictool/ .
Raw
LRC translation combiner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<title>LRC_translation_conbiner. by Eana Hufwe</title>
</head>
<body>
<style>
body{
background: #e7e9fd;
font-family: 'Roboto', "Droid Sans Fallback", "WenQuanYi Micro Hei", "微软雅黑", sans-serif;
font-weight: 400;
}
h1{
background: #2a36b1;
color: #fff;
margin: 0 -8px;
padding: 30px 30px;
font-weight: 300;
}
#captionwrap{
margin-left:22px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#convertbtn{
display: block;
background: #4d73ff;
padding: 5px;
margin: 5px auto;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
color:#fff;
text-decoration: none;
text-align: center;
width:100px;
}
#convertbtn:active{
box-shadow: 0 0px 5px rgba(0,0,0,0.5);
}
pre{
padding: 5px;
border-radius: 5px;
background: #d0d9ff;
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.2);
}
footer{
text-align: center;
font-size: 8pt;
}
footer a{
text-decoration: none;
}
#lang a{
color:white;
}
.row{
vertical-align: top;
}
.row textarea{
float: left;
margin: 0 3px;
}
#origin{
width:48.2%;
text-align: right;
}
#translate{
width:48.2%;
}
</style>
<p id="lang" style="float:right;"><a href="javascript:void(0)" onclick="switchLang('zh')">中文</a> <a href="javascript:void(0)" onclick="switchLang('en')">English</a></p>
<h1 id="title">LRC translation combiner <small>by Eana Hufwe</small></h1>
<p id="captionwrap"><span id="caption">Please arrange the lyric line by line correspondingly. Divider: </span><input type="text" name="divider" id="divider" placeholder=" / " value=" / "></p>
<hr>
<div class="row clearfix">
<textarea name="origin" onkeyup="textAreaAdjust(this)" placeholder="Original Lyrics" id="origin" cols="30" rows="3"></textarea>
<textarea name="translate" onkeyup="textAreaAdjust(this)" placeholder="Translated Lyrics" id="translate" cols="30" rows="3"></textarea>
</div>
<a href="javascript:void(0)" onclick="convert()" id="convertbtn">Combine</a>
<pre id="result">
Result Goes here. / 结果在此显示。
</pre>
<hr>
<footer>
<a href="http://ilove.1a23.com">iBe - 1A23 Lab</a> | <a href="http://1a23.com" id="link1a23">Blueset Studio</a>
</footer>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
function convert () {
originDom = document.getElementById("origin");
translateDom = document.getElementById("translate");
originArray = originDom.value.split("\n");
translateArray = translateDom.value.split("\n");
divider = document.getElementById("divider").value;
difference = originArray.length - translateArray.length;
alertMessage = difference > 0 ? strOriLong : strTraLong;
alertMessage += strCont;
if (difference != 0){
if(!confirm(alertMessage)){
return;
}
}
maxlength = originArray.length > translateArray.length ? originArray.length : translateArray.length;
var resultArray = new Array;
resultDom = document.getElementById("result");
resultDom.innerText = "";
for (var i = 0; i <= maxlength - 1; i++) {
resultArray[i] = originArray[i].replace(/^\s*/gm, '');
if (originArray[i] != "" && translateArray[i] != ""){resultArray[i] += divider;}
resultArray[i] += translateArray[i].replace(/^\s*/gm, '');
resultDom.innerHTML += resultArray[i];
resultDom.innerHTML += "<br>";
};
}
function switchLang (lang) {
if(lang == "zh"){
strOriLong = "左栏歌词比右栏歌词长";
strTraLong = "右栏歌词比左栏歌词长";
strCont = "，是否继续？";
document.getElementById("origin").setAttribute("placeholder","左栏歌词");
document.getElementById("translate").setAttribute("placeholder","右栏歌词");
document.getElementById("title").innerHTML = "LRC 用歌词翻译合并工具 <small>制作: 蓝色之风</small>";
document.getElementById("caption").innerText = "请将两栏歌词逐行对应。分隔符：";
document.getElementById("convertbtn").innerText = "合并";
document.getElementById("link1a23").innerText = "蓝色之风工作室";
document.title = "LRC 用歌词翻译合并工具";
}
if(lang == "en"){
strOriLong = "Original lyrics is longer than translated lyric";
strTraLong = "Translated lyrics is longer than original lyric";
strCont = ", do you want to continue?";
document.getElementById("origin").setAttribute("placeholder","Original Lyrics");
document.getElementById("translate").setAttribute("placeholder","Translated Lyrics");
document.getElementById("title").innerHTML = "LRC translation combiner <small>by Eana Hufwe</small>";
document.getElementById("caption").innerText = "Please arrange the lyric line by line correspondingly. Divider: ";
document.getElementById("convertbtn").innerText = "Combine";
document.getElementById("link1a23").innerText = "Blueset Studio";
document.title = "LRC_translation_conbiner. by Eana Hufwe";
}
}
window.onload = function () {
textAreaAdjust(document.getElementById("origin"));
textAreaAdjust(document.getElementById("translate"));
switchLang("en");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment