<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5迷你音乐播放器</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb);
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.music-player {
width: 300px;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
padding: 25px;
text-align: center;
position: relative;
z-index: 10;
backdrop-filter: blur(10px);
}
.album-art {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
animation: rotate 20s linear infinite;
animation-play-state: paused;
}
.album-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.player-controls {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(45deg, #ff9a9e, #fbc2eb);
border: none;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.control-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.play-btn {
width: 60px;
height: 60px;
font-size: 24px;
}
.song-info {
margin-bottom: 20px;
}
.song-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.artist {
font-size: 14px;
color: #666;
}
.progress-container {
width: 100%;
height: 5px;
background: #e0e0e0;
border-radius: 5px;
margin: 20px 0;
cursor: pointer;
}
.progress {
height: 100%;
background: linear-gradient(to right, #ff9a9e, #fbc2eb);
border-radius: 5px;
width: 0%;
transition: width 0.1s;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #666;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.visualizer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.footer {
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.footer a {
color: white;
text-decoration: none;
font-weight: bold;
}
.footer a:hover {
text-shadow: 0 0 10px white;
}
</style>
</head>
<body>
<div class="visualizer" id="visualizer"></div>
<div class="music-player">
<div class="album-art" id="albumArt">
<img src="https://picsum.photos/300/300" alt="Album Art">
</div>
<div class="song-info">
<div class="song-title" id="songTitle">未知歌曲</div>
<div class="artist" id="artist">未知艺术家</div>
</div>
<div class="progress-container" id="progressContainer">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="currentTime">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="player-controls">
<button class="control-btn" id="prevBtn">⏮</button>
<button class="control-btn play-btn" id="playBtn">▶</button>
<button class="control-btn" id="nextBtn">⏭</button>
</div>
</div>
<div class="footer">
</div>
<audio id="audioPlayer"></audio>
<script>
// 音乐播放器功能
const audioPlayer = document.getElementById('audioPlayer');
const playBtn = document.getElementById('playBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progressContainer');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const albumArt = document.getElementById('albumArt');
const songTitle = document.getElementById('songTitle');
const artist = document.getElementById('artist');
const visualizer = document.getElementById('visualizer');
// 音乐库
const songs = [
{
title: '夏日微风',
artist: '自然之声',
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
cover: 'https://picsum.photos/300/300?random=1'
},
{
title: '城市之夜',
artist: '电子乐队',
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
cover: 'https://picsum.photos/300/300?random=2'
},
{
title: '清晨阳光',
artist: '钢琴家',
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
cover: 'https://picsum.photos/300/300?random=3'
}
];
let currentSongIndex = 0;
let isPlaying = false;
// 初始化播放器
function loadSong(song) {
songTitle.textContent = song.title;
artist.textContent = song.artist;
audioPlayer.src = song.src;
albumArt.querySelector('img').src = song.cover;
}
// 播放歌曲
function playSong() {
isPlaying = true;
playBtn.textContent = '⏸';
albumArt.style.animationPlayState = 'running';
audioPlayer.play();
setupVisualizer();
}
// 暂停歌曲
function pauseSong() {
isPlaying = false;
playBtn.textContent = '▶';
albumArt.style.animationPlayState = 'paused';
audioPlayer.pause();
}
// 下一首
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(songs[currentSongIndex]);
if (isPlaying) playSong();
}
// 上一首
function prevSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong(songs[currentSongIndex]);
if (isPlaying) playSong();
}
// 更新进度条
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// 更新时间显示
const durationMinutes = Math.floor(duration / 60);
let durationSeconds = Math.floor(duration % 60);
if (durationSeconds < 10) durationSeconds = `0${durationSeconds}`;
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if (currentSeconds < 10) currentSeconds = `0${currentSeconds}`;
if (duration) {
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
}
}
// 设置进度条
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audioPlayer.duration;
audioPlayer.currentTime = (clickX / width) * duration;
}
// 设置音频可视化
function setupVisualizer() {
// 清除之前的可视化
visualizer.innerHTML = '';
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audioPlayer);
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 64;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
// 创建可视化元素
for (let i = 0; i < bufferLength; i++) {
const bar = document.createElement('div');
bar.style.position = 'absolute';
bar.style.bottom = '0';
bar.style.left = `${(i / bufferLength) * 100}%`;
bar.style.width = `${(1 / bufferLength) * 100}%`;
bar.style.height = '0';
bar.style.backgroundColor = `rgba(255, 255, 255, ${0.2 + Math.random() * 0.3})`;
bar.style.transition = 'height 0.1s';
visualizer.appendChild(bar);
}
const bars = visualizer.querySelectorAll('div');
function renderFrame() {
requestAnimationFrame(renderFrame);
analyser.getByteFrequencyData(dataArray);
bars.forEach((bar, i) => {
const value = dataArray[i] / 255;
const height = value * 100;
bar.style.height = `${height}%`;
bar.style.opacity = `${0.2 + value * 0.8}`;
});
}
renderFrame();
}
// 事件监听
playBtn.addEventListener('click', () => {
isPlaying ? pauseSong() : playSong();
});
nextBtn.addEventListener('click', nextSong);
prevBtn.addEventListener('click', prevSong);
audioPlayer.addEventListener('timeupdate', updateProgress);
audioPlayer.addEventListener('ended', nextSong);
progressContainer.addEventListener('click', setProgress);
// 加载第一首歌
loadSong(songs[currentSongIndex]);
</script>
</body>
</html>
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
