如何创建支持2个音频文件播放的audio元素及兼容提示配置

你可以通过在<audio>标签内嵌套多个<source>标签的方式实现双音频源支持，浏览器会按顺序加载第一个可识别的音频文件，若浏览器完全不支持HTML5 audio标签，会直接展示你指定的提示文本。

完整代码示例 #

<audio controls>
  <!-- 第一个音频源，可替换为实际音频地址与对应MIME类型 -->
  <source src="音频文件1地址" type="audio/mpeg">
  <!-- 第二个音频源 -->
  <source src="音频文件2地址" type="audio/ogg">
  <!-- 不兼容浏览器的提示内容，原英文已翻译为中文 -->
  <p>你的浏览器不支持audio标签。</p>
  <p>你的浏览器不支持audio标签。</p>
</audio>

相关属性说明 #

• controls：给播放器添加播放、暂停、音量调节的可视化控制按钮，不需要展示控制栏可以直接删除该属性
• <source>标签的type属性需要和音频文件格式对应，常见格式对应值如下：
  • MP3 对应 audio/mpeg
  • OGG 对应 audio/ogg
  • WAV 对应 audio/wav
• 额外可选属性：需要自动播放可添加autoplay（多数浏览器会拦截非静音自动播放），需要循环播放可添加loop，默认静音可添加muted

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