<!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);