admin管理员组文章数量:1334169
How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)
So far onclick I can change to a single filetype but I can't get it to have a backup option like you do on a normal html5 audio declaration i.e.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How do i call the javascript function and get it to play .ogg if can't play .mp3?</title>
</head>
<body>
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="Piano.mp3">
</audio>
<a href="javascript:GuitarTrack()">Guitar</a>
<script type="text/javascript">
function GuitarTrack(){
var Mp3Me= document.getElementById('Mp3Me');
Mp3Me.src = "Guitar.mp3";
Mp3Me.src = "Guitar.ogg";
}
</script>
</body>
</html>
How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)
So far onclick I can change to a single filetype but I can't get it to have a backup option like you do on a normal html5 audio declaration i.e.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How do i call the javascript function and get it to play .ogg if can't play .mp3?</title>
</head>
<body>
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="Piano.mp3">
</audio>
<a href="javascript:GuitarTrack()">Guitar</a>
<script type="text/javascript">
function GuitarTrack(){
var Mp3Me= document.getElementById('Mp3Me');
Mp3Me.src = "Guitar.mp3";
Mp3Me.src = "Guitar.ogg";
}
</script>
</body>
</html>
Share
Improve this question
asked Mar 9, 2013 at 23:55
user2152706user2152706
231 gold badge1 silver badge3 bronze badges
1 Answer
Reset to default 3Since you are creating only one <source>
element, you have to either create another <source>
element in HTML or create one using JavaScript.
Creating second element using HTML. http://jsfiddle/PVqvC/
<audio id="Mp3Me" autoplay autobuffer controls> <source src="Piano.mp3"> <source src="Piano.ogg"> </audio> <a href="javascript:GuitarTrack();">Guitar</a> <script type="text/javascript"> function GuitarTrack(){ var Mp3Me= document.getElementById('Mp3Me'); Mp3Me.children[0].src = "Guitar.mp3"; Mp3Me.children[1].src = "Guitar.ogg"; Mp3Me.load(); } </script>
Creating second element using JS. http://jsfiddle/MBvsC/1/
<audio id="Mp3Me" autoplay autobuffer controls> <source src="Piano.mp3"> </audio> <a href="javascript:GuitarTrack();">Guitar</a> <script type="text/javascript"> function GuitarTrack(){ var Mp3Me= document.getElementById('Mp3Me').getElementsByTagName('source'); if(Mp3Me.length > 1) { //there are 2 elements Mp3Me[0].src = "Guitar.mp3"; Mp3Me[1].src = "Guitar.ogg"; } if(Mp3Me.length == 1) { //only one element, so we need to create the second one Mp3Me[0].src = "Guitar.mp3"; //changes existing element var node = document.getElementById('Mp3Me'); var newelem = document.createElement('source'); newelem.setAttribute('src', 'Guitar.ogg'); node.appendChild(newelem); //creating new element with appropriate src } Mp3Me.load(); } </script>
As you can see, the first method is a lot shorter and cleaner, so if you can use it - use it. If you have any further questions - feel free to ask.
本文标签:
版权声明:本文标题:javascript - How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome) - 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742236893a2438243.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论