HTML 收音机只有一个选中 - Html

HTML 收音机是一个用于网站或应用程序的音频播放器，让用户可以在网站上播放音乐或音频内容。但是，如果你想要在收音机中只选中一个选项，该怎么办呢？

收音机基础

首先，我们来了解一下收音机的基础知识。HTML 收音机通过 <audio> 元素来播放音频。下面是一个简单的例子：

<audio controls src="example.mp3"></audio>

这个例子中，src 属性指定了要播放的音频文件的 URL，controls 属性显示了音频控件，以便用户可以暂停、播放和调整音量。

选中单个选项

如果你想要在收音机中只选中一个选项，可以使用单选框（<input type="radio">）来实现。可以将每个单选框的值设置为要播放的音频文件的 URL。然后，使用 JavaScript 在单选框选中时更新音频元素的 src 属性。

<input type="radio" name="station" value="example1.mp3"> Station 1
<input type="radio" name="station" value="example2.mp3"> Station 2

<audio id="radio" controls></audio>

<script>
  const radio = document.getElementById('radio');
  const stations = document.getElementsByName('station');

  for (let station of stations) {
    station.addEventListener('click', function() {
      radio.src = this.value;
    });
  }
</script>

这个例子中，name 属性将两个单选框分组，value 属性设置了每个单选框的值。然后，使用 JavaScript 循环遍历每个单选框，当单选框选中时，更新音频元素的 src 属性为该单选框的值。

总结

HTML 收音机是一个强大的工具，可用于在网站或应用程序中播放音频。通过结合单选框和 JavaScript，我们可以实现在收音机中只选中一个选项的功能。以上介绍内容希望能够对大家有所帮助。

以上为介绍内容的markdown返回格式。