Случайный аудио файл каждый раз, когда я обновляю

Question

Первый пост здесь.Я делаю свои первые шаги в html, css и java, поэтому у меня есть первый вопрос.У меня есть несколько аудиофайлов, прикрепленных к "квадратным фигурам", сделанным с помощью css.Когда вы нажимаете это, это звучит.Просто.Теперь я хочу, чтобы каждый раз, когда я обновлял свой веб-сайт, эти аудиофайлы изменялись случайным образом другими аудиофайлами в моей папке.Я просто не могу этого достичь.Какой код я могу использовать в сценарии Java для этого?

Спасибо !!

function Play1() {
  document.getElementById('audio1').play();
}

function Play4() {
  document.getElementById('audio4').play();
}

function Play5() {
  document.getElementById('audio5').play();
}

function Play2() {
  document.getElementById('audio2').play();
}

function Play6() {
  document.getElementById('audio6').play();
}

function Play3() {
  document.getElementById('audio3').play();
}

function Play7() {
  document.getElementById('audio7').play();
}

function Play8() {
  document.getElementById('audio8').play();
}

function Play9() {
  document.getElementById('audio9').play();
}

function Play10() {
  document.getElementById('audio10').play();
}

function Play11() {
  document.getElementById('audio11').play();
}

function Play12() {
  document.getElementById('audio12').play();
}

function Play13() {
  document.getElementById('audio13').play();
}

function Play14() {
  document.getElementById('audio14').play();
}

body {
  background: black;
}

.VolumenCuadrado1 {
  width: 80px;
  margin: auto;
  height: 100px;
  position: absolute;
  bottom: 20px;
  right: 800px;
}

.cuadrado1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado1:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado1 {
  width: 100px;
  margin: auto;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 20px;
  right: 800px;
}

.cuadrado2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado2:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado2 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 20px;
  right: 690px;
}

.cuadrado3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado3:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado3 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 20px;
  right: 580px;
}

.cuadrado4 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado4:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado4 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 20px;
  right: 470px;
}

.cuadrado5 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado5:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado5 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 20px;
  right: 360px;
}

.cuadrado6 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado6:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado6 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 130px;
  right: 800px;
}

.cuadrado7 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado7:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado7 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 130px;
  right: 690px;
}

.cuadrado8 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado8:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado8 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 130px;
  right: 580px;
}

.cuadrado9 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado9:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado9 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 130px;
  right: 470px;
}

.cuadrado10 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado10:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado10 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 130px;
  right: 360px;
}

.cuadrado11 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado11:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado11 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 240px;
  right: 800px;
}

.cuadrado12 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado12:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado12 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 240px;
  right: 690px;
}

.cuadrado13 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado13:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado13 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 240px;
  right: 580px;
}

.cuadrado14 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado14:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado14 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 240px;
  right: 470px;
}

.cuadrado15 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado15:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado15 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 240px;
  right: 360px;
}

.cuadrado16 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado16:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado16 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 350px;
  right: 800px;
}

.cuadrado17 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado17:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado17 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 350px;
  right: 690px;
}

.cuadrado18 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado18:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado18 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 350px;
  right: 580px;
}

.cuadrado19 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado19:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado19 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 350px;
  right: 470px;
}

.cuadrado20 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

.cuadrado20:hover {
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cuadrado20 {
  width: 100px;
  height: 100px;
  background: #428bca;
  position: absolute;
  top: 350px;
  right: 360px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Nicolas Ibañez</title>
  <link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
</head>

<body>
  <div class="cuadrados">

    <div class="cuadrado1" onclick="Play1()"></div>
    <div class="cuadrado2"> </div>
    <div class="cuadrado3" onclick="Play7()"></div>
    <div class="cuadrado4" onclick="Play3()"></div>
    <div class="cuadrado5" onclick="Play4()"></div>
    <div class="cuadrado6"> </div>
    <div class="cuadrado7" onclick="Play13()"></div>
    <div class="cuadrado8" onclick="Play5()"></div>
    <div class="cuadrado9" onclick="Play6()"></div>
    <div class="cuadrado10"> </div>
    <div class="cuadrado11" onclick="Play2()"></div>
    <div class="cuadrado12"> </div>
    <div class="cuadrado13" onclick="Play11()"></div>
    <div class="cuadrado14" onclick="Play12()"></div>
    <div class="cuadrado15" onclick="Play8()"></div>
    <div class="cuadrado16" onclick="Play9()"></div>
    <div class="cuadrado17"> </div>
    <div class="cuadrado18" onclick="Play10()"></div>
    <div class="cuadrado19" onclick="Play14()"></div>
    <div class="cuadrado20"> </div </div>

    <audio id="audio1">
				  	<source src="audio/Pad1.wav">
					</audio>

    <audio id="audio2">
				  	<source src="audio/Pad2.wav">
					</audio>

    <audio id="audio3">
				  	<source src="audio/Pad3.wav">
					</audio>

    <audio id="audio4">
				  	<source src="audio/String1.wav">
					</audio>

    <audio id="audio5">
				  	<source src="audio/String2.wav">
					</audio>

    <audio id="audio6">
				  	<source src="audio/String3.wav">
					</audio>

    <audio id="audio7">
				  	<source src="audio/String4.wav">
					</audio>

    <audio id="audio8">
				  	<source src="audio/String5.wav">
					</audio>

    <audio id="audio9">
				  	<source src="audio/String6.wav">
					</audio>

    <audio id="audio10">
				  	<source src="audio/String7.wav">
					</audio>

    <audio id="audio11">
				  	<source src="audio/Solo1.wav">
					</audio>

    <audio id="audio12">
				  	<source src="audio/Solo2.wav">
					</audio>

    <audio id="audio13">
				  	<source src="audio/Solo3.wav">
					</audio>

    <audio id="audio14">
				  	<source src="audio/Solo4.wav">
					</audio>


    <script src="js/java.js"></script>
</body>

</html>

Answer 1

вы можете использовать что-то вроде этого:

Math.floor(Math.random()*10)

Чтобы сгенерировать случайное число, а затем я бы вместо этого изменил все эти функции с помощью .play () на оператор switch и сделал что-то вроде этого:

function play() {
  let number = Math.floor(Math.random()*10)
  switch(number) {
    case 1:
      document.getElementById('audio1').play();
      break;
    case 2:
      document.getElementById('audio2').play();
      break;
    default:
      return false
  }
}

И затем запустить play (), используя "window.onload" или "document.onload".

Надеюсь, это поможет

Ллойд