音樂播放器應用實例 – 前端開發

一、播放音樂

音樂播放器最基本的功能就是播放音樂。在網頁中，我們需要用到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>

以上代碼就是一個簡單的音樂播放器應用實例，你可以根據需求和實際情況進行修改和完善。