Videos
Actually the href attribute is redirecting you to the new page, you can use e.prevenDefault() in the link click event handler to stop this redirection and create a dynamic audio element with this href as source and play it.
This is what you need:
function playItHere(e, link) {
var audio = document.createElement("audio");
var src = document.createElement("source");
src.src = link.href;
audio.appendChild(src);
audio.play();
e.preventDefault();
}
<a href="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" onclick="playItHere(event, this)">Pronunciation of a word</a>
In html5, you can actually use the <audio> tag to get that done!
<audio src="/music/myaudio.ogg" autoplay> Sorry, your browser does not support the <audio> element. </audio>
SOURCE: Wired
Try this snippet
list.onclick = function(e) {
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('audioSource');
source.src = elm.getAttribute('data-value');
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
};
<ul style="list-style: none">
<li>Audio Files
<ul id="list">
<li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li>
<li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li>
</ul>
</li>
</ul>
<audio id="audio" controls="controls">
<source id="audioSource" src=""></source>
Your browser does not support the audio format.
</audio>
JSFiddle http://jsfiddle.net/jm6ky/2/
Found this spec note for those trying to change the src of a source element. Especially useful for libs like React where audio.load() causes render loop.
..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
<audio>
<source src='./first-src'/>
</audio>
To change the src
<audio src='./second-src'/>
<source src='./first-src'/>
</audio>