音乐播放器应用实例 - 前端开发

一、播放音乐

音乐播放器最基本的功能就是播放音乐。在网页中，我们需要用到HTML5的音频标签<audio>，并结合JavaScript来控制音频的播放、暂停、音量调节等。

<audio id="music" src="music.mp3"></audio>
<script>
  var music = document.getElementById("music");
  function play() {
    music.play();
  }
  function pause() {
    music.pause();
  }
  function setVolume(volume) {
    music.volume = volume/100;
  }
</script>

二、显示歌曲信息

除了播放音乐外，我们还需要显示歌曲的相关信息，例如歌曲名称、歌手、专辑等。这些信息可以通过HTML标签和JavaScript来实现。

<div id="song-info">
  <h2 id="song-name"></h2>
  <p id="singer"></p>
  <p id="album"></p>
</div>
<script>
  var songName = document.getElementById("song-name");
  var singer = document.getElementById("singer");
  var album = document.getElementById("album");
  function displaySongInfo(song) {
    songName.innerHTML = song.name;
    singer.innerHTML = "歌手：" + song.singer;
    album.innerHTML = "专辑：" + song.album;
  }
</script>

三、歌曲列表和切换歌曲

一个完整的音乐播放器还需要有歌曲列表和能够切换歌曲的功能。我们可以在网页上用<ul>和<li>标签来展示歌曲列表，然后结合JavaScript来控制切换歌曲的逻辑。

<ul id="song-list">
  <li><a href="#" onclick="changeSong(0)">歌曲1</a></li>
  <li><a href="#" onclick="changeSong(1)">歌曲2</a></li>
  <li><a href="#" onclick="changeSong(2)">歌曲3</a></li>
</ul>
<script>
  var songList = [
    { name: "歌曲1", singer: "歌手1", album: "专辑1", url: "song1.mp3" },
    { name: "歌曲2", singer: "歌手2", album: "专辑2", url: "song2.mp3" },
    { name: "歌曲3", singer: "歌手3", album: "专辑3", url: "song3.mp3" }
  ];
  var currentSongIndex = 0;
  function changeSong(index) {
    currentSongIndex = index;
    var song = songList[index];
    music.src = song.url;
    displaySongInfo(song);
    play();
  }
  function playPreviousSong() {
    currentSongIndex = (currentSongIndex - 1 + songList.length) % songList.length;
    var song = songList[currentSongIndex];
    music.src = song.url;
    displaySongInfo(song);
    play();
  }
  function playNextSong() {
    currentSongIndex = (currentSongIndex + 1) % songList.length;
    var song = songList[currentSongIndex];
    music.src = song.url;
    displaySongInfo(song);
    play();
  }
</script>

四、进度条和时间显示

为了更直观的展示当前歌曲的播放进度，我们可以在网页上添加进度条和音乐时间的显示。通过JavaScript，我们可以获取当前歌曲的播放进度和总时长，然后更新进度条和时间显示。

<div id="progress-bar">
  <div id="progress-bar-bg"></div>
  <div id="progress-bar-fg"></div>
  <div id="current-time"></div>
  <div id="total-time"></div>
</div>
<script>
  var progressBarBg = document.getElementById("progress-bar-bg");
  var progressBarFg = document.getElementById("progress-bar-fg");
  var currentTime = document.getElementById("current-time");
  var totalTime = document.getElementById("total-time");
  function updateProgressBar() {
    var progress = (music.currentTime / music.duration) * 100;
    progressBarFg.style.width = progress + "%";
    currentTime.innerHTML = formatTime(music.currentTime);
    totalTime.innerHTML = formatTime(music.duration);
  }
  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time % 60);
    return (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
  }
  setInterval(updateProgressBar, 1000);
</script>