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

Question

我想执行 jquery 个功能。

在第一次点击时播放一些特定的音频（例如，哔声 http://www.soundjay.com/button/beep-07.wav) of the user, then play the second sounds (e.g.Cat sounds 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>

有没有办法组合这些功能？

Answer 1

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

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

Answer 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;
}

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

Answer 3

我认为这段代码可以解决您的所有问题，您可以根据需要添加更多 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>

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

How to play 1st Audio on click, 2nd audio on second click, 3rd audio on third click, Jquery

javascript

audio

jquery

click

toggle