求助：点击按钮播放上传音频无效，播放器控件不显示

问题核心原因 #

• 按钮点击事件中，e.target指向的是按钮本身，而非文件输入框，导致无法获取选中的音频文件，播放逻辑直接中断。
• 动态设置controls属性后，若未处理元素显示状态，音频控件可能处于隐藏状态无法被看到。

修复方案及代码 #

修改后的Blade代码 #

<label for="audioFile" class="input-label">Audio File</label>
<input type="file" id="audioFile" class="form-control" name="audio-file[]" accept="audio/*">

<button onclick="fileSelect()" type="button" style="color:cornflowerblue;border:white;background-color:white;">
  <i class="fa fa-volume-up test"></i>
</button>
<!-- 提前添加controls属性，默认隐藏，播放时显示 -->
<audio id="audio-preview" controls style="display:none;"></audio>

修改后的JavaScript代码 #

function fileSelect() {
  const audioInput = document.getElementById('audioFile');
  const sound = document.getElementById('audio-preview');
  
  // 检查是否已选择音频文件
  if (!audioInput.files || audioInput.files.length === 0) {
    alert('请先选择音频文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = function(e) {
    sound.src = this.result;
    // 显示音频控件
    sound.style.display = 'block';
    // 触发播放，因是用户主动点击触发，符合浏览器自动播放规则
    sound.play().catch(err => {
      console.error('自动播放失败:', err);
      alert('自动播放被浏览器阻止，请点击音频控件上的播放按钮');
    });
  };
  reader.readAsDataURL(audioInput.files[0]);
}

关键修改说明 #

1. 获取文件来源修正：直接通过ID获取文件输入框，不再从按钮事件中错误取文件，确保能拿到选中的音频文件。
2. 控件显示处理：<audio>标签提前添加controls属性，默认隐藏，播放时动态显示，保证控件能正常展示。
3. 异常处理：添加文件选择校验，避免无文件时点击报错；对play()方法添加捕获逻辑，处理浏览器自动播放限制的情况。

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