如何阻止a标签跳转新页，实现点击PLAY MUSIC在当前页后台播放音乐

这个需求完全可以实现，只需对现有代码做少量修改即可：

1. 添加音频载体 #

在HTML文件的body标签内任意位置（推荐放在</body>之前）添加隐藏的音频元素，用于后台加载和播放音乐：

<audio id="bgMusic" src="https://audio.code.org/win1.mp3" preload="auto" hidden></audio>

2. 绑定点击事件处理逻辑 #

在你现有的JS代码末尾添加如下代码，拦截a标签的默认跳转行为，改为控制音乐播放：

$('.sig').click(function(e) {
  // 阻止a标签默认跳转、打开新页面的行为
  e.preventDefault();
  const audioEle = $('#bgMusic')[0];
  // 切换播放/暂停状态，重复点击可控制音乐启停
  audioEle.paused ? audioEle.play() : audioEle.pause();
})

实现原理 #

• e.preventDefault()方法直接禁用了a标签的默认跳转逻辑，点击后不会离开当前页面
• 加了hidden属性的audio元素不会在页面上展示播放器界面，完全在后台运行
• 音乐播放由用户点击行为触发，符合各大浏览器的自动播放策略，不会被拦截

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