尝试在按钮单击时播放随机图像和随机声音
[英]Trying to have a random image and random sound play on button click
问题描述
Images randomize successfully on button click but sounds will not play.
图像在按钮单击时成功随机化，但不会播放声音。 I don't know what is wrong with the audio JS but it been perplexing me.我不知道音频 JS 有什么问题，但它一直困扰着我。 I would like to get both to randomly execute while clicking the same button.我想让两者在单击同一个按钮时随机执行。 I am using Chrome to test my work.我正在使用 Chrome 来测试我的工作。
<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", "sound2.mp3", "sound3.mp3", "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)]; //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 个解决方案
解决方案1
0 已采纳 2020-04-29 01:48:20
You'll have to create an array of sounds like so:您必须像这样创建一组声音：
var sounds = ["sound1.mp3", "sound2.mp3", "sound3.mp3", "sound4.mp3"].map(
(sound) => new Audio(sound)
);
You also have a typo in the line starting with document.getElementById("Button").innerHTML , soundFile has a capital F .您在以document.getElementById("Button").innerHTML开头的行中也有错字， soundFile有一个大写字母F 。 Although I don't think you need that line, you can play the sound by calling play() on it, like soundFile.play() , please check the snippet below:尽管我认为您不需要该行，但您可以通过调用play()来播放声音，例如soundFile.play() ，请查看以下代码段：
//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( "https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" ), ]; // var sounds = new Audio([ // ("sound1.mp3", "sound2.mp3", "sound3.mp3", "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" />'; }
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.