Playing sound on click and displaying track number

Design help Custom code
1

Hi!

I got a custom code that randomly plays an audio track out of an array when the user clicks a div, and it should display the track number (like “1 out of 5”)
The custom code element has an ID of audioNumber.

It’s only working for one click but no for additional clicks, I think the div’s ID is changing after one click.

<script>
var audio = new Audio();
var audiolist = new Array('https://res.cloudinary.com/dvugxz59z/video/upload/v1621504645/BatShevaAudio/chiaki_tpast4.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504643/BatShevaAudio/sean_mzegyf.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/yoni_z4suqd.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504636/BatShevaAudio/Billy_x8srx0.mp3',
'https://res.cloudinary.com/dvugxz59z/video/upload/v1621504627/BatShevaAudio/Matan_sj77wi.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();
  }
  let audioNumber = getRandomInt(0,4);
  
  audio.src = audiolist[audioNumber];
  audio.play();
  document.getElementById("audioNumber").innerHTML = audioNumber;
}

</script>

<a onclick="play()" id="audioNumber"> a </a>

I’m not a coder, just pieced together some stuff.
Anyone knows how to fix this?

Thanks!

2

Hi. Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.