1

First, I shall start off by saying I am the worst coder you will ever meet. I'm trying to make a Javascript that allows me to press a single button and have a random sound play. My idea was to do a math random and to have a number correspond with a sound that would then do an if statement that would play. I really have no idea where to go from here. I actually have no idea if I'm even doing this right.

My Javascript

function myFunction() {
var x = Math.floor((Math.random() * 10) + 1);
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5", "sound6", "sound7", "sound8", "sound9", "sound10"];
sound1 = 1;
sound2 = 2;
sound3 = 3;
sound4 = 4;
sound5 = 5;
sound6 = 6;
sound7 = 7;
sound8 = 8;
sound9 = 9;
sound10 = 10;
sound1.src = "sound1.mp3";
//And so on of the sound files

}

My HTML

<button onclick="mySounds()">Click for a sound</button>
<p id="Sounds"></p>
Jacob Ridge
  • 17
  • 1
  • 7

3 Answers3

2

You can use method play() as in the following link. W3 Schools

And I think it's better if you go with Math.random() method. As in the followoing code you can define a max and min value.

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

The min number in your case would be 0 and max would be last item's index in your array. This should do it.

And if you change your array items directly the links to the sounds your code would even be shorter.

Cengiz Araz
  • 680
  • 9
  • 17
  • This will only work if you audio elements for each of the sounds. You'll have have to select those elements in order to call `play()` – Literphor Sep 20 '16 at 22:35
0

You need to add an Audio tag. This, only works if the browser supports HTML 5

You can read more about the audio tag here: http://www.w3schools.com/html/html5_audio.asp And the Audio DOM reference in here: http://www.w3schools.com/tags/ref_av_dom.asp

With those links you can easy achieve what you want to do.

And check these answer on how could you change the audio source

change <audio> src with javascript

Community
  • 1
  • 1
manuerumx
  • 1,230
  • 14
  • 28
0

You were right to use Math.random in order to randomly select the sound you want to play. All you have to do is map the number that is generated to index in your array of sounds.

You can then use jQuery to emit the sound you want to hear: https://github.com/admsev/jquery-play-sound

mySounds = [ 'sound1', 'sound2', 'sound3', 'sound4', 'sound5' ]
function randomSound() {
    var index = Math.floor(Math.random() * 1000) % mySounds.length;
    $.playSound('http://yourdomain.com/sounds/' + mySounds[index]);
}

I multiplied by 1000 because it's better to use a larger range of value. The mod ensures that we always get a value that fits the number of sounds you have.

If you don't want to use jQuery you have to create audio tags for each of the sounds you want and call them explicitly

HTML

<audio id="sound1" src="sounds/sound1" type="audio/wav">
<audio id="sound2" src="sounds/sound2" type="audio/wav">
<audio id="sound3" src="sounds/sound3" type="audio/wav">
<audio id="sound4" src="sounds/sound4" type="audio/wav">
<audio id="sound5" src="sounds/sound5" type="audio/wav">

Then select the element and play the sound

Javascript

mySounds = [ 'sound1', 'sound2', 'sound3', 'sound4', 'sound5' ]
function randomSound() {
    var index = Math.floor(Math.random() * 1000) % mySounds.length;
    var id = mySounds[index];
    var audioElement = document.getElementById(id);
    audioElement.play();
}
Literphor
  • 498
  • 4
  • 16
  • Isn't it better to keep the sound links in javascript array? According to your code if there are 200 sounds to choose from, the page will get slower. The browser will start to react slower as the number of elements increase. – Cengiz Araz Sep 20 '16 at 22:23
  • If he creates many audio elements it'll get slower because each sound has to be downloaded to the browser immediately after the page loads so yes there's a potential bottle neck there, but you can present a loading screen to the user and have them wait for everything to download. – Literphor Sep 20 '16 at 22:27
  • jQuery would download the sound once it's told to play it, but there's another potential bottleneck mattering on how large the file is and the user's internet connection. I'd opt for loading all the sounds immediately so they can play immediately when the button is clicked – Literphor Sep 20 '16 at 22:30