<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" /> <link rel="stylesheet" href="style.css" /> <title>Music Player!</title> </head> <body> <h1>Welcome to JasonPeng's Music Player!</h1> <h2>Play your favourite JayChou's music!</h2> <div class="music-container" id="music-container"> <div class="music-info"> <h4 id="title"></h4> <div class="progress-container" id="progress-container"> <div class="progress" id="progress"></div> </div> </div> <audio src="music/搁浅.mp3" id="audio"></audio> <div class="img-container"> <img src="images/听见下雨的声音.jpg" alt="music-cover" id="cover" /> </div> <div class="navigation"> <button id="prev" class="action-btn"> <i class="fas fa-backward"></i> </button> <button id="play" class="action-btn action-btn-big"> <i class="fas fa-play"></i> </button> <button id="next" class="action-btn"> <i class="fas fa-forward"></i> </button> </div> </div> <script src="script.js"></script> </body> </html>
style.css
* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background-image: linear-gradient( 0deg, rgba(247, 247, 247, 1) 15%, lightgreen ); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; } h1 { margin: -200px; color: #333; } h2 { margin: 200px; color: #333; } .music-container { background-color: white; border-radius: 25px; box-shadow: 0 20px 20px 0 rgb(83, 245, 83); display: flex; padding: 20px 30px; position: relative; margin: 100px 0; z-index: 10; position: absolute; } .img-container { position: relative; width: 110px; } .img-container::after { background-color: #fff; border-radius: 50%; position: absolute; bottom: 100%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, 50%); } .img-container img { border-radius: 50%; object-fit: cover; height: 110px; width: inherit; position: absolute; bottom: 0; left: 0; animation: rotate 3s linear infinite; animation-play-state: paused; } .music-container.play .img-container img { animation-play-state: running; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .navigation { display: flex; align-items: center; justify-content: center; z-index: 1; } .action-btn { background-color: #fff; border: 0; color: #666; font-size: 20px; cursor: pointer; padding: 10px; margin: 0 20px; } .action-btn.action-btn-big { color: #333; font-size: 30px; } .action-btn:focus { outline: 0; } .music-info { background-color: rgba(255, 255, 255, 0.5); border-radius: 15px 15px 0 0; position: absolute; top: 0; left: 20px; width: calc(100% - 40px); padding: 10px 10px 10px 150px; opacity: 0; transform: translateY(0%); transition: transform 0.3s ease-in, opacity 0.2s ease-in; z-index: 0; } .music-container.play .music-info { opacity: 1; transform: translateY(-100%); } .music-info h4 { margin: 0; color: #333; font-size: 20px; } .progress-container { background: #fff; border-radius: 5px; cursor: pointer; margin: 10px 0; height: 6px; width: 100%; } .progress { background-color: rgb(83, 245, 83); border-radius: 5px; height: 100%; width: 0%; transition: width 0.1s linear; }
const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');
// Song titles
const songs = ['不该', '搁浅', '听见下雨的声音', '哪里都是你', '晴天'];
// Keep track of song
let songIndex = 1;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `music/${song}.mp3`;
cover.src = `images/${song}.jpg`;
}
// Play song
function playSong() {
musicContainer.classList.add('play');
playBtn.querySelector('i.fas').classList.remove('fa-play');
playBtn.querySelector('i.fas').classList.add('fa-pause');
audio.play();
}
// Pause song
function pauseSong() {
musicContainer.classList.remove('play');
playBtn.querySelector('i.fas').classList.add('fa-play');
playBtn.querySelector('i.fas').classList.remove('fa-pause');
audio.pause();
}
// Previous song
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Next song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
// Update progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
}
// Set progress bar
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// Event listeners
playBtn.addEventListener('click', () => {
const isPlaying = musicContainer.classList.contains('play');
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change song
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
// Time/song update
audio.addEventListener('timeupdate', updateProgress);
// Click on progress bar
progressContainer.addEventListener('click', setProgress);
// Song ends
audio.addEventListener('ended', nextSong);