You can use volume property to set or return current volume of the video.
So the toggleSnd would look something like this:
function toggleSnd () {
video.volume = video.volume > 0 ? 0 : 1;
}
Solution 1 :
Problem :
I recently just asked a question on how to execute a working togglePlay button and I left out the sound part bc I thought it could be done the exact same way. I’m now realizing that it’s a bit more complicated than I thought.
So far I’ve been able to get the sound icon to change, but I can’t figure out how to get the actual audio to mute and unmute. Here’s my code:
const video = document.querySelector('.dvid');
const togglePause = document.querySelector('.toggle-pause');
const toggleSound = document.querySelector('.toggle-sound');
function togglePlay() {
const isPlaying = video.paused ? 'play' : 'pause';
video[isPlaying]();
}
function togglePlyBtn() {
if (this.paused) {
togglePause.innerHTML = '<img src="play.png">';
} else {
togglePause.innerHTML = '<img src="pause.png">';
}
}
function toggleSnd () {
}
function toggleSndBtn() {
if (this.muted === true) {
toggleSound.innerHTML = '<img src="mute.png">' ;
} else {
toggleSound.innerHTML = '<img src="sound.png">';
}
}
video.addEventListener('click', toggleSnd);
video.addEventListener('click', togglePlay);
video.addEventListener('pause', togglePlyBtn);
video.addEventListener('play', togglePlyBtn);
video.addEventListener('muted', toggleSndBtn);
toggleSound.addEventListener('click', toggleSndBtn);
togglePause.addEventListener('click', togglePlay); <video class="dvid" autoplay loop muted>
<source src="2amfreestyle.mp4" type="video/mp4"/>
<p>This browser does not support this video</p>
</video>
<footer class="indexfooter">
<div class="video-controls">
<button class="toggle-pause"> <img src="pause.png"> </button>
<button class="toggle-sound">
<img src="mute.png">
</button>