尝试使用 switch case 通过相同的函数 javascript 播放不同的音频

trying to play diffrent audio through the same function javascript by using switch case

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8" />     
  <script>
   var audio;
   function initAudioPlayer() {
    audio = new Audio();
       Eplay = document.getElementById("E");
       Eplay.addEventListener("click", playPause("playE"));

      Aplay = document.getElementById("A");
       Aplay.addEventListener("click", playPause("playA"));
               switch (audio) {
                             case "playE":               
                      audio.src = "sound/Eguitar.mp3";
                                break;
                           case "playA":
                                 audio.src = "sound/A-guitar.mp3";
                               break;                                
                 default:  audio.src = "sound/highE-guitar.mp3";
                         } 
                 function playPause() {

                     if (audio.paused) {

                         audio.play();

                     } else {
                         audio.pause();    
                     }
             }
           }
             window.addEventListener("load", initAudioPlayer);
         </script>
    </head>
    <body>                  
        <div class="guitar">
        <button id="E">E </button>
       <button id="A">A </button>

        </div>

    </body>
</html>

> Blockquote

有人可以告诉我我做错了什么吗? 我正在尝试制作吉他调音器 尝试在不同情况下更改 audio.src。

您的 switch 语句应该位于从 Eplay 和 Aplay 元素上的点击事件调用的函数中。

在您的事件处理程序函数调用中,您传递的是字符串 "playE" 或 "playA",因此您需要将该参数添加到函数定义中以便使用它。尝试这样的事情:

function playPause(note) {
    switch(note) {
        case "playE" : 
            // Set audio src...
        break;
        case "playA" : 
            // Set audio src...
        break;
    }
    // Play or pause audio
}

1) 您的 playPause 函数在其签名中需要一个参数。比如,function playPause(chord) {

2) 在页面加载时,您的 switch (audio) 块只会 运行 一次。每次用户单击 play/pause 按钮时,您都希望它 运行,对吗?

将该块移动到 playPause() 函数。

3) 修复用于 switch 块的变量。

查看下面的代码并修复了以下问题:

var audio;
function initAudioPlayer() {
    audio = new Audio();
    Eplay = document.getElementById("E");
    Eplay.addEventListener("click", playPause("playE"));
    Aplay = document.getElementById("A");
    Aplay.addEventListener("click", playPause("playA"));
    function playPause(chord) {
         switch (chord) {
            case "playE":               
              audio.src = "sound/Eguitar.mp3";
              break;
            case "playA":
              audio.src = "sound/A-guitar.mp3";
              break;                                
            default:  audio.src = "sound/highE-guitar.mp3";
         } 
         if (audio.paused) {

             audio.play();

         } else {
             audio.pause();    
         }
    }   
}
window.addEventListener("load", initAudioPlayer);

尝试使用 this:Also 你的开关没有取任何值,你的函数 playPause() 传递参数来使用。

var audio,Eplay,Aplay;
   function initAudioPlayer() {
    
       Eplay = document.getElementById("E");
       Eplay.addEventListener("click", function(){playPause("playE");});//adding callback

      Aplay = document.getElementById("A");
       Aplay.addEventListener("click",function(){ playPause("playA");});//adding callback
            
               
           }

   function playPause(audio1) {//passing parameter here
    alert(audio1);
    audio = new Audio();
    switch (audio1) {
       case "playE":               
audio.src = "sound/Eguitar.mp3";
          break;
     case "playA":
           audio.src = "sound/A-guitar.mp3";
         break;                                
default:  audio.src = "sound/highE-guitar.mp3";
   } 
     if (audio.paused) {

         audio.play();

     } else {
         audio.pause();    
     }
}
             window.addEventListener("load", initAudioPlayer);
<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8" />     
  <script>
   
         </script>
    </head>
    <body>                  
        <div class="guitar">
        <button id="E">E </button>
       <button id="A">A </button>

        </div>

    </body>
</html>