Audio tag GUI not visible

Question

I have included the audio tag on a page as

<audio src='a.mp3' preload='auto'>
</audio>

but its not working, i can't see anything on the page.

But when i include audiojs as

  <script src="/static/js/audiojs/audio.min.js"></script>
  <script>
    audiojs.events.ready(function() {
      var as = audiojs.createAll();
    });

  </script>

I am left wondering why is that so ?

Answer 1

From what I've learned, src is an element inside audio, not an attribute. So your code should look like this:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

(Source)

Edit: src can also be an attribute, so that wasn't your problem. In order for the browser to display anything for audio, you need the "controls" attribute. However, if you don't want the default controls, add html buttons and control the start/stop etc. of the audio with JavaScript.

Answer 2

Try This:

<audio src='a.mp3' controls preload='auto'>
</audio>

Answer 3

try wrapping audio tag using figure. I also had the same problem. then I went to MDN

<div id="app">
      <figure>
        <figcaption>Listen to the T-Rex:</figcaption>
        <audio
          id="#audio"
          controls
          src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3"
        >
          <a href="/media/cc0-audio/t-rex-roar.mp3"> Download audio </a>
        </audio>
      </figure>
    </div>

Answer 4

It's your CSS.

    audio{
        min-width: 400px;
        height: auto;
        object-fit: inherit;
    }