如何创建无需变量的随机音频播放按钮？能否使用getElementsByTagName？

当然可以用document.getElementsByTagName('audio')来实现这个需求，完全不用手动把每个音频存入变量，下面是具体的实现代码：

1. 调整随机按钮的HTML #

给随机按钮加上和其他按钮一致的样式，同时明确按钮文本：

<a class="buttonSB" onClick="randomBtn()">随机播放</a>

<!-- 你的其他音频按钮保持不变 -->
<a class="buttonSB" onclick="document.getElementById('audiofile1').play();">
  <audio id="audiofile1" src="url/to/soundfile1.mp3"></audio>
</a> 

<a class="buttonSB" onclick="document.getElementById('audiofile2').play();">
  <audio id="audiofile2" src="url/to/soundfile2.mp3"></audio>
</a> 

<a class="buttonSB" onclick="document.getElementById('audiofile3').play();">
  <audio id="audiofile3" src="url/to/soundfile3.mp3"></audio>
</a> 

2. 编写randomBtn函数 #

在页面的<script>标签里（或者外部JS文件中）添加以下函数：

function randomBtn() {
  // 获取页面上所有audio元素
  const audioElements = document.getElementsByTagName('audio');
  
  // 先暂停所有正在播放的音频（可选，避免多音频同时播放）
  for (const audio of audioElements) {
    if (!audio.paused) {
      audio.pause();
      audio.currentTime = 0; // 重置播放进度到开头
    }
  }
  
  // 生成随机索引，选中一个音频
  const randomIndex = Math.floor(Math.random() * audioElements.length);
  
  // 播放选中的音频
  audioElements[randomIndex].play();
}

说明 #

• document.getElementsByTagName('audio')会返回页面上所有<audio>标签的集合，不管你后续新增多少个音频按钮，这个函数都能自动识别，完全不用手动维护变量列表。
• 可选的暂停逻辑是为了避免多个音频同时播放，如果你不需要这个功能，可以删掉对应的循环代码。

内容的提问来源于stack exchange，提问作者Dustin