javascript 如何让 Html5 音频在点击时播放声音？（ogg 适用于 Firefox 等浏览器，mp3 适用于 chrome 等浏览器）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15317318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get Html5 audio to play sound on click? (ogg for browsers like Firefox and mp3 for browsers like chrome)
提问by user2152706
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 等浏览器）
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.
到目前为止 onclick 我可以更改为单个文件类型，但我无法像您在普通 html5 音频声明中那样获得备份选项，即
<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>
回答by sobol6803
Since you are creating only one <source>element, you have to either create another <source>element in HTML or create one using JavaScript.
由于您只创建一个<source>元素，因此您必须<source>在 HTML 中创建另一个元素或使用 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>
使用 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>使用 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.
如您所见，第一种方法更短更简洁，因此如果您可以使用它 - 使用它。如果您有任何其他问题 - 请随时提出。
