【轮播图的实现】JS的音乐播放器

以下是一个简单的音乐播放器的实现，包括了上一曲、播放/暂停、下一曲的功能，以及显示当前播放时间和歌曲总时间的功能。




<!DOCTYPE html>
<html>
<body>
 
<audio id="myAudio">
  <source src="your-music-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<button onclick="playPause()">播放/暂停</button>
<button onclick="nextSong()">下一曲</button>
<button onclick="previousSong()">上一曲</button>
<br>
<div id="timeDisplay">
  当前播放时间: <span id="current-time">00:00</span> / 歌曲总时间: <span id="total-time">00:00</span>
</div>
 
<script>
var myAudio = document.getElementById('myAudio');
var timeDisplay = document.getElementById('timeDisplay');
 
function playPause() {
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
 
function nextSong() {
  // 切换到下一首歌的逻辑
  // ...
}
 
function previousSong() {
  // 切换到上一首歌的逻辑
  // ...
}
 
myAudio.addEventListener('timeupdate', function() {
  var currentMinutes = Math.floor(myAudio.currentTime / 60);
  var currentSeconds = Math.floor(myAudio.currentTime - (currentMinutes * 60));
  var minutes = currentMinutes < 10 ? '0' + currentMinutes : currentMinutes;
  var seconds = currentSeconds < 10 ? '0' + currentSeconds : currentSeconds;
  document.getElementById('current-time').textContent = minutes + ":" + seconds;
});
 
myAudio.addEventListener('loadedmetadata', function() {
  var totalMinutes = Math.floor(myAudio.duration / 60);
  var totalSeconds = Math.floor(myAudio.duration - (totalMinutes * 60));
  var minutes = totalMinutes < 10 ? '0' + totalMinutes : totalMinutes;
  var seconds = totalSeconds < 10 ? '0' + totalSeconds : totalSeconds;
  document.getElementById('total-time').textContent = minutes + ":" + seconds;
});
</script>
 
</body>
</html>

在这个例子中，你需要替换your-music-file.mp3为你自己的音乐文件路径。这个播放器提供了基本的播放、暂停、上一曲和下一曲的功能，并实时显示当前播放时间和歌曲总时间。你可以根据需要添加歌曲列表、循环模式、随机播放等功能。

【轮播图的实现】JS的音乐播放器

评论已关闭

推荐阅读