醉美水芙蓉 发表于 2024-12-25 21:12:03

原生lrc在线制作工具

<meta charset="utf-8" />
<title>lrc歌词在线制作</title>
<style>
/* 名称 ：lrc歌词制作
   制作 ：马黑黑
   更新 ：2024年8月21日
*/
        .outer { margin: auto; width: fit-content; height: fit-content; }
        .outer h2 { margin: 10px; padding: 0; font: bold 1.5em sans-serif; text-align: center; }
        .outer p { margin: 10px; }
        .outer input { margin: 2px; font: normal 16px sans-serif; outline: none; }
        .menu { margin: 0 0 -1px 8px; width: fit-content; height: fit-content; display: flex; position: relative; }
        @-moz-document url-prefix() { .menu { margin-bottom:-2px; }}
        .item { width: 60px; height: 30px; font: normal 1em / 30px sans-serif; text-align: center; background: #fff; border: 1px solid; border-bottom: none; cursor: pointer; }
        #slip { width: 50px; text-align: center; }
        #lrcText { padding: 10px; width: 720px; height: 400px; font: normal 16px / 26px sans-serif; resize: both; border: 1px solid; outline: none; }
        #mUrl { padding: 4px; width: 460px; font-size: 14px; }
        #aud, #up { display: none; outline: none; }
        #audMsg { display: inline-block; margin-left: 12px; height: 54px; font: normal 1em / 54px sans-serif; }
</style>
</head>
<body>

<div class="outer">
        <h2>原生lrc在线制作工具</h2>
        <div class="menu">
                <div class="item">lrc制作</div>
        </div>
        <textarea id="lrcText" rows ="18" cols="60" placeholder="原始歌词"></textarea>
        <p>
                <input id="begin" type="button" value=" 制作 " title="点击开始制作" />
                <input id="up" type="button" value=" ↑↑ " />
                <input id="btnReset" type="button" value=" 重置 " title="重置到初始状态" />
                <input id="mUrl" type="text" placeholder="音频地址" value="" />
                <label>手慢 : </label>
                <input id="slip" type="number" placeholder="0" value="0.2" min="0" max="1" step="0.1" />
        </p>
        <p style="display:flex">
                <audio id="aud" controls="controls"></audio>
                <span id="audMsg"></span>
        </p>
</div>

<script>
let items = document.querySelectorAll('.item');
let lrcArr = [], slipNum = 0.2, yp, currentIdx, mkidx;

begin.onclick =() => {
        if(lrcText.value === '' || mUrl.value === '') return false;
        aud.src = mUrl.value.trim();
        aud.style.display = audMsg.style.display = 'inline-block';
        lrcArr.length = 0;
        lrcArr = (lrcText.value).trim().split('\n');
        currentIdx = mkidx = 0;
        lrcText.value = 'var geci = `\n';
        mUrl.value = lrcArr;
        begin.style.display = 'none';
        up.style.display = 'inline-block';
        up.disabled = true;
}

up.onclick = () => {
        if(currentIdx === lrcArr.length - 1) {
                lrcText.value += '\t' + mUrl.value + '\n`;';
                mUrl.value = aud.src;
                up.disabled = true;
                btnReset.value = ' 复制 ';
        } else {
                lrcText.value += '\t' + mUrl.value + '\n';
                lrcText.scrollTop = lrcText.scrollHeight;
                if(currentIdx < lrcArr.length - 1) currentIdx ++;
                mUrl.value = lrcArr;
        }
        mkidx ++;
        audMsg.innerText = audMsg.innerText.replace(/:\s\d+/, ': ' + mkidx);
        up.disabled = true;
};

btnReset.onclick = () => {
        let val = btnReset.value.trim();
        if(val === '复制') {
                lrcText.select();
                document.execCommand('copy');
                mUrl.value = '内容已复制到剪切板';
                btnReset.value = ' 重置 '
                btnReset.title = '重置到初始状态'
        }else{
                window.location.reload();
        }
}

slip.onblur = () => {
        let val = Number(slip.value) || 0;
        if(val > 1) val = 1;
        if(val < -1) val = -1;
        slip.value = val;
};

aud.addEventListener('pause', () => {
        mUrl.value = `${mkLrc(aud.currentTime - slip.value, lrcArr)}`;
        up.disabled = mkidx >= lrcArr.length ? true : false;
});

aud.addEventListener('timeupdate', () => {
        let done = ' [ 完成量: ' + mkidx + ' / ' + lrcArr.length + ' ]';
        audMsg.innerText = aud.currentTime.toFixed(2) + ' | ' + (aud.duration || 0).toFixed(2) + done;
});

aud.onerror = () => {
        let url = prompt('音频资源出错。请重新输入：', '');
        aud.src = url;
};

mkLrc = (seconds,text) => {
        let m = parseInt(seconds / 60 % 60),
                s = parseInt(seconds % 60),
                ms = parseInt(seconds * 1000 % 1000);
        m = m.toString().padStart(2, '0');
        s = s.toString().padStart(2, '0');
        ms = ms.toString().padStart(2, '0');
        return `[${m}:${s}.${ms}]${text.trim()}`;
};
</script>

klxf 发表于 2024-12-26 13:15:30

很实用的原生lrc在线制作工具，辛苦了！

请醉美管理员作个使用方法的解读呀，谢谢:)

醉美水芙蓉 发表于 2024-12-27 11:35:58

klxf 发表于 2024-12-26 13:15
很实用的原生lrc在线制作工具，辛苦了！

请醉美管理员作个使用方法的解读呀，谢谢 ...

这个简单，你看看就会了！

klxf 发表于 2024-12-27 17:14:46

醉美水芙蓉 发表于 2024-12-27 11:35
这个简单，你看看就会了！

不太熟悉，先学习一下

醉美水芙蓉 发表于 2024-12-27 19:57:55

klxf 发表于 2024-12-27 17:14
不太熟悉，先学习一下

你把歌词和音乐放进去试试就知道了！

klxf 发表于 2024-12-27 22:23:36

醉美水芙蓉 发表于 2024-12-27 19:57
你把歌词和音乐放进去试试就知道了！

好，按你说的试一试，不懂再请教
页: [1]
查看完整版本: 原生lrc在线制作工具