时间戳

首页 > 解决方案 > 尝试在按钮单击时播放随机图像和随机声音

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

问题描述

图像在按钮单击时成功随机化，但不会播放声音。我不知道音频 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>

标签： javascripthtmlbuttonaudiodom-events

解决方案

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

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>

推荐阅读