How to Add a Volume Control Slider to Audio Player (HTML, CSS, & JS)
Get ready to rock! This tutorial will guide you through building a simple audio player with a user-friendly volume control slider using HTML, CSS, and JavaScript.
What you will learn
We will cover how to:
- use the HTML audio element to add audio files to a web page.
- play and pause audio files.
- create a volume control slider using the
<input type="range">
element. - control the volume using the slider
- Display the volume
Now let's dive into the rhythm of development:
1. Setting the Stage with HTML
The first step is making sure we add all the correct HTML tags for the audio player. This will include creating the audio player, adding a sider and a display for the volume level.
i. Create the Audio Player:
<audio id="player" src="your-audio-file.mp3"></audio>
Here, id="player"
identifies the audio element for later control. Replace your-audio-file.mp3
with your actual audio file path.
ii. Craft the Volume Slider:
<input type="range" min="0" max="1" step="0.01" id="volume-slider" />
This code creates a slider with:
type="range"
: Specifies a range input element.min="0" max="1"
: Sets the volume range from 0 (mute) to 1 (full volume).step="0.01"
: Allows fine-grained adjustments with 0.01 increments.id="volume-slider"
: Identifies the slider for JavaScript interaction.
iii. Optional Volume Display:
<p id="volume-display">Volume: 50%</p>
This adds a paragraph (optional) to show the current volume level (using JavaScript later).
iv. Add a play/pause button
<button id="play">Play</button>
This adds a button with the word "play" which we will change to "pause" when the audio is playing.
2. Scripting the Symphony with JavaScript:
Now that we have our HTML elements in place, let's add some javascript to give our volume controls some functionality
Connect the Players:
const player = document.getElementById("player");
const volumeSlider = document.getElementById("volume-slider");
const volumeDisplay = document.getElementById("volume-display"); // Optional
const playPauseButton = document.getElementById("play");
This retrieves references to the player
, volumeSlider
, and volumeDisplay
elements.
Play the audio:
// This code will play or pause the audio when the button is clicked
playPauseButton.addEventListener("click", ()=>{
if (player.paused) { // check if the player is paused
player.play(); // Play the audio
playPauseButton.textContent = "Pause"; // Update button text to "Pause"
} else {
player.pause(); // Pause the audio
playPauseButton.textContent = "Play"; // Update button text to "Play"
}
});
This code adds an eventListener to our playPauseButton
to handle click
events. Then when the button is clicked we check if the player is paused. If it is, we play the audio, if not, we pause the audio.
Slide for the Volume Control:
volumeSlider.addEventListener("input", () => {
player.volume = volumeSlider.value;
updateVolumeDisplay(); // Optional
});
This code:
- Listens for the
input
event on the slider. - Updates the
player.volume
with the slider's current value. - Runs the
updateVolumeDisplay
function to reflect the volume level (optional).
Updating the Volume Display (Optional):
function updateVolumeDisplay() {
volumeDisplay.textContent = `Volume: ${Math.floor(player.volume * 100)}%`;
}
This function updates the volumeDisplay
element to show the current volume percentage.
3. Styling the Show with CSS:
(This is optional but recommended for a visually appealing player)
- Style the player for aesthetic appeal using CSS selectors like
#player
. - Customize the slider appearance using CSS selectors like
#volume-slider
. - Adjust the font and position of the volume display element (optional).
Below is an example of how you can style your player. Create a div
and give it the ID: audio-player-container
. Place all the elements we created earlier inside the div
. Then add the following css:
/* Overall container */
#audio-player-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 20px;
border-radius: 10px;
background-color: #f2f2f2;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}
/* Audio player */
#player {
width: 100%;
margin-bottom: 15px;
}
/* Volume slider */
#volume-slider {
width: 150px;
-webkit-appearance: none; /* Remove default styling */
height: 5px;
background: #d3d3d3;
border-radius: 5px;
margin: 20px;
}
#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
background: #4CAF50;
border-radius: 50%;
cursor: pointer;
}
/* Volume display */
#volume-display {
font-size: 14px;
margin-bottom: 5px;
}
/* Play button */
#play {
background-color: #4CAF50; /* Match the slider thumb */
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
#play:hover {
background-color: #3e8e41; /* Darker green on hover */
}
After adding our styling, the audio player will look like this:
Get Groovin'
Follow these steps, customize the code and styling, and you'll have a cool music player with a slick volume control slider ready to rock your world! Remember, experiment, have fun, and create a music player that reflects your musical spirit!