HTML Audio元素禁用报invalid source错误 新增标签无法播放求助

解决方案 #

• 修正音频MIME类型配置
  MP3格式的标准MIME类型为audio/mpeg，你当前代码中写的audio/mp3属于非标准写法，IE浏览器对该字段的校验规则极为严格，此前的旧音频能正常播放属于偶发兼容情况，替换为标准MIME类型可解决大部分IE的invalid source报错。
• 重新转码提取的音频文件
  从MP4、WEBM视频中提取的音频往往存在编码参数不规范、残留视频轨道元数据的问题，可通过FFmpeg工具重新转码为标准MP3格式，转码命令如下：

  ffmpeg -i 待转码音频文件名.mp3 -acodec libmp3lame -ac 2 -ar 44100 -b:a 128k 输出文件名.mp3
  

  转码后的音频可兼容所有支持MP3的浏览器。
• 排查路径与权限问题
  1. 先直接在浏览器地址栏输入无法播放的音频完整URL，确认是否能正常访问，如果返回404/403错误，说明是路径大小写不匹配（Linux服务器大小写敏感，注意你代码中后缀是大写.MP3，需和实际存储的文件后缀完全一致）、文件权限配置错误导致的
  2. 检查文件名中的空格是否正常编码，建议直接将文件名中的空格替换为下划线，避免服务器解析URL时出错
• 修正后的代码示例

<h4>second audio file</h4>
<audio controls class="form-control">
   <source src="/Portal2/content/audio/Vashekastegi%20(2).MP3" type="audio/mpeg">
   <!-- 若兼容更多浏览器可添加多格式源 -->
   <source src="/Portal2/content/audio/Vashekastegi%20(2).ogg" type="audio/ogg">
</audio>

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