javascript Audio on Chrome not working right

Question

I'm making a webpage that plays a random sound every time you load the webpage, and having problems with the Audio element in JS. I can't get my browser to play sound and I don't know what to do. It may be something dumb that I missed but I'm fairly certain that I did it right.

At first, my code was as follows. I wanted it to play a random note:

function play(url){
    sound = new Audio(url);
    sound.play();
}
var soundsFace = ["a","asharp","b","c","csharp","d","dsharp","e","f","fsharp","g","gsharp"];
function setup(){
    
    randomno = Math.floor(Math.random()*12);
    currentnote = soundsFace[randomno];
    submit.for="box1";
    randomno = Math.floor(Math.random()*Sounds.currentnote.url.length);
    currant = randomno;
    play("assets/audio/"+Sounds.currentnote.url[currant]+".mp3");
}

I tried it, and it didn't work. Next, I tried a longer route for my play() function:

function play(urg){
    const sound = document.createElement("audio");
    const s = document.createElement("source");
    s.src = urg;
    sound.appendChild(s);
    sound.play();
}

Again, it didn't work.
Please help, I don't know what I'm doing wrong.

Answer 1

"I used a function that played the sound on a button click and it didn't work."

There are two possibilities that come to mind:

1. The button isn't registered/bound to the "click" event.

   // Either an event listener... 
   document.querySelector("button").addEventListener("click", play);
   // OR an event property.
   document.querySelector("button").onclick = play;
   

2. The button has a bad inline event handler. This type of event handler is not recommended. Of course we can't be sure since HTML wasn't included in the question.

   <button onclick="play(URL????)">NOT RECOMMENDED</button>|
   

Please familiarize oneself with events and event delegation. In the example below, an Immediately Invoked Function Expression is used since it's only needed once at page load. Details are commented in example.

// An array of URLs to MP3 files. 
const mp3s = ["https://soundbible.com/mp3/Tornado_Siren_II-Delilah-747233690.mp3", "https://soundbible.com/mp3/Glass%20Breaking-SoundBible.com-1765179538.mp3", "https://soundbible.com/mp3/Maniacal%20Witches%20Laugh-SoundBible.com-262127569.mp3", "https://soundbible.com/mp3/GUN_FIRE-GoodSoundForYou-820112263.mp3"];

/**
 * An IIFE that will:
 *  ¹ access a MP3 from a given array by a random index number,
 *  ² load that MP3 by an instantiated Audio Object,
 *  ³ insert a <menu> and 2 <button>s,
 *  ⁴ bind button.play to "click" event - plays the Audio Object,
 *  ⁵ bind button.load to "click" event - reloads the page.🞽
 * @param {array} mp3s/list - An array of URLs of MP3s.
 * @param {string} area/base - A selector string of the element
 *        in which the <menu> and <button>s will be appended to.
 * @default area/base - If undefined or null, it will be "body".
 *   🞽 Optional, added for demo purposes.
 */
((list, base) => {

  /* ¹ */
  let idx = Math.floor(Math.random() * list.length);
  const url = list[idx];
  /* ¹ */
  
  const sfx = new Audio(url); // ²
  
  /* ³ */
  let node = document.querySelector(base);
  const menu = `
    <menu>
      <button class="play" title="PLAY">▶️</button> 
      <button class="load" title="LOAD">🔄</button>
    </menu>`;
  node.insertAdjacentHTML("beforeend", menu);
  /* ³ */

  document.querySelector(".play").onclick = e => sfx.play(); // ⁴
  document.querySelector(".load").onclick = e => window.location.reload(true); // ⁵
  
})(mp3s, area = "body");

:root {
  font: 3ch/1.1 "Segoe UI";
}

menu {
  list-style: none;
  display: flex;
  width: max-content;
  padding: 0;
}

button {
  font-size: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.play {
  margin-right: -7.5px;
}

.load {
  margin-left: -7.5px;
}