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 ?

I think you need to add the attributes 'controls' to see something — Carlo Moretti, Aug 15 '12 at 11:20

papercutexit · Answer 1 · 2012-08-15T11:29:10.593

13

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.

edited Aug 15 '12 at 11:29

answered Aug 15 '12 at 11:20

papercutexit

333
2
6

1

The src attribute can be a URL of the audio file or the path to the file on the local system. [See Reference](https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video?redirectlocale=en-US&redirectslug=Using_audio_and_video_in_Firefox) – Ahsan Khurshid Aug 15 '12 at 11:23
Fair enough, should have checked the reference. Cheers! – papercutexit Aug 15 '12 at 11:27
1

One more thing do not refer w3schools practices. Try to share [msdn](http://msdn.microsoft.com/en-us/library/ie/hh828809(v=vs.85).aspx) or [mdn](https://developer.mozilla.org/en-US/?redirectlocale=en-US&redirectslug=en) references. Thanks! – Ahsan Khurshid Aug 15 '12 at 11:27
Even if you don't assign value to controls attribute still it'll work. – Drashti Pandya Jan 16 '20 at 19:31

Ahsan Khurshid · Answer 2 · 2012-08-15T11:31:05.733

9

Try This:

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

edited Aug 15 '12 at 11:31

answered Aug 15 '12 at 11:21

Ahsan Khurshid

9,383
1
33
51

score 0 · Answer 3 · answered Feb 03 '17 at 16:19

0

It's your CSS.

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

answered Feb 03 '17 at 16:19

Ronnie Royston

16,778
6
77
91

Sadik H. · Answer 4 · 2022-11-23T13:54:31.613

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>

Audio tag GUI not visible

4 Answers4

Linked