Нажатие кнопки Audio Start и Stop JS

Question

Хотите знать, как остановить текущий звук и запустить новый? Прямо сейчас аудио накладывается друг на друга, и это может быть очень перемешанным. В настоящее время у меня есть массив случайного звука, который играет. Однако, если вы нажмете кнопки в быстрой последовательности, звук будет перекрываться. Я не против, чтобы кнопка была неактивной до тех пор, пока звук не остановится.

 <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>

Answer 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" width="640"></p>
<p><input id="Button" type="button" value="Random" /></p>

Я бы просто сохранил Источник в массиве, а не в Объекте. Затем, используя HTML5, вы можете создать (и скрыть) тег <audio> со всеми необходимыми свойствами. После создания вы можете вызвать методы элемента DOM для .play().

. Вы можете использовать:

aud[0].play();

Или:

aud.get(0).play();

Подробнее: https://api.jquery.com/get/