为了账号安全,请及时绑定邮箱和手机立即绑定

尝试在按钮单击时播放随机图像和随机声音

尝试在按钮单击时播放随机图像和随机声音

LEATH 2022-07-21 09:56:54
图像在按钮单击时成功随机化,但不会播放声音。我不知道音频 JS 有什么问题,但它一直困扰着我。我想让两者在单击同一个按钮时随机执行。我正在使用 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 回答

?
墨色风雨

TA贡献1853条经验 获得超6个赞

您必须像这样创建一组声音:


var sounds = ["sound1.mp3", "sound2.mp3", "sound3.mp3", "sound4.mp3"].map(

  (sound) => new Audio(sound)

);

您在开头的行中也有一个错字document.getElementById("Button").innerHTML,soundFile有一个大写字母F。虽然我认为您不需要那条线,但您可以通过调用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>


查看完整回答
反对 回复 2022-07-21
  • 1 回答
  • 0 关注
  • 71 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信