【HTML/CSS講座】第2回 MP3プレイヤーをサイトに導入する

  /* CSSファイル */
  /* 音楽再生プレイヤーコンテナのスタイル */

.audio-player {
  width: 300px;
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}

/* 曲名スタイル */
.audio-player .song-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 再生ボタンスタイル */
.audio-player .play-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

/* 停止ボタンスタイル */
.audio-player .stop-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 10px;
}

/* スライダーレールスタイル */
.audio-player .slider {
  width: 100%;
  height: 4px;
  background-color: #666;
  margin-top: 20px;
}

/* スライダーハンドルスタイル */
.audio-player .slider .handle {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  top: -3px;
  cursor: pointer;
}

第2回は、MP3プレイヤーをサイトに導入する

です。

音楽再生プレイヤーをサイトに導入します。

<div class="audio-player">
    <h2 class="song-title">Song Title</h2>
    <div class="controls">
      <div class="play-btn">&#9658;</div>
      <div class="stop-btn">&#9632;</div>
    </div>
    <div class="slider">
      <div class="handle"></div>
    </div>
    <audio src="audio.mp3" class="audio-element"></audio>
    <div class="time-info">
      <span class="current-time">00:00</span> / <span class="duration">00:00</span>
    </div>
  </div>

  <script>
    var audioElement = document.querySelector('.audio-element');
    var playBtn = document.querySelector('.play-btn');
    var stopBtn = document.querySelector('.stop-btn');
    var currentTimeSpan = document.querySelector('.current-time');
    var durationSpan = document.querySelector('.duration');

    playBtn.addEventListener('click', function() {
      audioElement.play();
    });

    stopBtn.addEventListener('click', function() {
      audioElement.pause();
      audioElement.currentTime = 0;
    });

    audioElement.addEventListener('timeupdate', function() {
      var currentTime = formatTime(audioElement.currentTime);
      var duration = formatTime(audioElement.duration);
      currentTimeSpan.textContent = currentTime;
      durationSpan.textContent = duration;
    });

    function formatTime(time) {
      var minutes = Math.floor(time / 60);
      var seconds = Math.floor(time % 60);
      return ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
    }
  </script>

このソースコードをコピペすることで、audio-playerができ上がります。

audio.mp3としていますが、各自のファイル名で調整してください。

再生時間は、ストップすると0に戻ります。途中で停止せずに0になるので気をつけてください。