如何在单击时播放第一个音频，在第二次单击时播放第二个音频，在第三次单击时播放第三个音频，Jquery答案

【问题标题】：How to play 1st Audio on click, 2nd audio on second click, 3rd audio on third click, Jquery如何在单击时播放第一个音频，在第二次单击时播放第二个音频，在第三次单击时播放第三个音频，Jquery
【发布时间】：2021-06-18 23:09:02
【问题描述】：

我想执行 jquery 函数。

在用户的第一次点击时播放一些特定的音频（例如哔声http://www.soundjay.com/button/beep-07.wav），然后在第二次点击时播放第二个声音（例如猫的声音http://static1.grsites.com/archive/sounds/animals/animals021.wav），在第三次点击时播放第三个音频等等.这是代码。

<body>
  
  
  <style>#container{
  width:100vw;height:100vh;
  background-color:red;
}</style>
    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();           }
   </script>

<div id="container" value="PLAY"  onclick="play()"> CLICK  
   <!--SOUND-1-->
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" >
   <!--SOUND-2-->
<audio id="audio" src="http://static1.grsites.com/archive/sounds/animals/animals021.wav" ></audio>
 <!--SOUND-3-->
<audio id="audio" src=" http://static1.grsites.com/archive/sounds/animals/animals011.wav" ></audio>
  
  
  
  
  
  
 </body>

有没有办法组合功能？

【问题讨论】：

标签： javascript jquery audio click toggle

【解决方案1】：

我认为此代码将解决您的所有问题，您可以根据需要添加更多 mp3，并且无论何时单击播放按钮，它都会停止现有的 mp3 并连续播放新的 mp3 jsfiddle

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
  
  
  <style>#container{
  width:100vw;height:100vh;
  background-color:red;
}</style>
  

<div id="container"> 
  <button id="play_sound">Click to play</button>
</div>
<script>
    const sounds = [
      "http://www.soundjay.com/button/beep-07.wav",
      "http://static1.grsites.com/archive/sounds/animals/animals021.wav",
      "http://static1.grsites.com/archive/sounds/animals/animals011.wav"
    ];
        let soundIndex = 0;
    let audio;
    $("#play_sound").on("click",()=>{
                console.log(sounds[soundIndex]) 
        if(audio){
            audio.pause();
                    audio.currentTime = 0;
        }
            audio = new Audio(sounds[soundIndex++]);
                audio.play();
        soundIndex > 2 && (soundIndex = 0);
    })
  </script>
 </body>

【讨论】：

【解决方案2】：

我会做的是这样的：

首先，将此音频标签放入您的正文代码中：<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" >
然后创建计算按钮点击次数的函数，并切换音频元素的 src：

let clickCount = 0;
function play() {
  const audio = document.getElementById("audio")
  switch(clickCount) {
  case 1:
    audio.src = "http://static1.grsites.com/archive/sounds/animals/animals021.wav"
    break;
  case 2:
    audio.src = "http://static1.grsites.com/archive/sounds/animals/animals011.wav"
    break;
  default:
    audio.src = "http://www.soundjay.com/button/beep-07.wav";
    click = 0;
  audio.play();
  click += 1;
  break;
}

如果我是你的情况，我会这样做，但有很多方法可以做到，请随意使用我的代码:)

【讨论】：

【解决方案3】：

这是您代码的简单修改版本，它并不完美，但仅供您了解

<body>
  
  
  <style>
#container{
  width:100vw;height:100vh;
  background-color:red;
}
</style>
    <script>
    let clicks = 1;
  function play() {
    
       var audio = document.getElementById("audio" + clicks++);
       console.log(audio.id)
       audio.play();
       if (clicks > 3) clicks = 1;
       }
   </script>

<div id="container" value="PLAY"  onclick="play()"> CLICK  
   <!--SOUND-1-->
<audio id="audio1" src="http://www.soundjay.com/button/beep-07.wav" >
   <!--SOUND-2-->
<audio id="audio2" src="http://static1.grsites.com/archive/sounds/animals/animals021.wav" ></audio>
 <!--SOUND-3-->
<audio id="audio3" src=" http://static1.grsites.com/archive/sounds/animals/animals011.wav" ></audio>
  
 </body>

【讨论】：