如何讓Html5音頻在點擊播放聲音？（ogg適用於瀏覽器，如Firefox和適用於Chrome瀏覽器的mp3）

如何讓Html5音頻在點擊播放聲音？（OGG像火狐瀏覽器和MP3像Chrome瀏覽器，）如何讓Html5音頻在點擊播放聲音？（ogg適用於瀏覽器，如Firefox和適用於Chrome瀏覽器的mp3）

到目前爲止的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>

來源

2013-03-09 user2152706

既然你只創建一個<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>

正如你可以看到，第一種方法是很多更短和更清潔的，所以如果你可以使用它 - 使用它。如果您還有其他問題，請隨時提問。

來源

2013-03-10 01:05:01 sobol6803

無法設法讓上面的代碼工作？我在上面的jsfiddle代碼中添加了活動的.ogg和.mp3（免費使用鋼琴曲目），以顯示它不起作用。第一：http：//jsfiddle.net/PVqvC/2/ 第二：http：//jsfiddle.net/MBvsC/4/ – user2152706 2013-03-10 01:24:37

對不起，在這兩種情況下，你都必須使用'load（）'方法。我編輯了我的答案並更新了小提琴：http://jsfiddle.net/MBvsC/6/ http://jsfiddle.net/PVqvC/3/ – sobol6803 2013-03-10 01:33:32

感謝第二個版本完美地工作，一個問題，你知道爲什麼沒有控制（播放，暫停，時間搜尋等）在Firefox中試用時顯示，但在上面使用Jsfiddle時在Chrome中顯示？ – user2152706 2013-03-10 01:38:04

如何讓Html5音頻在點擊播放聲音？ （ogg適用於瀏覽器，如Firefox和適用於Chrome瀏覽器的mp3）

回答

相關問題

如何讓Html5音頻在點擊播放聲音？（ogg適用於瀏覽器，如Firefox和適用於Chrome瀏覽器的mp3）