<br/> 换行符写错了。中国移动也会犯这种低级错误嘛 OvO

大半夜做教材的ppt配套视频，碰到个有意思的配音问题。

本来想着发个朋友圈吧，发现下面怎么都是七夕节秀恩爱的。蒜鸟蒜鸟不发了

吃好，玩好，睡好。这也是小小的幸福吧。

（只负责前两章）正在掉头发中。。。

学院第四名，顺利通过✌

英语校赛过了，五月九号省赛

各种比赛都退了，统战的展厅讲解也推了。

到时候三创赛和国创赛就看有没有精力参加吧。请假回珲春休息一阵子。

发布者：于正浩

历时三个礼拜，我的音乐播放器终于初步完成（开源）。

html前端搭建和css调试非常简单，几乎没费什么精力，大概也就用了四天左右。

最重要的javascript部分，则几乎由deepseek全部完成（我真的写不会js），我只负责思路引导和最初的框架构建。（类似 jsfunction，const命名和albumArt.addEventListener监听器等等…）这样做确实很高效，只是很多时候AI的改动并不符合我的要求。实现了播放暂停逻辑，列表没有了；列表和播放都正常了，专辑图片不显示了；专辑图片显示了，也转起来了，他马的播放不出来了。。。

这样也不是个办法，只好学一学js了。这东西算是相当复杂了，不像html那样的标记语言，更偏向java的逻辑。学了一个礼拜之后，我终于放弃了——我还是决定依靠deepseek实现我的js功能。干中学呗，总会有长进的。

结果还真就让我成功了，我做出了一个完整的音乐播放器。

但是，这时我突然发现了一个’bug’：只有首次进入网站或手动刷新（f5）时，播放器才可以正常播放，在网站内页面跳转后，则会显示我初始化的样式。我一直以为是我的代码逻辑问题，或是浏览器的兼容问题。我问了很多的ai模型，也问了几个朋友，但始终没有得到答案。

这个bug困扰了我很长一段时间。

有一天我在阅读wordpress官方文档时，无意间发现，wordpress后台argon主题采用的是pjax 方式加载页面 (无刷新加载) , 所以除非页面手动刷新，否则我的脚本只会被执行一次。如果想让每次加载新页面时都执行脚本，则必须将脚本写入 window.pjaxLoaded 中。

这是我第一次接触pjax，不能说是全知全能吧，也只能说是一窍不通。 我翻阅了github、wordpress官方、csdn等众多论坛，得知要想用pjax，要把js单独拿出来放到页尾脚本里面。

理论得到，实践开始。

htmlcss和js分离很简单，可我把js放到页尾脚本，直接把function放入到window.pjaxloded时，网站播放器中的js竟然全部丢失，连简单的播放都做不到。页头脚本根本就没写。我问了deepseek，它说问题在于我没有写页头脚本。

根据deepseek的帮助，我的页头脚本诞生了，它的唯一任务就是：确保首次加载和 pjax 跳转后触发播放器初始化。

确实是有效果，看来就是pjax的问题。我对js做了一个封装。

果然，一切都正常了，阿弥陀佛世界和平[合十]。

我把源码放在下面，做一个开源。欢迎指导批评。

 # 代码声明
本代码仅供交流学习使用，未经授权，禁止任何形式的转载与商业用途。
如有疑问或需合作，请联系[13596509777]。

 <script>
document.addEventListener('DOMContentLoaded', function() {
if (window.pjaxLoaded) window.pjaxLoaded();
});
</script>

 <script>
const tracks = [
{
title: '勇气',
artist: '梁静茹',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/梁静茹-勇气-V0.mp3',
cover: 'http://www.yuzh.ink/wp-content/uploads/2025/03/f0e9917ee28c7f3329a677824ae27ed.png'
},
{
title: '我知道',
artist: 'BY2',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/BY2-我知道-.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/微信图片_202503192241413.png'
},
{
title: '麦恩莉',
artist: '方大同',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/方大同-麦恩莉-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/微信图片_202503192241412.png'
},
{
title: '愿与愁',
artist: '林俊杰',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/林俊杰-愿与愁-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/微信图片_20250319224141.png'
},
{
title: '坏女孩',
artist: '徐良\\小凌',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/徐良-_-小凌-坏女孩-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/微信图片_202503192241411.png'
},
{
title: '关于爱的定义',
artist: '方大同',
src: 'http://www.yuzh.ink/wp-content/uploads/2025/03/方大同-关于爱的定义-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/微信图片_202503192241412.png'
},
{
title: '年轮',
artist: '张碧晨',
src: 'http://www.yzh.today/wp-content/uploads/2025/03/张碧晨-年轮-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/ec3ad99543706b30e514d87074311c8.png'
},
{
title: '成都',
artist: '赵雷',
src: 'http://www.yzh.today/wp-content/uploads/2025/03/赵雷-成都-V0.mp3',
cover: 'http://www.yzh.today/wp-content/uploads/2025/03/10c1af621803706d4dfa5d798183701.png'
}
];

