Javascript 播放三个音频文件时如何降低当前音量

我有三个音频剪辑，我希望用户在单击时比较每个声音。这很好，但当我滑动音量时，它也开始播放其他声音。任何帮助都将不胜感激

<audio id="au1"><source src="assets/audio/HD.wav" ></audio>         
<audio id="au2"><source src="assets/audio/Digital.wav" ></audio>
<audio id="au3"><source src="assets/audio/Analog.wav"></audio>

 <div class="audioSlider">
    <img src="assets/img/speaker_icon.png"/>
    <input id="volume" min="0" max="1" step="0.1" type="range"/>
 </div>


<script>
 var au1 = document.getElementById('au1');
 var au2 = document.getElementById('au2');
 var au3 = document.getElementById('au3');

 au1.volume = 1;
 au2.volume = 0;
 au3.volume = 0;
 au1.play();
 au2.play();
 au3.play();

 $("#HD").click(function() {
   au1.volume = 1;
   au2.volume = 0;
   au3.volume = 0;

   if(au2.volume && au3.volume === 0){
      $('#volume').on("change", function() {
       var volume = document.getElementById("volume");
       au1.volume = volume.value;
      });
    }
 });
 $("#Digital").click(function() {
   au1.volume = 0;
   au2.volume = 1;
   au3.volume = 0;

   if(au1.volume && au3.volume === 0){
     $('#volume').on("change", function() {
       var volume = document.getElementById("volume");
       au2.volume = volume.value;
      });
    }
 });  

 $("#Analog").click(function() {
    au1.volume = 0;
    au2.volume = 0;
    au3.volume = 1;

    if(au1.volume && au2.volume === 0){
       $('#volume').on("change", function() {
          var volume = document.getElementById("volume");
          au3.volume = volume.value;
        });
     }
   }); 
</script>          

var au1=document.getElementById（'au1'）；
var au2=document.getElementById（'au2'）；
var au3=document.getElementById（'au3'）；
au1.体积=1；
au2.0体积=0；
au3.1体积=0；
au1.play（）；
au2.play（）；
au3.play（）；
$（“#HD”）。单击（函数（）{
au1.体积=1；
au2.0体积=0；
au3.1体积=0；
如果（au2.volume&&au3.volume==0）{
$（“#卷”）。关于（“更改”，函数（）{
var volume=document.getElementById（“卷”）；
au1.volume=volume.value；
});
}
});
$（“#数字”）。单击（函数（）{
au1.1体积=0；
au2.1体积=1；
au3.1体积=0；
如果（au1.volume&&au3.volume==0）{
$（“#卷”）。关于（“更改”，函数（）{
var volume=document.getElementById（“卷”）；
au2.volume=volume.value；
});
}
});  
$（“#模拟”）。单击（函数（）{
au1.1体积=0；
au2.0体积=0；
au3.1体积=1；
如果（au1.volume&&au2.volume==0）{
$（“#卷”）。关于（“更改”，函数（）{
var volume=document.getElementById（“卷”）；
au3.volume=volume.value；
});
}
}); 

我猜滑块的所有事件处理程序都在启动。您可以通过添加console.log语句来验证这一点

我认为你的逻辑是错误的

尝试更改事件处理程序，如下所示：

   $('#volume').on("change", function() {
     if(0 === au2.volume && 0 === au3.volume){
       var volume = document.getElementById("volume");
       au1.volume = volume.value;
     }
    })

---

类似地，对于模拟和数字，只需使用jquery.au1.pause（）暂停音频即可；au2.暂停（）；au3.play（）；我不能暂停，因为每当用户想要比较sound1与sound3或sound2时，它们都是一致的，并且对它们有不同的效果。我将所有声音都静音，但当我修改音量时，会播放其他声音：(