如何在HTML页面中无需上传即可加载并播放本地音频

问题原因 #

浏览器默认开启了本地文件系统访问安全限制，禁止网页直接加载本地磁盘的绝对路径资源，你代码里写的/home/linux/Desktop/Mega/upload/Audio Files/file.wav属于本地绝对路径，无法被浏览器识别加载，因此只有控件样式，没有可播放的资源。

解决方案 #

方案1：无需上传，纯前端实现本地音频选择播放 #

直接通过浏览器原生File API读取用户选择的本地音频文件，全程不会上传文件到任何服务器，示例代码如下：

<!-- 音频选择控件 -->
<input type="file" id="audioPicker" accept="audio/*">
<!-- 音频播放控件 -->
<audio controls preload="metadata" id="audio"></audio>

<script>
const audioPicker = document.getElementById('audioPicker')
const audio = document.getElementById('audio')

audioPicker.addEventListener('change', e => {
  const selectedFile = e.target.files[0]
  if (!selectedFile) return
  // 将选中的本地文件转为临时可用的blob链接
  const audioUrl = URL.createObjectURL(selectedFile)
  audio.src = audioUrl
  // 如需自动播放可以取消下面的注释（部分浏览器需要用户交互后才允许自动播放）
  // audio.play()
})
</script>

用户点击文件选择框选中本地的音频文件后，音频控件就会自动加载对应资源，可以直接播放。

方案2：本地固定路径调试方案 #

如果你是本地开发需要固定加载指定的音频文件，可以按以下步骤操作：

• 把你的HTML文件放到/home/linux/Desktop/Mega/upload/目录下，保证和Audio Files文件夹同级
• 在该目录下打开终端，执行命令启动本地静态服务：python3 -m http.server 8000
• 修改你原有代码里的src属性为相对路径：

  <audio controls preload="none" id="audio"> 
      <source id="first-audio" src="Audio%20Files/file.wav" type="audio/wav">
  </audio>
  

• 打开浏览器访问http://localhost:8000/你的HTML文件名称.html即可正常播放音频

注意事项 #

原代码里的preload="none"属性代表用户点击播放按钮前不会预加载任何音频资源，如果你需要页面加载后就加载音频元数据，可以改成preload="metadata"。

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