javascript Audio object vs. HTML5 Audio tag

In a project recently when I loaded a sound with

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

It played fine unless a dialogue was opened (ie alert, confirm). However when I instead tried adding an audio tag in my html

<audio id="audio1">
	<source src="alarm.mp3" type="audio/mpeg" />
</audio>

and using

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

it continued to play after a dialogue was opened. Does anyone know why this is? Also more generally what are the differences between the two ways to play sounds?

According to this wiki entry at Mozilla <audio> and new Audio() should be the same but it doesn't look like that is the case in practice. Whenever I need to create an audio object in JavaScript I actually just create an <audio> element like this:

var audio = document.createElement('audio');

That actually creates an audio element that you can use exactly like an <audio> element that was declared in the page's HTML.

To recreate your example with this technique you'd do this:

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();

JavaScript halts during an Alert or Confirm box.

You cannot concurrently run code and display an alert(), confirm(), or prompt(), it literally waits for user input on this, this is a core feature of JavaScript.

I am assuming it is that very reason why an audio file played entirely within JavaScript scope does this. Comparatively Flash video clips or HTML5 audio/video will continue to play on even when a JavaScript alert/confirm/prompt is open.

As for what method is better, well that is up to you. It is pretty archaic to do anything with the JavaScript built in alert/confirm/prompt anymore, there are way better looking prompts you can make with jQuery UI and so on.

If you have a lot of dynamic content on the page or are you looking into background buffering audio before they need to be triggered and so on, then JavaScript is probably the saner way to go about things.

If you have literally just one player on the screen then there is no excuse for not putting in onto the HTML code. Although unlikely to affect anyone these days, it is still bad practice to rely heavily on JavaScript when there is no reason to.

I came up with the function below from several answers across the web.

function playAudio(url){
  var audio = document.createElement('audio');
  audio.src = url;
  audio.style.display = "none"; //added to fix ios issue
  audio.autoplay = false; //avoid the user has not interacted with your page issue
  audio.onended = function(){
    audio.remove(); //remove after playing to clean the Dom
  };
  document.body.appendChild(audio);
}

If you will create

var myAudio = new Audio("myAudio.mp3"); is faster because it does not interact with the DOM.

If you are using multiple audios and/or won't need the user to interact with the player controls you should definetly chose new Audio() where the DOM is not involved.

First let me answer the difference that lies between them. audio tag in html and the new audio object in js, if have a difference is a subtle one and insignificant. They actually do the same thing. If you just want to include an audio inside your webpage, then using the html tag is seem fit and recommended. And If you would like the audio to play whilst there has been an interaction from the user, then the javascript Audio object is seem fit and recommended. For instance; document.querySelector("button).onclick=()=>{let audio=new Audio(audio url); audio.play;

Besides that's the primary purpose of javascript.

Now the reason why the audio still plays when the dialogue opens when you use the html audio tag is because of the fact that the browser first loads your html file, execute the content of the file until it encounters the script tag in the html file and loads the javascript file too. All I'm trying to say is, the audio tag was already read by the browser even before the script loaded. Javascript pauses when an alert(), prompt() or confirm is encountered. Thus "playing fine after an alert was opened". (•‿•).