CODEWITHSUNDEEP
htmlaudiohtml5-audio
wootscootinboogie
wootscootinboogie

Reputation: 8695

HTML5 Audio Tag with Multiple Sources

I have two questions the regarding HTML5 audio tag. Consider the following snippet:

<!DOCTYPE html>
<html>
<body>
<a href="#">woot</a>
<audio controls >

  <source src="\path\acdc.ogg" type="audio/ogg">
  <source src="\path\file.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

</body>

</html>

  1. If the browser which you are viewing the page in supports the media type in the first source tag, does it always select the first source? I opened the snippet up in Chrome and acdc.oggplayed, and in IE (which does not support off, file.mp3 played)

  2. How does the browwer decide if it can play the file or not? Does it simply peek at the type attribute, or are they smart enough to fetch the file and see if they can play it or not?

I'm thinking of the instance where the file is actually an mp3, but the source type attribute says it's ogg.

Upvotes: 1

Views: 2454

Answers (2)

LuckyLuke Skywalker
LuckyLuke Skywalker

Reputation: 781

The browser uses the first supported element.

If the file format is specified via a type-Attribute, it only looks at said attribute. If said attribute is not specified, it fetches the resource and then looks at the suffix=type=ending.

Source: https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Upvotes: 0

Rob W
Rob W

Reputation: 9142

Have a look here: https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Basically, browsers will pick the first type it can support. It's also important to know that not only having the type attribute on the source element is required, but the file itself should be sent from the server with the proper content-type heading.

Upvotes: 1

Related Questions