Nature Themed Audio Player

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nature-themed Audio Player</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #e0f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #004d40;
}
.audio-player {
background: #ffffff;
border: 2px solid #004d40;
border-radius: 25px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 0 15px rgba(0, 77, 64, 0.5);
transition: all 0.3s ease;
}
.audio-player:hover {
box-shadow: 0 0 25px rgba(0, 77, 64, 0.7);
}
.audio-player button {
background: none;
border: 2px solid #004d40;
border-radius: 50%;
color: #004d40;
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: #004d40;
color: #ffffff;
}
.audio-player button:active {
background-color: #00352c;
color: #ffffff;
}
.audio-player .progress-bar {
position: relative;
flex: 1;
height: 10px;
background-color: #80cbc4;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
.audio-player .progress-bar .progress {
background-color: #004d40;
height: 100%;
width: 0;
transition: width 0.1s linear;
}
.audio-player .time {
min-width: 50px;
text-align: right;
}
.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';
} else {
audio.pause();
playIcon.style.display = 'inline';
pauseIcon.style.display = 'none';
}
});
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>

Nature Themed Audio Player - VexaX