当我点击单选按钮时如何更改音频标签?
问题描述:
当我检查一个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>
我怎样才能做到这一点?
由于提前,
答
更新时间:
<!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>
答
首先,添加的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">
答
<!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>
谷歌“的addEventListener” – Jacob
因为OP并没有真正投入太多精力的问题(无论是在标签和在质疑**没有显示出很大的努力),我也没有带来太多的努力:https://jsfiddle.net/eq4dL1rg/这可能是一个开始g点,不知道它是否有效,不知道它是否应该是,尽管它应该。请在下次提供更多代码时,您尝试完成该问题的是什么?写完音频标签后你突然停下来了吗?没有JavaScript(或jquery,如标签所示)在您的问题中可用,并且您甚至没有提供单选按钮。 – briosheje