Hello friends, Wellcome to edusynth.in — If you want to add audio to your website with a modern and clean design, this custom audio player code is a perfect solution. It replaces the default browser player with something that looks better, works better, and gives users more control.
The player supports playing audio, showing the track title, and allowing downloads. It also works smoothly on both desktop and mobile.
Table of Contents
Why Use a Custom Audio Player?
The default <audio> tag doesn’t offer much flexibility. This responsive audio player gives you full control over how the player looks and functions.
It includes a play/pause toggle, download button, and title display. One key feature is that when a user plays one track, any other playing track is automatically paused. This avoids overlapping sound and improves the overall experience.
The design is lightweight and mobile-friendly, which makes it suitable for modern websites.
Where Can You Use This Code?
You can use this custom audio player for website on many types of projects, such as:
- Music or ringtone websites
- Sound effects download pages
- Educational sites with voice recordings
- Podcasts or demo tracks
- Personal blogs or portfolio sites
How to Use This Audio Player
To install this audio player, you will add three code blocks to your webpage:
- HTML Code
- CSS Code
- JavaScript Code
Each code block is marked as enter your code below. Replace those sections with the actual code.
What You Need to Change in the Code
Inside the HTML block, you’ll find the main audio player structure. You must update the following:
data-audio="enter audio play url"
Replace this with the URL of your audio filedata-download="enter audio download url"
Replace this with the download link of your filedata-title="enter audio title"
Write the name of the audio track (e.g., "Relaxing Music")
You can duplicate the entire <div class="audio-player"> block to add more tracks.
HTML Code
<div class="audio-container">
<!-- Player 1 -->
<div class="audio-player"
data-audio="enter audio play url"
data-download="enter audio download url"
data-title="enter audio tittle">
<div class="left-controls">
<div class="play-btn">
<i class="fas fa-play play-icon"></i>
</div>
<span class="track-title">T-Rex Roar</span>
<audio></audio>
</div>
<a class="download-btn" download>
<i class="fas fa-download download-icon"></i>
</a>
</div>
<!-- Player 2-->
<div class="audio-player"
data-audio="enter audio play url"
data-download="enter audio download url"
data-title="enter audio tittle">
<div class="left-controls">
<div class="play-btn">
<i class="fas fa-play play-icon"></i>
</div>
<span class="track-title">T-Rex Roar</span>
<audio></audio>
</div>
<a class="download-btn" download>
<i class="fas fa-download download-icon"></i>
</a>
</div>
<!-- add more players-->
</div>
<!-- add your more information like (heading, paragraphs and more)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
CSS Code
This controls the layout, spacing, colors, and responsiveness.
.audio-container{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:760px;margin:40px auto}
.audio-player{display:flex;align-items:center;justify-content:space-between;background:#ffffff;padding:10px 15px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,0.08);width:100%;max-width:360px;box-sizing:border-box}
@media (min-width:768px){.audio-player{width:calc(50% - 10px)}
}
.left-controls{display:flex;align-items:center;gap:10px}
.play-btn{width:40px;height:40px;background:#eee;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background 0.2s}
.play-btn:hover{background:#ddd}
.play-icon{font-size:18px;color:#007bff}
.track-title{font-size:14px;font-weight:bold;color:#333}
audio{display:none}
.download-btn{width:36px;height:36px;background:#eee;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.2s}
.download-btn:hover{background:#ddd}
.download-icon{font-size:16px;color:#666}
JavaScript Code
This makes the player functional and handles playback, icon change, and auto-pause.
document.querySelectorAll('.audio-player').forEach(player => {
const audio = player.querySelector('audio');
const playBtn = player.querySelector('.play-btn');
const playIcon = player.querySelector('.play-icon');
const downloadBtn = player.querySelector('.download-btn');
const title = player.querySelector('.track-title');
audio.src = player.dataset.audio;
downloadBtn.href = player.dataset.download;
title.textContent = player.dataset.title;
function pauseOthers(currentPlayer) {
document.querySelectorAll('.audio-player').forEach(other => {
if (other !== currentPlayer) {
const otherAudio = other.querySelector('audio');
const otherIcon = other.querySelector('.play-icon');
otherAudio.pause();
otherIcon.className = 'fas fa-play play-icon';
}
});
}
playBtn.addEventListener('click', () => {
if (audio.paused) {
pauseOthers(player);
audio.play();
playIcon.className = 'fas fa-volume-up play-icon';
} else {
audio.pause();
playIcon.className = 'fas fa-play play-icon';
}
});
audio.addEventListener('ended', () => {
playIcon.className = 'fas fa-play play-icon';
});
});
How to Add more audio player
If you want to add more audio players to your webpage, you can simply copy the code below and paste it above the last player inside the main container. Each player works independently and will follow the same style and behavior. You only need to update the data-audio, data-download, and data-title values with your own track details.
<!-- Player x -->
<div class="audio-player"
data-audio="enter audio play url"
data-download="enter audio download url"
data-title="tittle">
<div class="left-controls">
<div class="play-btn">
<i class="fas fa-play play-icon"></i>
</div>
<span class="track-title">T-Rex Roar</span>
<audio></audio>
</div>
<a class="download-btn" download>
<i class="fas fa-download download-icon"></i>
</a>
</div>
<!-- add more players above -->
Why This Code Is Helpful
This HTML audio player improves how audio is displayed and used on your site. It gives a better look, smoother controls, and is easy to install without using any external libraries.
It works great on mobile. On smaller screens, it adjusts the size and layout to stay usable. On desktop, multiple players align neatly in a grid layout.
You don’t need any advanced skills — just paste the code, change your URLs and titles, and your custom player is live.
Download and Demo Audio player project
If you want to see the demo first, you can click the Demo button below. And if you want to get the entire code in one file, you can click the Download button to download it.
Note:This content has been created with the help of AI to ensure clarity, readability, and completeness. All information has been reviewed and customized to serve human readers.
How do I add multiple audio players using this code?
To add more players, simply copy the audio player block in the HTML section and paste it above the last player. Then, update the data-audio, data-download, and data-title values for each new audio file.
Is this custom audio player responsive on mobile devices?
Yes, this custom audio player is fully responsive. It automatically adjusts layout, spacing, and buttons to fit all screen sizes, including smartphones and tablets.
What should I change in the HTML audio player code?
You only need to update the data-audio with your audio file URL, data-download with your download link, and data-title with the track name. No other parts of the code need editing.
Related Posts
Final Thoughts
If you want a fast, clean, and professional way to offer audio on your site, this code is a smart choice. It is fully responsive, looks modern, and works reliably across all devices and browsers.
Just replace the placeholders, and you’re ready to offer sound in a better way — whether it's music, sound effects, podcasts, or learning content.
