Modern Wave Player - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Wave Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #fc5c7d, #6a82fb);
font-family: 'Arial', sans-serif;
}
.audio-player {
background: #ffffff;
border-radius: 20px;
padding: 20px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
max-width: 400px;
width: 100%;
}
.audio-player img {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.audio-player audio {
width: 100%;
margin-bottom: 10px;
outline: none;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.controls button {
background: #fc5c7d;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
color: #fff;
cursor: pointer;
outline: none;
transition: transform 0.3s ease;
}
.controls button:hover {
transform: scale(1.1);
}
.progress-container {
position: relative;
height: 10px;
background: #e1e1e1;
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
}
.progress {
height: 100%;
width: 0;
background: #fc5c7d;
border-radius: 10px;
transition: width 0.1s;
}
.time {
font-size: 14px;
color: #333;
}
.emoji {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
}
.wave {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('https://i.imgur.com/YXZsY5F.png') repeat-x;
background-size: 50px 50px;
animation: wave 1s linear infinite;
opacity: 0.2;
}
@keyframes wave {
from { background-position: 0 0; }
to { background-position: 50px 0; }
}
</style>
</head>
<body>
<div class="audio-player">
<img src="https://i.imgur.com/ZXBtVw7.jpg" alt="Audio Cover">
<audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div class="controls">
<button type="button" id="playPauseBtn" title="Play"><i class="fas fa-play"></i></button>
<button type="button" id="stopBtn" title="Stop"><i class="fas fa-stop"></i></button>
</div>
<div class="progress-container">
<div class="progress"></div>
<div class="wave"></div>
</div>
<div class="time">
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
</div>
<div class="emoji">🎵</div>
</div>
<script>
const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('playPauseBtn');
const stopBtn = document.getElementById('stopBtn');
const progressContainer = document.querySelector('.progress-container');
const progress = document.querySelector('.progress');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
} else {
audio.pause();
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
}
});
stopBtn.addEventListener('click', () => {
audio.pause();
audio.currentTime = 0;
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
});
audio.addEventListener('timeupdate', () => {
const progressPercent = (audio.currentTime / audio.duration) * 100;
progress.style.width = `${progressPercent}%`;
const minutes = Math.floor(audio.currentTime / 60);
const seconds = Math.floor(audio.currentTime % 60);
currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
});
audio.addEventListener('loadedmetadata', () => {
const minutes = Math.floor(audio.duration / 60);
const seconds = Math.floor(audio.duration % 60);
durationEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
});
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
</script>
</body>
</html>