酷狗代理
本帖最后由 亚伦影音工作室 于 2025-10-7 13:06 编辑 <br /><br /><style>#bfq{height: 40px;width:960px; background: #666;position: relative;left: -200px; top: 30%;overflow: hidden;border-radius: 6px;box-shadow: 0px 0px 0px 0.25px #fff; z-index: 3; }
#mboard { height: 40px; width:100%;justify-content: center; align-items: center; gap: 8px; display: flex;position: absolute; right: 8%;transform:scale(1);}
#mboard img {width:26px; cursor: pointer; filter:invert(240%)hue-rotate(10deg);}
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
#volwrap { position: absolute; width: 15%; height: 40px; right: -5%; display: grid; place-items: center; background: none; border-radius: 20px; }
input {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 100%;
}
::-webkit-slider-runnable-track {
height: 4px;border-radius: 20px;
background: #eee;
}
::-webkit-slider-container {
height: 18px;border-radius: 30px;
overflow: hidden;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff0000;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#ff0000,#ff0000) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}
#btnMute:hover ~ #volwrap ;
#volume { position: absolute; width: 5%; height: 2px;display: none; }
#prog { --track:#eee; --prog: #ff0000; --prg: 0%; width: 60%; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}
#gc{margin: 120px -10%;position: relative;z-index: 50;width: 750px;
}
.lyrics{margin: 0;
top: 0px;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;z-index: 50;
}
.lyric-line{
font-weight: 700;
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 300 50px '华文隶书', sans-serif;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #8B4513;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #ag0000;
white-space: nowrap;
}
@keyframes charAppear {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<div id="bfq">
<div id="mboard">
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
</div>
<audio id="aud" src="https://www.dda5.com/plug/down.php?ac=mp3&id=22ACE5AB209EC7EC723F7957DA164767&.mp3" autoplay loop></audio>1c245b97d3585e5438074b8ed6cbc3ec
</div>
<div id="gc" >
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original" ></div>
</div>
</div>
</div>
<script>
var lastVolume = 1, muted = false;
var imgAr = [
'https://638183.freep.cn/638183/web/icon/play.svg',
'https://638183.freep.cn/638183/web/icon/pause.svg',
'https://638183.freep.cn/638183/web/icon/unmuted.svg',
'https://638183.freep.cn/638183/web/icon/muted.svg',
];
var setVolume = (val) => Math.min(1, Math.max(0, val));
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};
var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
var mState = () => {
btnPlay.src = aud.paused ? imgAr : imgAr;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 88:
btnPlay.click();
break;
case 74:
setMute();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};
aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? imgAr : imgAr;
volume.value = aud.volume;
}
btnPlay.onclick = () => aud.paused ? (aud.play() ): (aud.pause());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)';
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `红尘梦里爱慕里再续柔情字句
落下雨点这瞬间希盼浪漫重聚
不必费解不说出不要落下情泪
若是擦肩可有对不对谁犹恨谁
轻舟不觉已过千帆天青青
谁在泼墨藏了笔迹不作声
镜花水中不见寻觅故人天有命
无奈昨日情意沽清作一曲隽永
红尘梦里爱慕里再续柔情字句
落下雨点这瞬间希盼浪漫重聚
不必费解不说出不要落下情泪
若是擦肩可有对不对谁犹恨谁
浮云聚散已习惯放下前尘未晚
梦幻泡影交映出璀璨极乐无限
纷飞雨点不眷恋不顾落幕期限
度尽了今生你再不归还
尘俗终会散
一蓑烟雨离别哀愁更冷清
疑是昨夜凉意萧瑟催我醒
玉镂金簪钗髻来自你何须记认
遗憾已是难诉心声
绣花针印证
红尘梦里爱慕里再续柔情字句
落下雨点这瞬间希盼浪漫重聚
不必费解不说出不要落下情泪
若是擦肩可有对不对谁犹恨谁
浮云聚散已习惯放下前尘未晚
梦幻泡影交映出璀璨极乐无限
纷飞雨点不眷恋不顾落幕期限
度尽了今生你再不归还
尘俗终会散
看看夕照世俗无奈地叹
旧日往昔怎再返因有道别时限
风声雨声欢笑声一切渐渐回慢
但是我可否再回头望一眼
见惯聚散放下前尘未晚
梦幻泡影交映出璀璨极乐无限
纷飞雨点不眷恋不顾落幕期限
度尽了今生你再不归还
尘俗终会散
`;
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '800';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
aud.addEventListener('timeupdate', () => {
const currentTimeMs = aud.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
</script>
酷狗MP3和歌词代理源码
本帖最后由 亚伦影音工作室 于 2025-9-19 18:01 编辑酷狗MP3代理地址：https://www.dda5.com/plug/down.php?ac=mp3&id=1c245b97d3585e5438074b8ed6cbc3ec&.mp3
酷狗lrc歌词代理地址：https://www.dda5.com/plug/down.p ... 074b8ed6cbc3ec&.lrc 欣赏佳作，问候亚伦。 非常好用，只是不知道这样的代理地址是怎样得到的{:4_187:} 亚纶出新产品了{:4_199:} 漂亮！谢谢亚伦老师精彩分享{:4_191:}
页:
[1]