Can we place audio tag inside button tag?

HTML-CSS
1

Hi fellow campers,
Can we put an audio tag inside a button element ? If so, how about when we have some text along with it? Something like this -

<button>GUITAR TONE
       <audio
         src = "guitar.mp3"
         preload="auto"
          />
       </button>

Is this valid ?

2

I don’t see why you couldn’t do that, but to achieve the desired effect you would need to set up an onClick method for the button so that it will play the child audio.

1 Like
3

No, don’t think so audio is interactive content.

The HTML <button> element

Permitted content: Phrasing content but there must be no Interactive content

1 Like
4

@lasjorg I checked the link. It mentions that <audio> is interactive content only when controls attribute is present. Without it (as in the example in my first post), does it get treated as a phrasing content?

5

Yes, you are absolutely right, I should have paid more attention to your code, sorry.

I might suggest more explicit formatting, but that’s entirely up to you.

<button>GUITAR TONE
  <audio preload="auto">
    <source src="guitar.mp3">
  </audio>
</button>
1 Like
6

Okay. I ll check it. Thanks for the help :slight_smile: