<meta charset="UTF-8"/>
<title>
箴言 [Proverbs]
</title><style>body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
}
#player {
margin-bottom: 20px;
}
#playlist {
list-style: none;
padding: 0;
}
#playlist li {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
#playlist li:hover {
background-color: #f5f5f5;
}
#playlist li.playing {
background-color: #e3f2fd;
font-weight: bold;
}</style>
<div id="player">
<audio id="audioPlayer" controls="" autoplay="">
您的浏览器不支持音频播放
</audio>
<p>
当前播放：<span style="font-size: 16px; color: #FF0000;"><strong>圣经 _ 旧约全书 _ 箴言 </strong></span>-<span id="currentTrack">第?集</span>
</p>
</div>
<ul id="playlist" class=" list-paddingleft-2"></ul><script>// 播放列表数据（可修改添加更多曲目）
const playlist = [
{ title: "第1章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/1.mp3" },
{ title: "第2章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/2.mp3" },
{ title: "第3章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/3.mp3" },
{ title: "第4章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/4.mp3" },
{ title: "第5章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/5.mp3" },
{ title: "第6章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/6.mp3" },
{ title: "第7章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/7.mp3" },
{ title: "第8章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/8.mp3" },
{ title: "第9章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/9.mp3" },
{ title: "第10章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/10.mp3" },
{ title: "第11章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/11.mp3" },
{ title: "第12章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/12.mp3" },
{ title: "第13章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/13.mp3" },
{ title: "第14章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/14.mp3" },
{ title: "第15章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/15.mp3" },
{ title: "第16章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/16.mp3" },
{ title: "第17章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/17.mp3" },
{ title: "第18章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/18.mp3" },
{ title: "第19章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/19.mp3" },
{ title: "第20章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/20.mp3" },
{ title: "第21章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/21.mp3" },
{ title: "第22章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/22.mp3" },
{ title: "第23章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/23.mp3" },
{ title: "第24章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/24.mp3" },
{ title: "第25章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/25.mp3" },
{ title: "第26章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/26.mp3" },
{ title: "第27章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/27.mp3" },
{ title: "第28章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/28.mp3" },
{ title: "第29章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/29.mp3" },
{ title: "第30章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/30.mp3" },
{ title: "第31章", url: "http://audio2.abiblica.org/bibles/app/audio/4/20/31.mp3" }
];
// 初始化播放器
const audio = document.getElementById('audioPlayer');
const playlistElement = document.getElementById('playlist');
const currentTrackElement = document.getElementById('currentTrack');
let currentTrackIndex = 0;
// 生成播放列表
playlist.forEach((track, index) =>{
const li = document.createElement('li');
li.textContent = track.title;
li.addEventListener('click', () => playTrack(index));
playlistElement.appendChild(li);
});
// 播放指定曲目
function playTrack(index) {
currentTrackIndex = index;
const track = playlist[index];
audio.src = track.url;
currentTrackElement.textContent = track.title;
// 更新列表样式
Array.from(playlistElement.children).forEach(li =>
li.classList.remove('playing'));
playlistElement.children[index].classList.add('playing');
}
// 自动播放下一曲
audio.addEventListener('ended', () => {
currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
playTrack(currentTrackIndex);
});</script><!--!doctype-->