当我点击单选按钮时如何更改音频标签？

-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

当我点击单选按钮时如何更改音频标签？

回答

相关问题