我想执行 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>有没有办法组合这些功能？
我认为这段代码将解决您的所有问题，您可以根据需要添加更多 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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句