Question

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

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

Answer 1

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

我认为你的逻辑是关闭的。

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

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

同样适用于#Analog和#Digital。

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

1 个答案: