The HTML muted attribute is used to specify that audio output should be muted by default when the page loads.
Definition and Usage
➔ If the muted attribute is used with the <audio> and <video> elements, the audio output should remain muted by default until the user or JavaScript unmutes it.
➔ It is recommended to use the muted attribute together when using the autoplay or loop attribute on the <audio>, <video> elements.
➔ The muted attribute is boolean, and the values muted="muted", muted="true", or just muted have the same effect.
➔ The default value of the mute attribute is false.
Syntax
//In HTML
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3 -->
<audio id="myaudio" controls muted>
<source src="mysound.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video id="myvideo" controls autoplay muted width="450" height="250">
<source src="mymovie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
//In JavaScript
<script>
const element = document.getElementById('myvideo');
element.muted = true;
element.setAttribute('muted', 'false');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML muted attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
margin: 20px 0px;
}
input[type='submit'] {
width: 120px;
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
text-align: center;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="div1" class="mydiv">
<h3>HTML muted attribute example</h3>
<p>The muted attribute is used to specify that the audio output should be muted by default.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3" -->
<audio id="myaudio" controls muted>
<source
src="resources/media/seaside.mp3" type="audio/mp3">
This browser does not support the video tag.
</audio><br><br>
<input id="audioloop" type="submit" value="Loop" onclick="audiotoggleLoop()">
<input id="audioplay" type="submit" value="Play" onclick="audioplaypause()">
<input type="submit" value="Stop" onclick="audioStop()">
</div>
<div id="div2" class="mydiv">
<h3>HTML muted attribute example</h3>
<p>The muted attribute is used to specify that the audio output should be muted by default.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video id="myvideo" controls autoplay muted>
<source
src="resources/media/seaside.mp4"
type="video/mp4">
This browser does not support the video tag.
</video><br><br>
<input id="loop" type="submit" value="Loop" onclick="toggleLoop()">
<input id="play" type="submit" value="Play" onclick="playpause()">
<input type="submit" value="Stop" onclick="videoStop()">
</div>
</body>
<script>
//for audio
let myaudio = document.getElementById("myaudio");
let audiobuttonLoop = document.getElementById("audioloop");
let audiobuttonPlay = document.getElementById("audioplay");
function audiotoggleLoop() {
if (myaudio.loop) {
myaudio.loop = false;
audiobuttonLoop.value = "Loop Stopped";
} else {
myaudio.loop = true;
audiobuttonLoop.value = "Loop Running";
}
}
function audioplaypause() {
if (myaudio.paused) {
myaudio.play();
audiobuttonPlay.value = "Pause"
} else if (myaudio.play) {
myaudio.pause();
audiobuttonPlay.value = "Play";
}
}
function audioStop() {
myaudio.pause();
myaudio.currentTime = 0;
audiobuttonPlay.value = "Play";
}
//for video
let myvideo = document.getElementById("myvideo");
let buttonLoop = document.getElementById("loop");
let buttonPlay = document.getElementById("play");
function toggleLoop() {
if (myvideo.loop) {
myvideo.loop = false;
buttonLoop.value = "Loop Stopped";
} else {
myvideo.loop = true;
buttonLoop.value = "Loop Running";
}
}
function playpause() {
if (myvideo.paused) {
myvideo.play();
buttonPlay.value = "Pause"
} else if (myvideo.play) {
myvideo.pause();
buttonPlay.value = "Play";
}
}
function videoStop() {
myvideo.pause();
myvideo.currentTime = 0;
buttonPlay.value = "Play";
}
</script>
</html>
Click on the "Try it Now" button to see how it works.