Do you have to use a seperate tag for Audio Source? Can you use it like an img tag?

Why do you have to use a separate tag for audio? Is there a reason, why you can’t just add the src attribute directly to the audio tag, like you do with img: .

3 Likes

You don’t have to do it the way they showed it in the lesson, can can use the <audio> tag in the same way as the <video> tag.

Like:

<audio 
    controls 
    src="/media/examples/t-rex-roar.mp3">Your browser does not support the 
    <code>audio</code> element.
</audio>

One thing to take into account is that not all browsers support the same file types, so you might want to use multiple sources of different types of audio file, in that case, you will want to do it like they did it in the lesson:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

Take a look at the example shown here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes

166 Likes

If audio tag and video tag works well with a nested source tag, so it could work well in all media tags like img tag and so on?

Lesson: https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/audio-and-attributes

Great day.

3 Likes

what if i used the src attribute in the audio element? like we do with the img tag ? is it possible ? is it necessary to use the source tag ?

2 Likes

Yes, I am pretty sure that is possible since the program didn’t register that as an error, but also try looking that question up. Hope this helped!

Very useful, thanks!

This was awesome! Thank you!

In other words you also saying it’s best practice to do it like the example in the lesson?

When you list multiple sources, does the browser attempt them in order, until it finds one that works?

1 Like

Can the audio tag be nested inside the img tag? If so, will the audio autoplay when you’re on the image?

1 Like

Waiting for a reply to this question. Anyone please!!

Am new to Audio Elements, but my guess is, YES, the browser tries them in order until it finds the compatible one. Someone should correct me if am wrong.

1 Like

I see. I’ll be trying to see if it works. Thanks

@_icode01 @llexy The <img> tag can have NO children. To achieve the result of that you would use JS or have a still image with audio overlayed.

2 Likes

why we are using “autoplay” attribute here?
the audio element with attribute “controls” is working very fine

Audio autoplay is not working in my case, how to make the audio autoplay work?

I also tried to make it autoplay which i put it after controls but its not working. So I test the code at W3 workspace and it work. Conclusion maybe codeacademy not have that feature… I also don’t know

<audio controls autoplay>
        <source
          src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3"
          type="audio/mp3"
        />
      </audio>

is it a must to use any attributes like controls when embedding audio in html document?
Or just an audio tag is enough to display the audio on the webpage?

If source is a self-closing tag like img, isn’t it good practice to close it with /> ?