按钮单击音频启动和停止 JS
Posted
技术标签:
【中文标题】按钮单击音频启动和停止 JS【英文标题】:Button Click Audio Start and Stop JS 【发布时间】:2020-04-30 20:38:11 【问题描述】:想知道如何停止当前音频并开始新的音频?现在,音频相互重叠,可能会变得非常混乱。我目前有一组随机播放的音频。但是,如果您快速连续单击按钮,音频将重叠。我不反对在音频停止之前让按钮无法点击。
<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>
【问题讨论】:
【参考方案1】:考虑以下代码。
$(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" ></p>
<p><input id="Button" type="button" value="Random" /></p>
我只会将源存储在数组中而不是对象中。然后使用 HTML5,您可以创建(和隐藏)具有所有适当属性的 <audio>
标记。创建后,您可以调用 .play()
的 DOM 元素方法。
你可以使用:
aud[0].play();
或者:
aud.get(0).play();
查看更多:https://api.jquery.com/get/
【讨论】:
以上是关于按钮单击音频启动和停止 JS的主要内容,如果未能解决你的问题,请参考以下文章