挺有用的一個網頁應用，主要功能是將LRC歌詞格式轉換爲STR字幕格式，同時提供Base64解碼工具。
主要功能
1. LRC轉STR轉換器
輸入：用戶可以粘貼LRC歌詞或上傳LRC文件
轉換：點擊"轉換爲STR"按鈕將LRC轉換爲STR格式
輸出：顯示轉換後的STR字幕，可下載或保存
2. Base64解碼工具
支持解碼Base64編碼的文本
可選擇不同編碼格式(UTF-8, GBK, Big5)
提供複製解碼結果的功能
技術實現
前端框架：使用jQuery簡化DOM操作
界面佈局：採用Flexbox實現響應式佈局
核心功能：
LRC解析：使用正則表達式提取時間標籤和歌詞文本
時間格式轉換：將LRC時間格式(mm:ss.xx)轉換爲STR時間格式(hh:mm:ss,mmm)
文件處理：支持文件上傳和下載
Base64解碼：使用瀏覽器內置的
atob()函數
用戶體驗優化：
添加了提示框(toast)顯示操作反饋
改進了複製功能，支持現代Clipboard API和傳統方法
提供文件導入/導出功能
使用場景
這個工具適合需要將音樂歌詞(LRC格式)轉換爲視頻字幕(STR格式)的用戶，例如：
音樂視頻製作者
卡拉OK系統開發者
需要處理字幕格式轉換的用戶
Base64解碼工具可以作爲輔助功能，用於處理編碼的文本內容。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LRC↔STR雙向轉換工具</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<style>
.container { display: flex; gap: 20px; padding: 20px; }
.section { flex: 1; border: 1px solid #ccc; padding: 15px; border-radius: 5px; }
textarea { width: 100%; height: 200px; margin: 10px 0; padding: 5px; font-family: Arial; }
button { background: #4CAF50; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-right: 10px; }
button:hover { background: #45a049; }
.file-name { width: 150px; margin-left: 5px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; }
.file-input-label { display: inline-block; padding: 6px 12px; background: #e0e0e0; border-radius: 4px; cursor: pointer; margin-left: 5px; }
.file-input-label:hover { background: #d0d0d0; }
input[type="file"] { display: none; }
.batch-section { margin-top: 30px; border-top: 2px solid #eee; padding-top: 20px; }
.batch-buttons { display: flex; gap: 15px; margin: 15px 0; }
.batch-box { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 10px 0; }
.progress-bar { height: 20px; background: #e9ecef; border-radius: 4px; overflow: hidden; margin: 10px 0; display: none; }
.progress-fill { height: 100%; background: #4CAF50; transition: width 0.3s ease; }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 4px; z-index: 1000; display: none; }
</style>
</head>
<body>
<div class="toast" id="toast"></div>
<div class="container">
<div class="section">
<h3>LRC歌詞輸入</h3>
<textarea id="lrcInput" placeholder="粘貼LRC歌詞..."></textarea>
<div>
<button onclick="downloadLRC()">下載LRC</button>
<input type="text" id="lrcFilename" placeholder="文件名（默認：lyrics.lrc）" class="file-name">
<input type="file" id="lrcFileInput" accept=".lrc" onchange="loadLRCFile(this)">
<label for="lrcFileInput" class="file-input-label">導入LRC文件</label>
</div>
</div>
<div class="section converter-section">
<button onclick="convertLRCToSTR()">轉換爲STR →</button>
<button onclick="convertSTRToLRC_UI()" style="margin-top:10px;">← 轉換爲LRC</button>
</div>
<div class="section">
<h3>STR字幕輸出</h3>
<textarea id="strOutput" placeholder="STR字幕將在此顯示..."></textarea>
<div>
<button onclick="downloadSTR()">下載STR</button>
<input type="text" id="strFilename" placeholder="文件名（默認：subtitle.srt）" class="file-name">
<input type="file" id="strFileInput" accept=".srt,.str" onchange="loadSTRFile(this)">
<label for="strFileInput" class="file-input-label">導入STR文件</label>
</div>
</div>
</div>
<div class="container">
<div class="section batch-section">
<h3>批量轉換工具</h3>
<div class="batch-box">
<h4>批量LRC轉STR</h4>
<div class="batch-buttons">
<input type="file" id="batchLrcInput" multiple accept=".lrc"
style="display: none;" onchange="handleBatchLRC(this.files)">
<button onclick="document.getElementById('batchLrcInput').click()">選擇LRC文件（多選）</button>
</div>
</div>
<div class="batch-box">
<h4>批量STR轉LRC</h4>
<div class="batch-buttons">
<input type="file" id="batchStrInput" multiple accept=".srt,.str"
style="display: none;" onchange="handleBatchSTR(this.files)">
<button onclick="document.getElementById('batchStrInput').click()">選擇STR文件（多選）</button>
</div>
</div>
<div class="progress-bar" id="progressBar">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>
</div>
<div class="container">
<div class="section" style="margin-top: 20px;">
<h3>Base64解碼工具</h3>
<textarea id="base64Input" placeholder="輸入Base64編碼內容..."></textarea>
<div class="decode-tools">
<button onclick="decodeBase64()">解碼</button>
<select id="encodingSelect">
<option value="utf-8">UTF-8</option>
<option value="gbk">GBK</option>
<option value="big5">Big5</option>
</select>
<button class="copy-btn" onclick="copyDecodedText()">複製結果</button>
</div>
<div class="output-container">
<pre id="base64Output"></pre>
</div>
</div>
</div>
<script>
// 核心轉換邏輯（修改部分）
function generateSTR(entries) {
let result = '';
let sequence = 1;
let previousEnd = 0;
for (let i = 0; i < entries.length; i++) {
let start = entries[i].time;
// 時間調整邏輯
if (i > 0) {
const timeGap = start - previousEnd;
if (timeGap > 0) {
// 根據間隙大小調整（1秒或2秒）
const adjustSeconds = timeGap >= 2 ? 2 : 1;
start = Math.max(start - adjustSeconds, previousEnd);
}
}
const end = i < entries.length - 1 ? entries[i + 1].time : start + 5;
result += `${sequence}\n${formatTime(start)} --> ${formatTime(end)}\n${entries[i].text}\n\n`;
sequence++;
previousEnd = end;
}
return result.trim();
}
// 保持其他函數不變
function formatTime(seconds) {
const hrs = Math.floor(seconds / 3600);
const min = Math.floor((seconds % 3600) / 60);
const sec = Math.floor(seconds % 60);
const ms = Math.round((seconds % 1) * 1000);
return `${pad(hrs)}:${pad(min)}:${pad(sec)},${pad(ms, 3)}`;
}
// 其他輔助函數
function pad(num, length = 2) {
return num.toString().padStart(length, '0');
}
// 文件操作和界面交互函數
function showToast(message, duration = 2000) {
const toast = $('#toast');
toast.text(message).fadeIn();
setTimeout(() => toast.fadeOut(), duration);
}
function loadLRCFile(input) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
$('#lrcInput').val(e.target.result);
};
reader.readAsText(file, 'UTF-8');
input.value = '';
}
function loadSTRFile(input) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
$('#strOutput').val(e.target.result);
};
reader.readAsText(file, 'UTF-8');
input.value = '';
}
function convertLRCToSTR() {
$('#strOutput').val(generateSTR(parseLRC($('#lrcInput').val())));
}
function convertSTRToLRC_UI() {
$('#lrcInput').val(convertSTRToLRC($('#strOutput').val()));
}
// 其他函數保持不變（包括下載、批量轉換、Base64解碼等功能）
// ...（由於篇幅限制，完整功能代碼請參考之前的實現）
function showToast(message, duration = 2000) {
const toast = $('#toast');
toast.text(message).fadeIn();
setTimeout(() => toast.fadeOut(), duration);
}
function copyDecodedText() {
const outputText = $('#base64Output').text().trim();
if (!outputText) {
showToast('沒有可複製的內容');
return;
}
const textarea = document.createElement('textarea');
textarea.value = outputText;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();
try {
if (navigator.clipboard) {
navigator.clipboard.writeText(outputText).then(() => {
showToast('已複製到剪貼板');
}).catch(err => {
console.error('複製失敗:', err);
fallbackCopy();
});
} else {
fallbackCopy();
}
} catch (e) {
console.error('複製錯誤:', e);
fallbackCopy();
} finally {
document.body.removeChild(textarea);
}
function fallbackCopy() {
try {
const successful = document.execCommand('copy');
if (successful) {
showToast('已複製到剪貼板');
} else {
showToast('複製失敗，請手動選擇文本後複製');
}
} catch (e) {
showToast('複製失敗，請手動選擇文本後複製');
}
}
}
function loadLRCFile(input) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
$('#lrcInput').val(e.target.result);
};
reader.readAsText(file, 'UTF-8');
input.value = '';
}
function loadSTRFile(input) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = function(e) {
$('#strOutput').val(e.target.result);
};
reader.readAsText(file, 'UTF-8');
input.value = '';
}
function convertLRCToSTR() {
const lrcText = $('#lrcInput').val();
const parsed = parseLRC(lrcText);
$('#strOutput').val(generateSTR(parsed));
}
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const entries = [];
const timeRegex = /\[(\d+):(\d+)[\.:](\d+)\]/g;
lines.forEach(line => {
const matches = [...line.matchAll(timeRegex)];
const text = line.replace(timeRegex, '').trim();
if (matches.length > 0 && text) {
matches.forEach(match => {
const min = parseInt(match[1]);
const sec = parseInt(match[2]);
const ms = parseInt(match[3].padEnd(3, '0').substring(0,3));
const time = min * 60 + sec + ms / 1000;
entries.push({ time, text });
});
}
});
entries.sort((a, b) => a.time - b.time);
return entries;
}
function generateSTR(entries) {
let result = '';
let sequence = 1;
let previousEnd = 0;
for (let i = 0; i < entries.length; i++) {
let start = entries[i].time;
// 時間調整邏輯
if (i > 0) {
const timeGap = start - previousEnd;
if (timeGap > 0) {
const adjustSeconds = timeGap >= 2 ? 2 : 1;
start = Math.max(start - adjustSeconds, previousEnd);
}
}
const end = i < entries.length - 1 ? entries[i + 1].time : start + 5;
// 添加序號行
result += `${sequence}\n`;
result += `${formatTime(start)} --> ${formatTime(end)}\n`;
result += `${entries[i].text}\n\n`;
sequence++;
previousEnd = end;
}
return result.trim();
}
function formatTime(seconds) {
const hrs = Math.floor(seconds / 3600);
const min = Math.floor((seconds % 3600) / 60);
const sec = Math.floor(seconds % 60);
const ms = Math.round((seconds % 1) * 1000);
return `${pad(hrs)}:${pad(min)}:${pad(sec)},${pad(ms, 3)}`;
}
function pad(num, length = 2) {
return num.toString().padStart(length, '0');
}
function downloadLRC() {
const defaultName = 'lyrics.lrc';
const customName = $('#lrcFilename').val().trim() || defaultName;
const finalName = customName.endsWith('.lrc') ? customName : `${customName}.lrc`;
download($('#lrcInput').val(), finalName, 'text/plain;charset=UTF-8');
}
function downloadSTR() {
const defaultName = 'subtitle.srt';
const customName = $('#strFilename').val().trim() || defaultName;
const finalName = customName.endsWith('.srt') ? customName : `${customName}.srt`;
download($('#strOutput').val(), finalName, 'text/plain;charset=UTF-8');
}
function download(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const link = $('<a>').attr({
href: url,
download: filename
}).hide();
$('body').append(link);
link[0].click();
setTimeout(() => {
URL.revokeObjectURL(url);
link.remove();
}, 100);
}
function decodeBase64() {
try {
const base64Str = $('#base64Input').val().trim();
const encoding = $('#encodingSelect').val();
const binaryStr = atob(base64Str);
const bytes = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
let decodedText;
if (encoding === 'utf-8') {
decodedText = new TextDecoder('utf-8').decode(bytes);
} else {
try {
if (encoding === 'gbk') {
decodedText = gbkDecode(bytes);
} else if (encoding === 'big5') {
decodedText = big5Decode(bytes);
}
} catch (e) {
decodedText = "解碼錯誤：不支持的編碼或無效字符";
}
}
$('#base64Output').text(decodedText);
} catch (e) {
$('#base64Output').text('解碼錯誤：無效的Base64字符串');
}
}
function gbkDecode(bytes) {
let result = '';
for (let i = 0; i < bytes.length; i++) {
const byte = bytes[i];
if (byte < 128) {
result += String.fromCharCode(byte);
} else {
result += String.fromCharCode(byte) + '?';
}
}
return result;
}
function big5Decode(bytes) {
let result = '';
for (let i = 0; i < bytes.length; i++) {
const byte = bytes[i];
if (byte < 128) {
result += String.fromCharCode(byte);
} else {
result += String.fromCharCode(byte) + '?';
}
}
return result;
}
// 注意：需要保留所有原有功能函數的完整實現
</script>
</body>
</html>
