网页版音乐播放器代码

好的,我可以提供一个简单的网页版音乐播放器的代码示例供您参考。以下代码使用了 HTML、CSS 和 JavaScript 实现了一个基本的音乐播放器功能:

HTML:

html

CSS:

css

body {

font-family: Arial, sans-serif;

background-color: #f1f1f1;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.music-player {

background-color: white;

border-radius: 10px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

display: flex;

padding: 20px;

}

.album-cover {

margin-right: 20px;

}

.album-cover img {

width: 150px;

height: 150px;

border-radius: 5px;

}

.player-controls {

display: flex;

flex-direction: column;

justify-content: center;

}

.controls {

margin-top: 10px;

}

.controls button {

margin-right: 10px;

}

.progress-bar {

margin-top: 10px;

}

.progress-bar input[type="range"] {

width: 100%;

}

.progress-bar span {

font-size: 14px;

color: #888;

}

JavaScript:

javascript

const audio = new Audio();

const playBtn = document.getElementById('play-btn');

const prevBtn = document.getElementById('prev-btn');

const nextBtn = document.getElementById('next-btn');

const progressBar = document.getElementById('progress');

const currentTime = document.querySelector('.current-time');

const totalTime = document.querySelector('.total-time');

// Add your song playlist here

const songs = [

{ title: 'Song 1', src: 'song1.mp3' },

{ title: 'Song 2', src: 'song2.mp3' },

{ title: 'Song 3', src: 'song3.mp3' },

];

let currentSongIndex = 0;

function loadSong(index) {

audio.src = songs[index].src;

document.querySelector('.song-title').textContent = songs[index].title;

}

function playSong() {

if (audio.paused) {

audio.play();

playBtn.textContent = 'Pause';

} else {

audio.pause();

playBtn.textContent = 'Play';

}

}

function prevSong() {

currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;

loadSong(currentSongIndex);

playSong();

}

function nextSong() {

currentSongIndex = (currentSongIndex + 1) % songs.length;

loadSong(currentSongIndex);

playSong();

}

function updateProgress() {

progressBar.value = (audio.currentTime / audio.duration) * 100;

currentTime.textContent = formatTime(audio.currentTime);

totalTime.textContent = formatTime(audio.duration);

}

function formatTime(time) {

const minutes = Math.floor(time / 60);

const seconds = Math.floor(time % 60);

return `${minutes}:${seconds.toString().padStart(2, '0')}`;

}

playBtn.addEventListener('click', playSong);

prevBtn.addEventListener('click', prevSong);

nextBtn.addEventListener('click', nextSong);

audio.addEventListener('timeupdate', updateProgress);

这个代码示例提供了一个基本的音乐播放器功能,包括播放/暂停、上一曲/下一曲、进度条显示等。您可以根据需要对 HTML、CSS 和 JavaScript 代码进行修改和扩展,以实现更丰富的功能。