html js实现简单的音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单音乐播放器</title>
<style>
#player{
text-align:center;
margin-top:50px;
}
#playlist{
list-style-type:none;
padding:0;
}
#playlist li{
margin:10px 0;
cursor:pointer;
}
#progress{
width:300px;
margin:10px auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="player">
<audio id="audioPlayer" controls>
<source id="audioSource" src="" type="audio/mpeg">
您的浏览器不支持audio元素。
</audio>
<button id="prev">上一首</button>
<button id="playPause">播放/暂停</button>
<button id="next">下一首</button>
<progress id="progress" value="0" max="100"></progress>
</div>
<ul id="playlist">
<li data-src="http://local.file.diary.com:8018//music/1/1713620268-952.mp3">歌曲1</li>
<li data-src="http://localhost:8018/2.mp3">歌曲2</li>
<li data-src="http://localhost:8018/3.mp3">歌曲3</li>
</ul>
<script>
$(document).ready(function () {
audioPlayer = $('#audioPlayer')[0];
audioSource = $('#audioSource')[0];
currentSongIndex = 0;
songs = $('li').map(function () {
return $(this).data('src');
}).get();
function updateProgress() {
var value = 0;
if (audioPlayer.currentTime > 0) {
value = Math.round((100 / audioPlayer.duration) * audioPlayer.currentTime);
}
$('#progress').val(value);
}
audioPlayer.addEventListener('timeupdate', updateProgress);
$('#prev').click(function () {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
audioSource.src = songs[currentSongIndex];
audioPlayer.load();
audioPlayer.play();
});
$('#next').click(function () {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audioSource.src = songs[currentSongIndex];
audioPlayer.load();
audioPlayer.play();
});
$('#playPause').click(function () {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
});
audioPlayer.addEventListener('ended', function () {
$('#next').click();
});
$('li').click(function () {
currentSongIndex = $('li').index(this);
audioSource.src = $(this).data('src');
audioPlayer.load();
audioPlayer.play();
});
});
</script>
</body>
</html>
转载请注明出处：php程序员的笔记
最后修改时间：2024年04月22日 19时49分 文章来源：yuhaomiao