window.pjaxLoaded = function() {
const audio = document.getElementById('compactAudio');
const playButton = document.querySelector('.play-button');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');
const progressBar = document.getElementById('compactProgressBar');
const currentTimeDisplay = document.getElementById('compactCurrent');
const durationDisplay = document.getElementById('compactDuration');
const albumArt = document.getElementById('compactAlbumArt');
const titleElement = document.getElementById('compactTitle');
const artistElement = document.getElementById('compactArtist');
const progressContainer = document.getElementById('compactProgress');
const playlistContainer = document.getElementById('playlistContainer');
const playlistElement = document.getElementById('playlist');
const closePlaylistBtn = document.getElementById('closePlaylist');

let currentTrackIndex = 0;
let isPlaying = false;
let isSeeking = false;
let isPlaylistVisible = false;
let currentAudioElement = null;

function initPlayer() {
const savedState = JSON.parse(localStorage.getItem('musicPlayerState'));

isPlaying = false;

if (savedState) {
currentTrackIndex = savedState.currentTrackIndex;
loadTrack(currentTrackIndex, true); 
audio.currentTime = savedState.currentTime || 0;

updatePlayButton();
updateAlbumArtAnimation();
} else {
loadTrack(currentTrackIndex);
}

audio.pause();

const newState = {
currentTrackIndex,
currentTime: audio.currentTime,
};
localStorage.setItem('musicPlayerState', JSON.stringify(newState));

renderPlaylist();
playlistContainer.classList.remove('show');
}

function renderPlaylist() {
playlistElement.innerHTML = tracks.map((track, index) => `
<li data-index="${index}" class="${index === currentTrackIndex ? 'playing' : ''}">
<div class="song-title">${track.title}</div>
${index === currentTrackIndex ? '<span class="playing-indicator">▶</span>' : ''}
</li>
`).join('');

playlistElement.querySelectorAll('li').forEach(li => {
li.addEventListener('click', () => handlePlaylistClick(parseInt(li.dataset.index)));
});
}

function handlePlaylistClick(index) {
if (index === currentTrackIndex) {
togglePlay();
} else {
loadTrack(index);
}
togglePlaylist();
}

function togglePlaylist() {
isPlaylistVisible = !isPlaylistVisible;
playlistContainer.classList.toggle('show', isPlaylistVisible);

if (isPlaylistVisible) {
setTimeout(() => {
document.addEventListener('click', closePlaylistOnClickOutside);
}, 10);
} else {
document.removeEventListener('click', closePlaylistOnClickOutside);
}
}

function closePlaylistOnClickOutside(e) {
if (!playlistContainer.contains(e.target) && !e.target.closest('.compact-album-art')) {
togglePlaylist();
}
}

function updatePlaylistHighlight() {
playlistElement.querySelectorAll('li').forEach(li => {
const index = parseInt(li.dataset.index);
li.classList.toggle('playing', index === currentTrackIndex);
const indicator = li.querySelector('.playing-indicator');
if (indicator) {
indicator.textContent = (index === currentTrackIndex && isPlaying) ? '▶' : '';
}
});
}

function loadTrack(index, keepTime = false) {
currentTrackIndex = (index + tracks.length) % tracks.length;
const track = tracks[currentTrackIndex];

const oldHandler = audio.onloadedmetadata;
if (oldHandler) {
audio.removeEventListener('loadedmetadata', oldHandler);
}

audio.src = track.src;
titleElement.textContent = track.title;
artistElement.textContent = track.artist;
albumArt.src = track.cover;

const resetPlayback = () => {
if (!keepTime) {
audio.currentTime = 0; 
currentTimeDisplay.textContent = formatTime(0); 
progressBar.style.width = '0%';
}

if (isPlaying) {
audio.play().catch(() => {});
}

durationDisplay.textContent = formatTime(audio.duration);
};

audio.addEventListener('loadedmetadata', resetPlayback);
audio.onloadedmetadata = resetPlayback; 

preloadNextTrack();
renderPlaylist();
updatePlaylistHighlight();
}

function preloadNextTrack() {
const nextIndex = (currentTrackIndex + 1) % tracks.length;
const nextTrack = tracks[nextIndex];
const preloadAudio = new Audio();
preloadAudio.src = nextTrack.src;
preloadAudio.preload = 'auto';
}

function togglePlay() {
if (isPlaying) {
audio.pause();
} else {
audio.play();
}
isPlaying = !isPlaying;
updatePlayButton();
updateAlbumArtAnimation();
updatePlaylistHighlight();
}

function updatePlayButton() {
playButton.textContent = isPlaying ? '⏸' : '▶';
}

function updateAlbumArtAnimation() {
albumArt.style.animationPlayState = isPlaying ? 'running' : 'paused';
}

function prevTrack() {
loadTrack(currentTrackIndex - 1, false);
if (!isPlaying) {
togglePlay();
}
}

function nextTrack() {
loadTrack(currentTrackIndex + 1, false); //
if (!isPlaying) {
togglePlay();
}
}

function updateProgress() {
if (!isSeeking && audio.duration) {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progress}%`;
currentTimeDisplay.textContent = formatTime(audio.currentTime);

if (audio.duration - audio.currentTime < 5) {
preloadNextTrack();
}
}
}

function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}

function savePlayState() {
const state = {
currentTrackIndex,
currentTime: audio.currentTime,
isPlaying: false 
};

localStorage.setItem('musicPlayerState', JSON.stringify(state));
}
albumArt.addEventListener('click', (e) => {
e.stopPropagation();
if (!isSeeking) togglePlaylist();
});

albumArt.addEventListener('touchstart', (e) => {
e.preventDefault();
if (!isSeeking) togglePlaylist();
}, { passive: false });

closePlaylistBtn.addEventListener('click', togglePlaylist);

playButton.addEventListener('click', togglePlay);
prevButton.addEventListener('click', prevTrack);
nextButton.addEventListener('click', nextTrack);

progressContainer.addEventListener('click', (e) => {
const rect = progressContainer.getBoundingClientRect();
const percentage = (e.clientX - rect.left) / rect.width;
audio.currentTime = percentage * audio.duration;
});

audio.addEventListener('timeupdate', updateProgress);

audio.addEventListener('loadedmetadata', () => {
durationDisplay.textContent = formatTime(audio.duration);

if (isPlaying) {
audio.play().catch(() => {});
}
if (keepTime) {
audio.currentTime = prevTime;
}
});
audio.addEventListener('ended', () => {
nextTrack(true); 
});
audio.addEventListener('error', () => {
console.error('音频加载失败，自动跳过');
nextTrack();
});

window.addEventListener('beforeunload', () => {

const state = {
currentTrackIndex,
currentTime: audio.currentTime,
isPlaying: false
};
localStorage.setItem('musicPlayerState', JSON.stringify(state));
});

document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') savePlayState();
});


progressContainer.addEventListener('mousedown', startSeeking);
window.addEventListener('mousemove', duringSeeking);
window.addEventListener('mouseup', stopSeeking);

function startSeeking(e) {
isSeeking = true;
duringSeeking(e);
}

function duringSeeking(e) {
if (isSeeking) {
const rect = progressContainer.getBoundingClientRect();
const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
progressBar.style.width = `${percentage * 100}%`;
currentTimeDisplay.textContent = formatTime(percentage * audio.duration);
}
}

function stopSeeking(e) {
if (isSeeking) {
isSeeking = false;
const rect = progressContainer.getBoundingClientRect();
const percentage = (e.clientX - rect.left) / rect.width;
audio.currentTime = percentage * audio.duration;
}
}

if (typeof wp !== 'undefined') {
wp.data.subscribe(savePlayState);
}

initPlayer();
};

window.pjaxLoaded();
if (typeof window.pjaxLoaded === 'function') {
window.pjaxLoaded();
}
</script>

今年目标有：国家奖学金，cet4，计算机二级

靠比划和一点散装俄语和毛子pk一晚上

东风夜~放花千树

连续四天打到同一辆车，好巧

乌拉呀哈

已经快一个礼拜整宿不睡觉了，估计作息也已经颠倒了。每天一觉睡醒一两点了，坐在电脑前面开始写文章。没想到短短两三千字的回忆录能让我从白天写到半夜，文章起始也经常便秘，哈哈。要改一改作息了，后面要慢一点写了，感觉身体吃不消啊。也能保证文章质量。

黑8的老太太看着又老了，小猫也从可爱小橘变成了邪恶大橘。🐱

没用的事总是想个不停。

 

( •̀ ω •́ )y