如何使用jQuery结合audio/embed标签实现MP3自动循环播放？

这问题我之前帮不少开发者排查过，核心原因是现代浏览器的自动播放策略限制——几乎所有主流浏览器都要求音频/视频的自动播放必须和用户的主动交互（比如点击、触摸）绑定，不允许无用户触发的自动媒体播放，哪怕是新开窗口也不行，这就是你原来代码里autoplay失效的关键。

下面给你两种可行的解决方案，分别适配audio标签和embed标签：

方案一：用audio标签实现（推荐，兼容性更好） #

核心思路是把音乐播放的触发逻辑绑定到用户的交互事件里，比如页面点击、按钮点击，这样浏览器就会允许autoplay生效，同时保留loop属性。

代码示例（基于jQuery） #

$(document).ready(function() {
  // 绑定页面首次点击事件来启动音乐（也可以绑定到特定按钮）
  $('body').one('click', function() {
    initBackgroundMusic();
  });
});

function initBackgroundMusic() {
  // 直接在当前页面创建audio元素（比新开窗口更友好）
  const audio = $('<audio>', {
    controls: true,
    autoplay: true,
    loop: true,
    src: './music.mp3'
  }).appendTo('body');

  // 可选：如果浏览器还是限制自动播放，先静音播放，用户点击后取消静音
  audio.on('click', function() {
    this.muted = !this.muted;
  });
}

关键注意点 #

• 必须把initBackgroundMusic的调用放在用户交互的回调里（比如click事件），不能在页面加载时直接调用，否则浏览器会拦截autoplay。
• 如果一定要用新开窗口的方式，也要确保window.open是在用户交互触发的回调里执行，并且记得调用pop.document.close()来完成文档渲染：

function initBackgroundMusic() {
  const pop = window.open('', 'back__music', 'width=100,height=100', true);
  pop.document.write('<audio controls autoplay loop><source src="./music.mp3"/></audio>');
  pop.document.close(); // 必须加这一行，确保窗口内的音频元素正确渲染
}

方案二：用embed标签实现循环播放 #

如果坚持要用embed标签，可以通过监听播放结束事件来手动触发循环：

代码示例（基于jQuery） #

$(document).ready(function() {
  $('body').one('click', function() {
    const embed = $('<embed>', {
      src: './music.mp3',
      type: 'audio/mpeg',
      id: 'bg-music'
    }).appendTo('body');

    // 监听播放结束事件，触发重新播放
    $('#bg-music').on('ended', function() {
      // 重新设置src来触发循环播放
      this.src = './music.mp3';
    });
  });
});

注意点 #

• embed标签的播放事件兼容性不如audio标签，部分浏览器可能需要调整事件名（比如onfinish），所以更推荐用audio方案。

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