【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">►</div> <div class="stop-btn">■</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になるので気をつけてください。