Random audio file everytime I refresh

Question

First post here. I'm doing my first steps in html, css and java, so I have my first question. I have some audio files attached to "squares's figures" made with css. When you press it, it sounds. Simple. Now I want that everytime I refresh my website this audio files are changed randomly by others audio files on my folder. I just can't achieve it. What kind of code can I use on the java script to do that?

Thanks!!

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>

Possible duplicate of [Get random item from JavaScript array](https://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array) — Alexei Levenkov, Dec 06 '18 at 03:37

Lloyd · Answer 1 · 2018-12-07T07:48:06.520

0

you can use something like this:

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

To generate a random number, and then i would change all those functions with .play() to a switch statement instead and do something like this:

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

And then fire play() using "window.onload" or "document.onload".

Hope this helps

Lloyd

edited Dec 07 '18 at 07:48

answered Dec 06 '18 at 04:13

Lloyd

256
1
8

Hi, thanks! I was reading about the Math.floor(Math.random()*10) and I think is the right solution, although I still can't get it to work. I used your example but no audio file is played and neither the others. When I delete "code block" the rest starts to work. I don't understand too this about replacing play() by "window.onload". Sorry if my questions are stupid – rogerdavid Dec 06 '18 at 20:37
all switch statements require a default case, so if none of the cases are satisfied it runs the default code block, instead of code block just put return false, i will edit my code for you. window.onload is just an event that fires when page loads, you will obviously use a click event. – Lloyd Dec 07 '18 at 07:47

Random audio file everytime I refresh

1 Answers1