TheRed TheRed - 2 months ago 20
HTML Question

HTML elements behind audio tag not displayed

I have the following code:



<div>text</div>

<input id="audio_file" type="file" accept="audio/*" />
<audio id="audio_player" />

<div>text</div>





However only the div before but not after the audio tag is rendered. How can I fix this?

Answer Source

You need to close your audio correcty with <audio></audio> because it isn't a self closing tag.

Solution

<div>text</div>    

<input id="audio_file" type="file" accept="audio/*" />
<audio id="audio_player"></audio>

<div>text</div>

Explanation

Inside the audio tag you could insert a source, track or append a text conent.
The text content would be displayed if the browser dosn't support the audio api.

<!-- from mdn webdocs -->
<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="foo.wav" type="audio/wav">
</audio>