html+js音乐播放,包含上一首歌曲,暂停,下一首歌曲,歌曲名称显示和歌曲进度播放进度显示
时间: 2023-05-30 11:03:55 浏览: 91
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
</head>
<body>
<audio id="player" src="music.mp3"></audio>
<div>
<button onclick="previous()">上一首</button>
<button onclick="toggle()">
<span id="play-pause">播放</span>
</button>
<button onclick="next()">下一首</button>
</div>
<div>
<span id="song-name"></span>
<span id="time"></span>
</div>
<script>
let player = document.getElementById('player');
let playBtn = document.getElementById('play-pause');
let songName = document.getElementById('song-name');
let time = document.getElementById('time');
let songs = ['music.mp3', 'music2.mp3', 'music3.mp3'];
let currentSongIndex = 0;
function toggle() {
if (player.paused) {
player.play();
playBtn.textContent = '暂停';
} else {
player.pause();
playBtn.textContent = '播放';
}
}
function next() {
currentSongIndex++;
if (currentSongIndex >= songs.length) {
currentSongIndex = 0;
}
player.src = songs[currentSongIndex];
player.play();
playBtn.textContent = '暂停';
updateSongName();
}
function previous() {
currentSongIndex--;
if (currentSongIndex < 0) {
currentSongIndex = songs.length - 1;
}
player.src = songs[currentSongIndex];
player.play();
playBtn.textContent = '暂停';
updateSongName();
}
function updateSongName() {
let song = songs[currentSongIndex];
songName.textContent = song.substring(0, song.length - 4);
}
player.addEventListener('timeupdate', function() {
let minutes = Math.floor(player.currentTime / 60);
let seconds = Math.floor(player.currentTime % 60);
time.textContent = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
});
</script>
</body>
</html>