Solution 1 :

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;

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';

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>

<footer class="indexfooter">
  <div class="video-controls">
      <button class="toggle-pause"> <img src="pause.png"> </button>

      <button class="toggle-sound">
        <img  src="mute.png">