Tạo MP3 Player với HTML5 và CSS3

 <audio src="audio.mp3" preload="auto" controls autoplay loop>
  <p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
</audio>
Hoặc
<audio preload="auto" controls autoplay loop>
  <source src="audio.mp3" type="audio/mp3" />
  <p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
</audio>
 

 <div class="player">
  <audio id="player__source" src="audio.mp3">
    <p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
  </audio>
  <div class="player__loading"></div>
  <div class="player__control">
    <button id="playPause"></button>
    <span id="currentTime">00:00</span>
    <input id="seek" type="range" min="0" value="0" />
    <span id="durationTime">00:00</span>
    <button id="muted"></button>
  </div>
</div>
 

 var player = document.getElementById('player__source'),
  playLoading = document.querySelectorAll('.player__loading span'),
  playPause = document.getElementById('playPause'),
  currentTime = document.getElementById('currentTime'),
  seek = document.getElementById('seek'),
  durationTime = document.getElementById('durationTime'),
  muted = document.getElementById('muted')
 

 playPause.addEventListener('click', playPauseMusic, false)

function playPauseMusic() {
  if (player.paused) {
    player.play()
    // Kiểm tra thời gian hiện tại của bài nhạc
    timeInterval = setInterval(timeUpdateMusic, 100)
    // Thay đổi giá trị của seek
    seek.addEventListener('change', seekMusic, false)
  } else {
    player.pause()
  }
}

function timeUpdateMusic() {
  // Thời gian toàn bộ của bài nhạc
  durationTime.innerHTML = player.duration
  // Thời gian hiện tại của bài nhạc
  currentTime.innerHTML = player.currentTime
  seek.max = player.duration
  seek.value = player.currentTime
}

function seekMusic() {
  player.currentTime = seek.value
}
 

 muted.addEventListener('click', mutedMusic, false)

function mutedMusic() {
  if (player.muted) {
    // Mở âm thanh
    player.muted = false
  } else {
    // Tắt âm thanh
    player.muted = true
  }
}