JavaScript 点击按钮播放MP3音频功能运行失效问题求助

存在的问题 #

1. 音频URL存在非法换行符：你在JavaScript中定义的音频地址末尾多了一个换行符，导致URL无效，无法正确请求资源
2. 未调用播放方法：仅创建了Audio实例，没有执行play()方法触发音频播放逻辑
3. HTML结构错误：<head>标签不允许嵌套<body>标签，不符合HTML语法规范，可能引发浏览器渲染异常
4. 音频地址类型错误：你使用的https://voca.ro/1dcHxW3v1oQA是分享页面地址，不是MP3资源直链，Audio对象无法解析网页内容作为音频源

修复方案 #

1. 修正核心逻辑 #

替换无效的音频地址为MP3资源直链：

• 如果使用你自己上传到GitHub的音频，需要获取raw.githubusercontent.com开头的资源直链，不能使用github.com域名下的blob预览页地址
• 所有作为音频源的地址，必须满足直接在浏览器地址栏输入后可以直接播放音频，而非打开带UI的分享页面

2. 修正后的代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>音频播放测试</title>
</head>
<body>
  <button onclick="playAudio()">播放音频</button>
  <script>
    function playAudio() {
      // 替换引号内的内容为你自己的MP3资源直链
      const audio = new Audio('你的MP3资源直链地址');
      // 增加错误捕获方便排查问题
      audio.play().catch(err => console.log('播放出错：', err));
    }
  </script>
</body>
</html>

3. 额外注意事项 #

• 为了避免和浏览器全局play方法冲突，自定义播放函数命名不要直接用play，修改为playAudio这类自定义名称更稳妥
• 现代浏览器禁止非用户交互触发的音频自动播放，你使用按钮点击触发播放的逻辑符合浏览器策略要求，无需额外调整

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