如何仅用JavaScript创建支持多音源的HTMLAudioElement对象？

可以完全通过JavaScript动态创建audio元素及音源节点，无需提前编写HTML结构即可实现多浏览器音源适配，实现逻辑如下：

实现代码 #

// 1. 动态创建audio实例
const myAudio = document.createElement('audio')

// 2. 按优先级配置多音源列表
const audioSourceList = [
  { src: 'myAudio.ogg', type: 'audio/ogg' },
  { src: 'myAudio.mp3', type: 'audio/mpeg' }
]

// 3. 批量插入source节点
audioSourceList.forEach(sourceConfig => {
  const sourceNode = document.createElement('source')
  sourceNode.src = sourceConfig.src
  sourceNode.type = sourceConfig.type
  myAudio.appendChild(sourceNode)
})

// 后续可正常调用audio原生API
// 示例：播放音频
// myAudio.play()
// 示例：添加播放事件监听
// myAudio.addEventListener('play', () => console.log('音频开始播放'))

补充说明 #

• 上述方式生成的audio元素默认不挂载到DOM树，不会产生额外的页面结构，完全满足不编写HTML音频相关代码的需求。如果需要显示浏览器默认的音频控件，只需给myAudio添加controls属性后插入到对应页面节点即可。
• 浏览器会按source节点的插入顺序自动检测可播放的音频格式，和直接写在HTML中的适配逻辑完全一致，没有额外兼容性问题。
• 最终得到的myAudio对象和通过new Audio()、document.getElementById()获取的实例功能完全相同，原生Audio的所有API、事件都可以正常使用。

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