Javascript: add mute/unmute icon to the mute/unmute button

Question

I am a neewbie in Javascript: I made a mute/unmute button in a fixed position which mute a video in autoplay (no controls) while scrolling the page. But what if I want, instead the button with written MUTE/UNMUTE, just to show these 2 audio icons?

How should I change my js code in this case? I can not find a solution. Thanks in advance.

Here how it looks now, with the simple button:

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
    video.muted = !video.muted;
    btn.innerHTML = video.muted ? "Unmute":'Mute';
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description {
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}


#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
}

#myBtn {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<section class="video-container">

  <div class="video-description">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <div class="content">

    <button id="myBtn" onclick="myFunction()">Mute</button>
  </div>

Answer 1

EDIT:

To use Font Awesome icons, you will need to setup Font Awesome for your project, more info on setup here.

Once set up, you can declare the mute/unmute icons from Font Awesome as variables. You can then change the innerHTML of the button to toggle the mute/unmute icons when the video is muted or unmuted.

I've made some simple changes to your function and used a test video for the example. The code is mostly the same otherwise.

I've also included comments within the snippet below to explain what is going on.

Run the snippet to see it in action:

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

//declare unmute icon variable
var unmuteIcon = '<i class="fas fa-volume-up"></i>'

//declare mute icon variable
var muteIcon = '<i class="fas fa-volume-mute"></i>'

function myFunction() {
  // toggle the muted property of the video element
  video.muted = !video.muted;

  // if the video is muted, set the btn.innerHTML to unmuteIcon
  // otherwise, set it to the muteIcon
  if (video.muted) {
    btn.innerHTML = unmuteIcon;
  } else {
    btn.innerHTML = muteIcon;
  }
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description {
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
}

#myBtn {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">


<section class="video-container">

  <div class="video-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>

  <div class="content">
    <button id="myBtn" onclick="myFunction()"><i class="fas fa-volume-mute"></i></button>
  </div>