如何在视频上创建切换声音按钮

Question

>我最近问了一个关于如何执行工作切换播放按钮的问题，我省略了声音部分，我认为它可以以完全相同的方式完成。我现在意识到它比我想象的要复杂一些。

到目前为止，我已经能够更改声音图标，但是我不知道如何使实际音频静音和取消静音。这是我的代码：

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>

Answer 1

可以使用volume属性来设置或返回视频的当前音量。

因此，toggleSnd看起来像这样：

function toggleSnd () {
video.volume = video.volume > 0 ? 0 : 1;
}