Question

When you have a simple ignorant audio tag like so:

<audio id="audio45" preload="auto" src="audio.ogg" controls=""></audio>

You can copy the source for playback like so:

var playback = new Audio();
playback.src = document.getElementById('audio45').src;
playback.load();
playback.play();

This will work with Opera, Firefox, Iceweasel, probably Konqueror. But when playing nice for Internet Explorer, Safari etc you’re gonna need more sources.

<audio id="audio45" preload="auto" controls="">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

But this way, audio45.src remains empty. What is the proper easy way of getting the supported source that the current browser has chosen for the player? I am looking for a way that can be written once and applies for all dynamic occurrences of audio.

Answer 1

Try document.getElementById('audio45').currentSrc. As of the (draft of the) HTML5 spec:

media.currentSrc

Returns the address of the current media resource.

Returns the empty string when there is no media resource.

The currentSrc IDL attribute is initially the empty string. Its value is changed by the resource selection algorithm defined below.

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

http://dev.w3.org/html5/spec/Overview.html#attr-media-src

Note also:

Note: Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unncessarily complicated approach.

http://dev.w3.org/html5/spec/Overview.html#the-source-element