如何让 Html5 音频在点击时播放声音？（ogg 用于 Firefox 等浏览器，mp3 用于 chrome 等浏览器）答案

【问题标题】：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 等浏览器）
【发布时间】：2013-02-25 08:58:50
【问题描述】：

如何让 Html5 音频在点击时播放声音？（ogg 用于 Firefox 等浏览器，mp3 用于 chrome 等浏览器）

到目前为止，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>

代码：

<!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>

【问题讨论】：

标签： javascript html firefox audio

【解决方案1】：

由于您只创建了一个 <source> 元素，因此您必须在 HTML 中创建另一个 <source> 元素，或者使用 JavaScript 创建一个。

使用 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>

如您所见，第一种方法更短更简洁，所以如果您可以使用它，请使用它。如果您还有其他问题，请随时提出。

【讨论】：

无法让上面的代码工作？我在上面的 jsfiddle 代码中添加了活动的 .ogg 和 .mp3（免费使用钢琴曲目），以表明它不起作用。第一：jsfiddle.net/PVqvC/2 第二：jsfiddle.net/MBvsC/4
对不起，在这两种情况下你都必须使用load() 方法。我已经编辑了我的答案并更新了小提琴：jsfiddle.net/MBvsC/6 jsfiddle.net/PVqvC/3
感谢第二个版本完美运行，一个问题，你知道为什么在 Firefox 中尝试时没有控件（播放、暂停、时间搜索等）出现，但在使用上面的 Jsfiddle 时却在 Chrome 中出现？跨度>
可能是因为在 fiddle 的服务器上找不到 HTML 中的src（更改前）。不过，它可以在您的网站上运行（如果您将现有文件添加到 src 参数）。您可以通过使用小提琴上的外部链接替换 piano.mp3 和 piano.ogg 来测试它。