html左侧悬浮音乐插件,固定在网页底部的HTML5音乐播放器插件代码

以下是一个简单的HTML5音乐播放器插件代码，可以固定在网页底部悬浮显示：

<div id="audio-player" style="position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: #fff; padding: 10px;">
  <audio id="music" src="path/to/music.mp3"></audio>
  <button id="play-pause-btn">播放</button>
  <span id="current-time">0:00</span>/<span id="duration">0:00</span>
  <input id="volume-slider" type="range" min="0" max="1" step="0.1" value="1">
</div>

<script>
  var music = document.getElementById("music");
  var playPauseBtn = document.getElementById("play-pause-btn");
  var currentTime = document.getElementById("current-time");
  var duration = document.getElementById("duration");
  var volumeSlider = document.getElementById("volume-slider");

  function playPause() {
    if (music.paused) {
      music.play();
      playPauseBtn.innerHTML = "暂停";
    } else {
      music.pause();
      playPauseBtn.innerHTML = "播放";
    }
  }

  function updateTime() {
    var currentTimeValue = Math.floor(music.currentTime);
    var durationValue = Math.floor(music.duration);
    var minutes = Math.floor(currentTimeValue / 60);
    var seconds = currentTimeValue - minutes * 60;
    currentTime.innerHTML = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    minutes = Math.floor(durationValue / 60);
    seconds = durationValue - minutes * 60;
    duration.innerHTML = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
  }

  function updateVolume() {
    music.volume = volumeSlider.value;
  }

  playPauseBtn.addEventListener("click", playPause);
  music.addEventListener("timeupdate", updateTime);
  volumeSlider.addEventListener("input", updateVolume);
</script>

你可以将 `path/to/music.mp3` 替换为你的音乐文件路径，然后将这段代码嵌入到你的网页中即可。