Play random audio from list

Design help Custom code
1

Hi!
I’m trying to have a div play a random audio file out of a bunch of audio files every time the user clicks on it. The currently playing audio should stop once the user clicks again so a new file could play.

Stumbled across this, which shows how to have a list of sounds but couldn’t quite figure out how to call a random item from the list on another HTML embed when the user clicks.

I understand some of the code but i’m not fully proficient which is why i’m having such a hard time piecing it all together.
I’ve got nothing working so can’t really share anything, but i’m on my knees here, if anyone has any suggestions or tips on what the framework for this should be or what to do I would very much appreciate it.

1 Like
2

Sounds interesting. I’m curious about it too.

5

ok so it took a few hours and some help from a friend cause i’m really not much of a coder but this seems to work (not styled or anything), for now it’s just a default link that plays audio by url (changed my audio files’ url, you can put any other mp3 link inside, I used Cloudinary for hosting my files)

<script>
var audio = new Audio();
var audiolist = new Array('https://res.cloudinary.com/dvugxz59z/video/upload/v1621252794/AudioForTests/Misfits_-_Angelfuck-2_wxhfae.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621252764/AudioForTests/The_Damned_-_Stab_Yor_Back_zqncuc.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621252764/AudioForTests/The_Damned_-_Stab_Yor_Back_zqncuc.mp3');
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}
function play() {
  if (audio.duration > 0 && !audio.paused) {
  audio.pause();
  }
  audio.src = audiolist[getRandomInt(0,2)];
  audio.play();
}
</script>
<a href='#' onclick="play()">Click here</a>