Playing sound files at random.

EGuitarStar

EGuitarStar

EGuitarStar

Soldato
Joined
23 Dec 2009
Posts
3,252
Location
Earth
Morning folks,

I've got this piece of code on a webpage which works fine but I'd like to extend it so that I can define a number of mp3 files, and upon pressing the enter key one of the sound files is played at random.

So the code below at the moment plays sound_file.mp3 when the enter key is pressed and stops. This is fine, I just want it to take one at random instead from a defined list of files.

Code: 
$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 13) {  //tab pressed
    }
})

<audio id=playsound>
    <source src="sound_file.mp3">
</audio>

<script type="text/javascript">
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 13) {
        window.event.keyCode = 13;
    }
    if (window.event && window.event.keyCode == 13)
    document.getElementById('playsound').play();
}   
</script>


Any help appreciated. Cheers.
 
Last edited:
HTML: 
<script type="text/javascript">
var listOfFileSources = [
  "files/source1.mp3",
  "files/source2.mp3"
];

document.addEventListener("keydown", function () {
    if (window.event && window.event.keyCode == 13) {
      var audio = document.getElementById('playsound');
      audio.src = listOfFileSources[Math.floor(Math.random()*listOfFileSources.length)];
      audio.play();
    }
});
</script>

You may need to destroy and recreate the audio element, I can't remember from off the top of my head.
 
Last edited:
I couldn't it it to work. :(

Here is the code that I now have. I'm no programmer so difficult for me to know where the issue is, or even if any syntax is wrong or missing.

Code: 
$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 13) {  //enter pressed
    }
})

<script type="text/javascript">
var listOfFileSources = [
  "sounds/sound1.mp3",
  "sounds/sound2.mp3"
];

document.addEventListener("keydown", function () {
    if (window.event && window.event.keyCode == 13) {
      var audio = document.getElementById('listOfFileSources');
      audio.src = listOfFileSources[Math.floor(Math.random()*listOfFileSources.length)];
      audio.play();
    }
});
</script>
 
may be a silly question bu why not add the files to a list or array and have a random number generated that corrispondes to a sound file?
i.e. roll 1
1 = sons of anarchy

roll 2
2 = queen flash gorgon

then just updated the lsit and random number generator range which could be a variable at the top of the code.

or read in from a formated text file.
 
EGuitarStar said:
I couldn't it it to work. :(

Here is the code that I now have. I'm no programmer so difficult for me to know where the issue is, or even if any syntax is wrong or missing.

Code: 
$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 13) {  //enter pressed
    }
})

<script type="text/javascript">
var listOfFileSources = [
  "sounds/sound1.mp3",
  "sounds/sound2.mp3"
];

document.addEventListener("keydown", function () {
    if (window.event && window.event.keyCode == 13) {
      var audio = document.getElementById('listOfFileSources');
      audio.src = listOfFileSources[Math.floor(Math.random()*listOfFileSources.length)];
      audio.play();
    }
});
</script>
Click to expand...

You don't have your 'playsound' element defined anymore and you've changed it to getElementById('listOfFileSources') which isn't right.

So put back the lines:
<audio id=playsound>
<source src="sound_file.mp3">
</audio>

and change the line:
var audio = document.getElementById('listOfFileSources');
back to
var audio = document.getElementById('playsound');

What DJ_Jestar's code is doing is grabbing the sound object called 'playsound' and assigning it's source to a random one from the listOfFileSources list.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom