按钮单击音频启动和停止 JS

Question

Wondering how to stop the current audio and have a new one start?想知道如何停止当前音频并开始新的音频吗？ Right now the audio overlays each other and it can get very jumbled.现在，音频相互重叠，可能会变得非常混乱。 I currently have an array of random audio that plays.我目前有一组随机播放的音频。 However, if you click the buttons in quick succession the audio will overlap.但是，如果您快速连续单击按钮，音频将重叠。 I am not opposed to having the button be unclickable until the audio stops as well.我不反对在音频停止之前让按钮无法点击。

 <script type = "text/javascript"> //Create random picture array function imgchange() { var myImages1 = new Array(); myImages1[1] = "Matthew1.jpg"; myImages1[2] = "Matthew2.jpg"; myImages1[3] = "Matthew3.jpg"; myImages1[4] = "Matthew4.jpg"; //Image Array myImages1[5] = "Matthew5.jpg"; myImages1[6] = "Matthew6.jpg"; myImages1[7] = "Matthew7.jpg"; var rnd = Math.floor(Math.random() * myImages1.length); // Random Choice of Image if (rnd == 0) { rnd = 1; } document.getElementById("gen-img").src = myImages1[rnd]; //Gets Image } function playRandomSound() { //An array to house all of the URLs of your sounds var sounds = [ new Audio("Sound1.mp3"), new Audio("Sound2.mp3"), new Audio("Sound4.mp3")]; //This line will select a random sound to play out of your provided URLS var soundFile = sounds[Math.floor(Math.random() * sounds.length)]; soundFile.play(); //Find the player element that you created and generate an embed file to play the sound within it document.getElementById("Button").innerHTML = '<embed src="' + soundFile + '" hidden="true" autostart="true" loop="false" />'; } </script>

 <body style="height: 663px"> <div class="Title" id="title">Alright. Alright; Alright;</div> <p><img id="gen-img" src="img/who/1.jpg"></p> <p> <input id="Button" type="button" value="Random" onclick="imgchange(); playRandomSound();"/></p> </body>

Answer 1

Consider the following code.考虑以下代码。

 $(function() { function pickRandom(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function imgChange() { var myImages = [ "https://i.imgur.com/dDRchZA.jpg", "https://i.imgur.com/4ILisqH.jpeg", "https://i.imgur.com/YkxAggs.png", "https://i.imgur.com/ZZhIZ9K.jpg", "https://i.imgur.com/UeLNtOi.png", "https://i.imgur.com/saWRUwn.png", "https://i.imgur.com/xM0RWTd.png" ]; $("#gen-img").attr("src", pickRandom(myImages)); } function playRandomSound() { var aud; var sounds = [ "Sound1.mp3", "Sound2.mp3", "Sound4.mp3" ]; if ($("audio").length) { aud = $("audio"); } else { aud = $("<audio>", { type: "audio/mp3" }).css("display", "none").appendTo("body"); } aud[0].pause(); aud[0].currentTime = 0; aud.attr("src", pickRandom(sounds)); aud[0].play(); } $("#Button").click(function() { imgChange(); playRandomSound(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="Title" id="title">Alright: Alright. Alright.</div> <p><img id="gen-img" src="https.//i.imgur.com/xM0RWTd.png" width="640"></p> <p><input id="Button" type="button" value="Random" /></p>

I would just store the Source in the Array not the Object.我只是将源存储在数组中，而不是 Object。 Then using HTML5, you can create (and hide) an <audio> tag with all the proper properties.然后使用 HTML5，您可以创建（和隐藏）具有所有适当属性的<audio>标记。 Once created, you can call the DOM Element Methods for .play() .创建后，您可以调用.play()的 DOM 元素方法。

You can use:您可以使用：

aud[0].play();

Or:或者：

aud.get(0).play();

See more: https://api.jquery.com/get/查看更多： https://api.jquery.com/get/

按钮单击音频启动和停止 JS

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-30 21:16:41

按钮单击音频启动和停止 JS

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-30 21:16:41

解决方案1
0 已采纳 2020-04-30 21:16:41