當我點擊單選按鈕時如何更改音頻標籤？

-4

當我檢查一個html單選按鈕時，我想更改我的HTML5音頻標籤的值。當我點擊單選按鈕時如何更改音頻標籤？

這裏是我的音頻標籤：

<audio controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test1.wav" type="audio/wav"> 
</audio>

例如：如果我點擊一個名爲「test2.wav我想修改我的音樂標籤這樣的單選按鈕：

<audio controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test2.wav" type="audio/wav"> 
</audio>

我怎樣才能做到這一點？

由於提前，

來源

2016-05-31 Julien

谷歌「的addEventListener」 – Jacob

因爲OP並沒有真正投入太多精力的問題（無論是在標籤和在質疑**沒有顯示出很大的努力），我也沒有帶來太多的努力：https://jsfiddle.net/eq4dL1rg/這可能是一個開始g點，不知道它是否有效，不知道它是否應該是，儘管它應該。請在下次提供更多代碼時，您嘗試完成該問題的是什麼？寫完音頻標籤後你突然停下來了嗎？沒有JavaScript（或jquery，如標籤所示）在您的問題中可用，並且您甚至沒有提供單選按鈕。 – briosheje

更新時間：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Events</title> 
</head> 
<body> 

<input type="radio" value="test2" name="rad" onclick="boom(this.value);">test2 
<input type="radio" value="test3" name="rad" onclick="boom(this.value);">test3 
<input type="radio" value="test4" name="rad" onclick="boom(this.value);">test4 
<br> 
    <audio id="audio" controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test1.wav" type="audio/wav" id="sound"> 
</audio> 
<script type="text/javascript"> 
    function boom(val){ 
    var audio = document.getElementById("audio"); 
     var aud = document.getElementById("sound"); 
     aud.src=val+".wav"; 
     audio.load(); 
    } 
</script> 
</body> 
</html>

https://jsfiddle.net/g1jssesz/2/

來源

2016-05-31 17:55:35 bhansa

謝謝。但我試過你的代碼，它不起作用。只播放第一個文件（test1.wav）。如果我點擊另一個按鈕'test2.wav'或'test3.wav'沒有播放。有任何想法嗎？文件位於服務器上... – Julien

可能是您沒有給出正確的文件路徑。在文件名之前預先掛起父路徑。 – bhansa

我得到這個錯誤與你的代碼：'未捕獲的TypeError：document.getElementByTag是不是一個函數' – Julien

首先，添加的ID到source標籤。

<source src="test1.wav" type="audio/wav" id="foo">

下，使用一些JavaScript，並添加onclick屬性的單選按鈕。

<input type="radio" name="foo" value="test2.wav" onclick="document.getElementById('foo').src=this.value">

來源

2016-05-31 17:42:55 RamenChef

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
</head> 
<body> 
    <audio controls> 
    <source src="" type="audio/ogg"> 
     <source src="" type="audio/mpeg"> 
     <source src="test1.wav" type="audio/wav"> 
     </audio> 
     <br> 
     <input type="radio" name="track" value="test1.waw" checked> test1.waw<br> 
     <input type="radio" name="track" value="test2.waw"> test2.waw<br> 
     <input type="radio" name="track" value="test3.waw"> test3.waw 
     <script type="text/javascript"> 
     $("input[type=radio][name=track]").on('change', function(){ 
      $("audio source").attr("src", $(this).val()); 
      console.log("new source is: " + $("audio source").attr("src")); 
      alert("new source is: " + $("audio source").attr("src")); 
     }); 
     </script> 

     </body> 
     </html>

來源

2016-05-31 17:50:46

當我點擊單選按鈕時如何更改音頻標籤？

回答

相關問題