单击单选按钮时如何更改音频标签？
[英]How to change audio tag when I click on radio button?
问题描述
当我检查一个 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>
我怎样才能做到这一点？
提前致谢，
3 个解决方案
解决方案1
0 2016-05-31 17:42:55
首先，将 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">
解决方案2
0 2016-05-31 17:50:46
<!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>
解决方案3
0 已采纳 2016-05-31 17:55:35
更新：
<!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>
选中或单击单选按钮时播放音频
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.