我怎么HTML5音频，在点击播放声音？ （OGG像Firefox浏览器和MP3像铬浏览器） [英] How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)
问题描述
如何让HTML5音频，在点击播放声音？ （OGG像Firefox浏览器和MP3像Chrome浏览器，）
到目前为止的onclick我可以换到一个单一的文件类型，但我不能让你像在一个普通的HTML5音频声明，即这样做是为了有一个备份选项。
＆LT;音频控制＆GT;
＆lt;信源SRC =horse.oggTYPE =音频/ OGG＆GT;
＆lt;信源SRC =horse.mp3TYPE =音频/ MPEG＆GT;
你的浏览器不支持音频元素。
＆LT; /音频＆GT;
code：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;＆LT; HEAD＆GT;
＆LT;元CONTENT =text / html的;字符集= UTF-8HTTP的当量=Content-Type的/＆GT;
＆LT;标题＆GT;我如何调用JavaScript函数，并把它发挥.OGG如果无法播放.MP3＆LT;？/标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;音频ID =Mp3Me自动播放自动缓冲控制＆GT;
＆lt;信源SRC =Piano.mp3＆GT;
＆LT; /音频＆GT;＆所述; A HREF =JavaScript的：GuitarTrack（）＆GT;吉他与所述; / A＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
功能GuitarTrack（）{
变种Mp3Me =的document.getElementById（'Mp3Me'）;
Mp3Me.src =Guitar.mp3;
Mp3Me.src =Guitar.ogg;
}
＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;
由于您只创建一个＆lt;信源＆GT; 元素，你必须要么创建另一个＆lt;信源方式＆gt; 元素中的HTML或使用JavaScript创建一个
-
创建使用HTML第二个元素。 http://jsfiddle.net/PVqvC/
＆LT;音频ID =Mp3Me自动播放自动缓冲控制＆GT;
＆lt;信源SRC =Piano.mp3＆GT;
＆lt;信源SRC =Piano.ogg＆GT;
＆LT; /音频＆GT;
＆所述; A HREF =JavaScript的：GuitarTrack（）;＆GT;吉他与所述; / A＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
功能GuitarTrack（）{
变种Mp3Me =的document.getElementById（'Mp3Me'）;
Mp3Me.children [0]的.src =Guitar.mp3;
Mp3Me.children [1]的.src =Guitar.ogg;
Mp3Me.load（）;
}
＆LT; / SCRIPT＆GT; -
使用JS创建第二个元素。 http://jsfiddle.net/MBvsC/1/
＆LT;音频ID =Mp3Me自动播放自动缓冲控制＆GT;
＆lt;信源SRC =Piano.mp3＆GT;
＆LT; /音频＆GT;
＆所述; A HREF =JavaScript的：GuitarTrack（）;＆GT;吉他与所述; / A＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
功能GuitarTrack（）{
VAR Mp3Me =的document.getElementById（'Mp3Me'）的getElementsByTagName（'源'）。 如果（Mp3Me.length→1）{//有2族元素
Mp3Me [0]的.src =Guitar.mp3;
Mp3Me [1]的.src =Guitar.ogg;
}
如果（Mp3Me.length == 1）{//只有一个元素，所以我们需要创建第二个
Mp3Me [0]的.src =Guitar.mp3; //改变现有元素 变种节点=的document.getElementById（'Mp3Me'）;
VAR newelem =使用document.createElement（'源'）;
newelem.setAttribute（'的src'，'Guitar.ogg'）;
node.appendChild（newelem）; //创建具有适当SRC新元素
}
Mp3Me.load（）;
}
＆LT; / SCRIPT＆GT;
正如你可以看到，第一种方法是，简洁，干净，所以如果你可以使用它 - 使用它。如果您有任何进一步的问题 - 随时问
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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>
Since 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.net/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.net/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.
这篇关于我怎么HTML5音频，在点击播放声音？ （OGG像Firefox浏览器和MP3像铬浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
