|
|
",
lrc: `[00:38.52]當我偷偷放開你的手
[00:41.96]看你小心地學會了走
[00:46.41]你心中不明白離愁
[00:50.87]于是快樂地不回頭
[00:55.47]簡單地心
[00:57.42]簡單地要求
[00:59.43]最怕看見你把淚兒流
[01:04.1]原來是沒有夢地我
[01:08.11]如今卻被你來感動
[01:13.72]世間冷曖早就看透
[01:22.54]為你我愿一切從頭
[01:30.70]聚散悲歡傷春秋
[01:39.27]只有你微微笑世上最美的問候
[01:48.10]成敗紛亂上心頭
[01:56.50]因為你柔柔的走
[02:00.66]怎樣地未來都能抵擋勇敢承受
[02:36.24]當我偷偷放開你的手
[02:40.13]看你小心地學會了走
[02:44.76]你心中不明白離愁
[02:48.70]于是快樂地不回頭
[02:53.30]簡單地心
[02:55.21]簡單地要求
[02:57.56]最怕看見你把淚兒流
[03:02.8]原來是沒有夢地我
[03:06.22]如今卻被你來感動
[03:11.69]世間冷曖早就看透
[03:20.61]為你我愿一切從頭
[03:28.60]聚散悲歡傷春秋
[03:37.16]只有你微微笑世上最美的問候
[03:45.98]成敗紛亂上心頭
[03:54.61]因為你柔柔的走
[03:58.78]怎樣地未來都能抵擋勇敢承受
[04:08.26]你緊緊貼近我的心
[04:11.86]要我聆聽著你的聲音
[04:16.40]心連心如此地相應
[04:20.32]人間最溫暖地感情
[04:25.41]不變地話
[04:27.10]不會變地愛
[04:29.45]不需要牽掛
[04:31.56]不用害怕
[04:34.10]這世界到底有多大
[04:37.72]握緊我的手
[04:40.19]有我陪你看你長大
[05:07.4]（媽媽-想你-愛你）
`
}, {
title: "张艾嘉 - 这样爱你对不对",
src: "https://upfile.mp3.wf/view.php/dbe276392a64d3ac3a722e02aaa06b23.mp3",
lrc: `[00:01.19]張艾嘉 - 這樣愛你對不對
[00:04.90]詞：李宗盛
[00:08.72]曲：李宗盛
[00:21.20]我這樣愛你到底對不對
[00:25.33]這問題問得我自己好累
[00:29.97]我寧愿流淚
[00:31.36]也不愿意后悔
[00:33.94]可是我害怕
[00:35.49]終于還是要心碎
[00:38.58]從未曾嘗過真情的滋味
[00:42.74]從未曾真正想傷害誰
[00:47.70]如果是我把愛情想得太美
[00:51.56]我應不應該放棄這最后的機會
[01:00.39]如果真心付出是一種罪
[01:03.94]我懷疑除了自己
[01:06.22]我還能相信誰
[01:08.97]如果失去真愛
[01:10.63]人們都無所謂
[01:13.23]那么我又哪來
[01:14.79]那么多傷悲
[01:17.76]如果真心付出是一種罪
[01:21.79]我懷疑除了自己
[01:23.73]我還能相信誰
[01:26.57]如果失去真愛
[01:28.41]人們都無所謂
[01:31.4]那么我的心情
[01:32.66]又有誰能體會
[01:38.53](music)
[02:18.10]如果真心付出是一種罪
[02:21.69]我懷疑除了自己
[02:23.90]我還能相信誰
[02:26.31]如果失去真愛
[02:28.35]人們都無所謂
[02:30.78]那么我又哪來
[02:32.61]那么多傷悲
[02:35.3]如果真心付出是一種罪
[02:39.47]我懷疑除了自己
[02:41.13]我還能相信誰
[02:44.1]如果失去真愛
[02:45.84]人們都無所謂
[02:48.59]那么我的心情
[02:50.15]又有誰能體會
[02:58.43]我這樣愛你到底對不對
[03:02.58]這問題問得我自己好累
[03:07.1]我寧愿流淚
[03:08.70]也不愿意后悔
[03:11.11]可是我害怕
[03:12.65]終于還是要心碎
[03:16.39](我這樣愛你到底對不對)
[03:25.8](我這樣愛你到底對不對)
[03:33.78](我這樣愛你到底對不對)
[03:42.65](我這樣愛你到底對不對)
`
}];
// ========== DOM 引用 ==========
var audio = new Audio();
var playBtn = document.getElementById('playBtn');
var pauseBtn = document.getElementById('pauseBtn');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var loopBtn = document.getElementById('loopBtn');
var timeDisplay = document.getElementById('timeDisplay');
var progressTrack = document.getElementById('progressTrack');
var loadedBar = document.getElementById('loadedBar');
var playedBar = document.getElementById('playedBar');
var volBtn = document.getElementById('volBtn');
var volFill = document.getElementById('volFill');
var volAdjust = document.getElementById('volAdjust');
var lrcElement = document.getElementById('lrc');
var currentSongNameSpan = document.getElementById('currentSongName');
var currentSongSub = document.getElementById('currentSongSub');
var playlistBtn = document.getElementById('playlistBtn');
var closeDropdownBtn = document.getElementById('closeDropdownBtn');
var dropdown = document.getElementById('playlistDropdown');
var songListContainer = document.getElementById('songListContainer');
// ========== 状态 ==========
var currentIndex = 0;
var isPlaying = false;
var loopMode = 0;
var volume = 0.80;
var isDragging = false;
var lyricsData = [];
var currentLrcIndex = -1;
var motionFlag = true;
// ========== 工具 ==========
function formatTime(sec) {
if (isNaN(sec) || !isFinite(sec) || sec < 0) return '00:00';
var m = Math.floor(sec / 60);
var s = Math.floor(sec % 60);
return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
}
function parseLrc(lrcStr) {
if (!lrcStr) return [];
var lines = lrcStr.split(/\r?\n/);
var items = [];
var regex = /\[(\d{2}) \d{2}\.\d{2})\]/;
for (var i = 0; i < lines.length; i++) {
var line = lines;
var m = line.match(regex);
if (m) {
var t = parseInt(m[1]) * 60 + parseFloat(m[2]);
var txt = line.replace(regex, '').trim();
if (txt && !txt.includes('LRC编辑') && !txt.includes('歌手：') && !txt.includes('词：') && !txt.includes(
'曲：')) {
items.push({ time: t, lrc: txt });
}
}
}
items.sort(function(a, b) { return a.time - b.time; });
for (var j = 0; j < items.length; j++) {
items[j].duration = (j + 1 < items.length) ? items[j + 1].time - items[j].time : 4.0;
if (items[j].duration <= 0.2) items[j].duration = 0.8;
}
return items;
}
function renderSongList() {
songListContainer.innerHTML = '';
for (var i = 0; i < songs.length; i++) {
var li = document.createElement('li');
li.className = i === currentIndex ? 'active-song' : '';
li.innerHTML = '' + String(i + 1).padStart(2, '0') + '' + songs.title + '';
li.onclick = (function(idx) {
return function() {
if (currentIndex === idx) { closeDropdown(); return; }
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
closeDropdown();
};
})(i);
songListContainer.appendChild(li);
}
}
function loadSong(idx) {
if (idx < 0) idx = 0;
if (idx >= songs.length) idx = songs.length - 1;
currentIndex = idx;
var s = songs[idx];
var wasPlaying = isPlaying;
audio.pause();
audio.src = s.src;
audio.load();
lyricsData = parseLrc(s.lrc);
currentLrcIndex = -1;
if (lyricsData.length) {
lrcElement.innerText = lyricsData[0].lrc;
lrcElement.setAttribute('data-lrc', lyricsData[0].lrc);
lrcElement.style.setProperty('--tt', '0.8s');
lrcElement.style.setProperty('--state', 'paused');
} else {
lrcElement.innerText = "♪ ";
lrcElement.setAttribute('data-lrc', "♪");
}
currentSongNameSpan.innerText = s.title;
currentSongSub.innerText = "mp3专辑播放器";
renderSongList();
if (wasPlaying) {
audio.play().then(function() {
isPlaying = true;
updateBtnUI();
lrcElement.style.setProperty('--state', 'running');
fullRefreshLyrics();
}).catch(function(e) { console.warn("自动播放被阻止"); });
} else {
isPlaying = false;
updateBtnUI();
lrcElement.style.setProperty('--state', 'paused');
fullRefreshLyrics();
}
}
function updateBtnUI() {
playBtn.style.display = isPlaying ? 'none' : 'block';
pauseBtn.style.display = isPlaying ? 'block' : 'none';
}
function applyLyrics(txt, dur) {
lrcElement.innerText = txt;
lrcElement.setAttribute('data-lrc', txt);
var newMotion = motionFlag ? 'cover1' : 'cover2';
lrcElement.setAttribute('data-motion', newMotion);
motionFlag = !motionFlag;
lrcElement.style.setProperty('--state', 'paused');
void lrcElement.offsetHeight;
var d = Math.max(0.3, Math.min(dur, 3.2));
lrcElement.style.setProperty('--tt', d + 's');
if (isPlaying && !audio.paused) lrcElement.style.setProperty('--state', 'running');
else lrcElement.style.setProperty('--state', 'paused');
}
function refreshLrc(ct) {
if (!lyricsData.length) return;
var idx = -1;
for (var i = lyricsData.length - 1; i >= 0; i--) {
if (ct >= lyricsData.time - 0.03) {
idx = i;
break;
}
}
if (idx === -1 && lyricsData.length) idx = 0;
if (idx === currentLrcIndex) {
if (currentLrcIndex >= 0 && isPlaying && !audio.paused) {
var remain = Math.max(0.2, lyricsData[currentLrcIndex].duration - (ct - lyricsData[currentLrcIndex]
.time));
if (remain > 0.1) {
lrcElement.style.setProperty('--state', 'paused');
void lrcElement.offsetHeight;
lrcElement.style.setProperty('--tt', remain + 's');
lrcElement.style.setProperty('--state', 'running');
}
}
return;
}
if (idx >= 0 && idx < lyricsData.length) {
currentLrcIndex = idx;
var remain2 = lyricsData[idx].duration;
if (ct > lyricsData[idx].time) remain2 = Math.max(0.2, lyricsData[idx].duration - (ct - lyricsData[idx]
.time));
applyLyrics(lyricsData[idx].lrc, remain2);
}
}
function fullRefreshLyrics() {
if (audio.duration) refreshLrc(audio.currentTime);
}
function updateUI() {
if (!audio.duration) return;
var pct = (audio.currentTime / audio.duration) * 100;
playedBar.style.width = pct + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
refreshLrc(audio.currentTime);
if (audio.buffered.length) {
var loaded = audio.buffered.end(audio.buffered.length - 1);
loadedBar.style.width = Math.min((loaded / audio.duration) * 100, 100) + '%';
}
}
function play() {
audio.play().then(function() {
isPlaying = true;
updateBtnUI();
lrcElement.style.setProperty('--state', 'running');
fullRefreshLyrics();pp.src = "https://pic1.imgdb.cn/i/034VPqxM5kWQ3Kz81Zmrk5.gif";
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();
isPlaying = false;
updateBtnUI();pp.src = "https://pic1.imgdb.cn/i/034mob1P776gPM96u1gM8I.png";
lrcElement.style.setProperty('--state', 'paused');
}
function togglePlay() { isPlaying ? pause() : play(); }
function prevSong() {
var idx = (currentIndex - 1 + songs.length) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function nextSong() {
var idx = (currentIndex + 1) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function toggleLoop() {
loopMode = 1 - loopMode;
loopBtn.style.backgroundPosition = loopMode ? 'center top' : 'left top';
}
function setProgressByEvent(e) {
var rect = progressTrack.getBoundingClientRect();
var x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration) && audio.duration > 0) {
audio.currentTime = x * audio.duration;
}
playedBar.style.width = (x * 100) + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
}
function setVolume(val) {
volume = Math.max(0, Math.min(1, val));
audio.volume = volume;
volFill.style.height = (volume * 100) + '%';
volBtn.style.backgroundPosition = (volume === 0 ? 'right top' : 'left top');
}
function setVolumeByEvent(e) {
var rect = volAdjust.getBoundingClientRect();
var y = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
setVolume(y);
}
function openDropdown() { renderSongList();
dropdown.classList.add('show'); }
function closeDropdown() { dropdown.classList.remove('show'); }
// ========== 事件绑定 ==========
playBtn.addEventListener('click', togglePlay);
pauseBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
loopBtn.addEventListener('click', toggleLoop);
progressTrack.addEventListener('click', function(e) { setProgressByEvent(e); });
progressTrack.addEventListener('mousedown', function(e) {
isDragging = true;
setProgressByEvent(e);
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
e.preventDefault();
});
function onDragMove(e) { setProgressByEvent(e); }
function onDragEnd(e) {
isDragging = false;
setProgressByEvent(e);
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
}
volBtn.addEventListener('click', function() { setVolume(volume > 0 ? 0 : 0.8); });
volAdjust.addEventListener('mousedown', function(e) {
setVolumeByEvent(e);
document.addEventListener('mousemove', onVolMove);
document.addEventListener('mouseup', onVolEnd);
e.preventDefault();
});
function onVolMove(e) { setVolumeByEvent(e); }
function onVolEnd(e) {
setVolumeByEvent(e);
document.removeEventListener('mousemove', onVolMove);
document.removeEventListener('mouseup', onVolEnd);
}
playlistBtn.addEventListener('click', function(e) {
e.stopPropagation();
dropdown.classList.contains('show') ? closeDropdown() : openDropdown();
});
closeDropdownBtn.addEventListener('click', closeDropdown);
document.addEventListener('click', function(e) {
if (dropdown.classList.contains('show') && !dropdown.contains(e.target) && e.target !== playlistBtn && !playlistBtn
.contains(e.target)) {
closeDropdown();
}
});
audio.addEventListener('timeupdate', updateUI);
audio.addEventListener('loadedmetadata', function() {
if (lyricsData.length) applyLyrics(lyricsData[0].lrc, lyricsData[0].duration);
updateUI();
if (isPlaying) play();
});
audio.addEventListener('ended', function() {
if (loopMode === 1) {
audio.currentTime = 0;
audio.play().catch(function() {});
fullRefreshLyrics();
} else {
nextSong();
}
});
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.code === 'Space') { e.preventDefault();
togglePlay(); }
});
// ========== 初始化 ==========
setVolume(0.8);
loopBtn.style.backgroundPosition = 'left top';
loadSong(0);
// 自动播放
setTimeout(function() {
play();
}, 500);
console.log(' 播放器已加载');
(function() {
var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');};
audio.onplaying = audio.onpause = () => mState();
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
下载地址：（专辑封面扫图文件夹内有，在此不列出）
|
|
津公网安备3401030200854476号 )
[信息未更新]
发表于 
