Stylish Audio Player

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Audio Player</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.audio-player {
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow: 5px 5px 10px #c8c8c8, -5px -5px 10px #ffffff;
border-radius: 25px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}
.audio-player:hover {
transform: scale(1.05);
}
.audio-player button {
background-color: #4caf50;
border: none;
border-radius: 50%;
color: white;
width: 50px;
height: 50px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.audio-player button:hover {
background-color: #45a049;
transform: scale(1.1);
}
.audio-player button:active {
background-color: #388e3c;
}
.audio-player .progress-bar {
position: relative;
flex: 1;
height: 10px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
.audio-player .progress-bar .progress {
background-color: #4caf50;
height: 100%;
width: 0;
transition: width 0.1s linear;
}
.audio-player .time {
min-width: 50px;
text-align: right;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.audio-player button.playing {
animation: pulse 1s infinite;
}
.display{display: none;}
</style>
</head>
<body>
<div class="audio-player">
<button type="button" id="play-pause"><span id="play-icon">▶️</span><span id="pause-icon" class="display">⏸️</span></button>
<div class="progress-bar" id="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="time" id="current-time">0:00</div>
</div>
<audio id="audio" src="your-audio-file.mp3"></audio>
<script>
const playPauseButton = document.getElementById('play-pause');
const playIcon = document.getElementById('play-icon');
const pauseIcon = document.getElementById('pause-icon');
const audio = document.getElementById('audio');
const progressBar = document.getElementById('progress-bar');
const progress = document.getElementById('progress');
const currentTimeDisplay = document.getElementById('current-time');
playPauseButton.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playIcon.style.display = 'none';
pauseIcon.style.display = 'inline';
playPauseButton.classList.add('playing');
} else {
audio.pause();
playIcon.style.display = 'inline';
pauseIcon.style.display = 'none';
playPauseButton.classList.remove('playing');
}
});
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
const duration = audio.duration;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = progressPercent + '%';
const minutes = Math.floor(currentTime / 60);
const seconds = Math.floor(currentTime % 60);
currentTimeDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
});
progressBar.addEventListener('click', (e) => {
const clickX = e.offsetX;
const width = progressBar.clientWidth;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
</script>
</body>
</html>

Stylish Audio Player - MeggiTools