Can I have multiple src attributes in an HTML5 <audio> element? Or an src attribute and a <source> element?

I was wondering what does it mean that the <audio> element can have an src attribute, or one or more <source> elements for its contents.

• Can I have two or more src attributes? If so, how?
• Can I have an src attribute and a <source> element?

Here is the link to what I'm talking about: http://dev.w3.org/html5/markup/audio.html#audio

Can someone explain this to me in detail?

These kind of questions in HTML5, always have two parts: Is it valid, and what happens if I do it anyway?

1. Is it valid?

No. Although the link to the markup language reference doesn't seem helpful, since it omits a critical fact. (see below).

Instead, look at the actual spec for the audio element.

The content model for that says:

If the element has a src attribute: zero or more track elements, then transparent, but with no media element descendants.

If the element does not have a src attribute: one or more source elements, then zero or more track elements, then transparent, but with no media element descendants.

So the source element is not specifically called out as being allowed when the src attribute is present.

But what about the "transparent" bit? Well, that means that elements that are valid inside the parent of the audio element are also valid inside the audio element. So if the source element was valid in the parent element, then it would also be valid inside the audio element, even if the audio element had a src attribute.

Is that possible? If we check the spec for the source element we see that the context in which the element can be used is

As a child of a media element, before any flow content or track elements.

So the parent of the audio element would need to be a media element i.e. <video> or <audio>.

However back at the definition of the content model of the audio element (see above), it says that audio cannot have media elements descendants - so an audio element cannot be nested inside another audio element. The video element is defined similarly, so <source> cannot be a valid child of <audio> via the "transparent" part of the content model of the audio element.

Hence, an audio element with both a src attribute and <source> children cannot be valid.

(Note that the Markup Language Reference page you link to doesn't mention the no media element descendants restriction, therefore I don't believe that the correct validation can be determined from it.)

2. What happens if I do it anyway?

This is somewhat simpler. The spec for the src attribute on media elements says:

There are two ways to specify a media resource, the src attribute, or source elements. The attribute overrides the elements.

In other words, if the src attribute is present, any <source> elements are simply ignored.

See Ian Boyd's answer on the matter of multiple src attributes.

You're asking if:

<AUDIO src="file1.wav" src="file2.wav" src="file3.wav"></AUDIO>

is valid?

i will say no - it makes no sense:

• you can't specify an attribute more than once
• what file do you want it to play

You may very well have multiple source elements, for example:

<audio>
  <source src="music.mp3" type="audio/mpeg" />
  <source src="music.ogg" type="audio/ogg" />
</audio>

UAs will play the first file they reach that they are able to play.

If you specify a src attribute as well, then that has priority over the others.

You can't do

<audio>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test2.mp3" type="audio/mpeg" />
</audio>

though and expect both to play, only the first will.