<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<style>
/* 樣式可自行修改 */
.container {
width: 600px;
margin: 0 auto;
}
h2 {
text-align: center;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.progress {
width: 400px;
height: 10px;
background-color: #ccc;
}
.progress-bar {
height: 10px;
background-color: #6cb0ff;
}
.info {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.song-info {
margin-left: 20px;
display: flex;
flex-direction: column;
}
.song-info span {
margin-bottom: 5px;
}
.song-list {
list-style: none;
padding: 0;
}
.song-list li {
margin-bottom: 5px;
cursor: pointer;
}
.song-list li.active {
color: #6cb0ff;
}
.play-mode {
display: flex;
align-items: center;
}
.play-mode span {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Music Player</h2>
<div class="controls">
<button id="prev">上一首</button>
<button id="play">播放</button>
<button id="next">下一首</button>
<div class="progress">
<div class="progress-bar"></div>
</div>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
</div>
<div class="info">
<img src="" alt="" id="cover">
<div class="song-info">
<span id="song-name">歌曲名稱(chēng)</span>
<span id="artist">歌手</span>
</div>
</div>
<ul class="song-list">
<li data-src="./music/song1.mp3">歌曲1</li>
<li data-src="./music/song2.mp3">歌曲2</li>
<li data-src="./music/song3.mp3">歌曲3</li>
</ul>
<div class="play-mode">
<span>播放模式：</span>
<button id="loop">循環(huán)</button>
<button id="random">隨機(jī)</button>
<button id="single">單曲</button>
</div>
</div>
<script>
const audio = new Audio(); // 創(chuàng)建音樂(lè)播放器對(duì)象
const songList = document.querySelectorAll('.song-list li');
const prevBtn = document.querySelector('#prev');
const playBtn = document.querySelector('#play');
const nextBtn = document.querySelector('#next');
const volumeSlider = document.querySelector('#volume');
const progressBar = document.querySelector('.progress-bar');
const coverImg = document.querySelector('#cover');
const songName = document.querySelector('#song-name');
const artistName = document.querySelector('#artist');
const loopBtn = document.querySelector('#loop');
const randomBtn = document.querySelector('#random');
const singleBtn = document.querySelector('#single');
let currentIndex = 0;
let isPlaying = false;
let playMode = 'loop'; // 默認(rèn)播放模式為循環(huán)
function playSong(index) {
const song = songList[index];
audio.src = song.dataset.src;
audio.play();
isPlaying = true;
playBtn.textContent = '暫停';
coverImg.src = `./images/cover${index+1}.jpg`;
songName.textContent = song.textContent;
artistName.textContent = '歌手名稱(chēng)';
songList.forEach((item) => {
item.classList.remove('active');
});
song.classList.add('active');
}
function getNextIndex() {
let nextIndex;
switch(playMode) {
case 'loop':
nextIndex = currentIndex + 1;
if (nextIndex >= songList.length) {
nextIndex = 0;
}
break;
case 'random':
nextIndex = Math.floor(Math.random() * songList.length);
break;
case 'single':
nextIndex = currentIndex;
break;
}
return nextIndex;
}
function updateProgress() {
const progress = audio.currentTime / audio.duration * 100;
progressBar.style.width = `${progress}%`;
}
function init() {
playSong(currentIndex);
}
init();
prevBtn.addEventListener('click', () => {
currentIndex--;
if (currentIndex < 0) {
currentIndex = songList.length - 1;
}
playSong(currentIndex);
});
nextBtn.addEventListener('click', () => {
currentIndex = getNextIndex();
playSong(currentIndex);
});
playBtn.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
isPlaying = false;
playBtn.textContent = '播放';
} else {
audio.play();
isPlaying = true;
playBtn.textContent = '暫停';
}
});
volumeSlider.addEventListener('input', () => {
audio.volume = volumeSlider.value;
});
audio.addEventListener('timeupdate', updateProgress);
progressBar.addEventListener('click', (e) => {
const width = progressBar.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = clickX / width * duration;
});
songList.forEach((song, index) => {
song.addEventListener('click', () => {
currentIndex = index;
playSong(currentIndex);
});
});
loopBtn.addEventListener('click', () => {
playMode = 'loop';
});
randomBtn.addEventListener('click', () => {
playMode = 'random';
});
singleBtn.addEventListener('click', () => {
playMode = 'single';
});
audio.addEventListener('ended', () => {
currentIndex = getNextIndex();
playSong(currentIndex);
});
</script>
</body>
</html>
這個(gè)實(shí)現(xiàn)了基本的播放/暫停、歌曲切換、音量控制、進(jìn)度條控制和顯示歌曲信息等功能，同時(shí)還支持播放模式切換和歌曲列表操作。不過(guò)這只是一個(gè)簡(jiǎn)單的示例，實(shí)際上還有很多功能需要進(jìn)一步完善和優(yōu)化，例如：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-766347.html
- 支持歌詞顯示和同步
- 支持播放列表編輯和保存
- 支持拖拽上傳歌曲
- 支持在線搜索歌曲
- 支持分享和評(píng)論等社交功能
這些功能的實(shí)現(xiàn)需要涉及到不同的技術(shù)和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入學(xué)習(xí)和掌握 Web 開(kāi)發(fā)技術(shù)，可以選擇相應(yīng)的學(xué)習(xí)路徑和教程進(jìn)行學(xué)習(xí)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-766347.html
到了這里，關(guān)于前端 用HTML，CSS, JS 寫(xiě)一個(gè)簡(jiǎn)易的音樂(lè)播放器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
