Question

当我查看html单选按钮时，我想更改HTML5音频标签的值。

这是我的音频标签：

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

例如：如果我点击名为'test2.wav的单选按钮，我想修改我的音频标签：

ENTRYPOINT

我该怎么做？

提前致谢，

Answer 1

首先，在source代码中添加ID。

<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">

Answer 2

    <!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>

Answer 3

更新

<!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/

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

3 个答案: