如何在HTML中调用互联网音频直链播放无需下载本地文件

完全可以不提前下载音频文件到本地，直接通过网络地址播放音频，你之前操作失败是两个核心问题导致的：

• 填入的地址不是音频直链：YouTube、SoundCloud这类平台的普通播放链接是网页地址，返回的是HTML页面内容，不是音频二进制流，浏览器无法识别为可播放的音频源，自然会提示“未找到受支持的音频源”。
• 原有代码存在变量错误：循环定义的索引变量是i，取数组元素时却写了未定义的musics[z]，哪怕本地文件测试也会触发报错。

要实现网络音频播放，首先要拿到直接指向.mp3/.wav/.ogg等浏览器支持格式音频文件的直链地址，同时音频存储的服务器需要允许跨域访问，不然浏览器会拦截资源请求。
修正后的代码如下：

function playMusic() {
  // 数组内填入真实的音频文件直链，不要填网页播放地址
  const musicList = [
    "替换为你拿到的音频直链地址"
  ]
  for(let i = 0; i < musicList.length; i++){
    const audioIns = new Audio(musicList[i])
    // 监听加载错误方便排查问题
    audioIns.addEventListener('error', () => {
      console.log('音频资源加载失败，请检查地址是否为有效直链、跨域配置是否正常')
    })
    audioIns.play().catch(err => {
      console.log('播放被拦截：现代浏览器默认禁止无用户交互的自动有声播放，请将播放逻辑绑定到点击、按键等用户操作事件上触发')
    })
  }
}

• 不要直接使用音频平台的普通播放页地址：如果需要接入YouTube、SoundCloud这类平台的音频内容，要使用平台官方提供的嵌入播放接口，不能直接把页面地址传入Audio对象。
• 从开源音效库取资源时，要确认复制的是音频文件直链，不是下载跳转页、资源展示页的地址，可以通过在新标签页打开链接是否直接触发音频播放/下载来判断是否为有效直链。
• 浏览器自动播放限制：不要在页面刚加载完成时就直接调用播放方法，必须等用户产生点击、键盘输入等交互行为后再触发播放，否则会被浏览器默认拦截。
• 自行存储音频资源时，建议放到配置了跨域访问规则的存储服务上，避免跨域拦截问题。

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