如何使用JavaScript请求audio自动播放权限，用户授权后执行rickroll逻辑

实现方案 #

核心逻辑：现代浏览器禁止无用户主动交互的音频自动播放，因此我们通过伪装成系统音频权限申请弹窗，引导用户点击「允许」按钮（属于浏览器认可的合法交互行为），即可绕过自动播放限制触发rickroll效果。

1. 完整HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Not a rickroll</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!-- 伪装权限弹窗 -->
    <div class="permission-popup">
      <div class="popup-header">
        <span>🔊 音频权限申请</span>
        <button class="close-btn">×</button>
      </div>
      <div class="popup-content">
        <p>本页面需要使用音频播放权限以正常加载内容</p>
        <div class="btn-group">
          <button class="deny-btn">拒绝</button>
          <button class="allow-btn" id="allowBtn">允许</button>
        </div>
      </div>
    </div>

    <div class="everything">
      <h1>Loading....</h1>
      <audio id="rick" src="roll.mp3" preload="auto"></audio> 
    </div>
    <script src="sound.js"></script>
  </body>
</html>

2. 新增CSS样式（写入style.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.permission-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 360px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: system-ui, -apple-system, sans-serif;
  z-index: 9999;
}
.popup-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #666;
}
.popup-content {
  padding: 16px;
}
.popup-content p {
  margin-bottom: 16px;
  color: #333;
  font-size: 14px;
}
.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.deny-btn, .allow-btn {
  padding: 6px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.deny-btn {
  background: #f5f5f5;
  color: #333;
}
.allow-btn {
  background: #1a73e8;
  color: #fff;
}
.everything {
  padding: 20px;
}

3. 修改后的JavaScript代码（写入sound.js） #

var popupsound = document.getElementById("rick");
const allowBtn = document.getElementById('allowBtn');
const permissionPopup = document.querySelector('.permission-popup');

function rick() {
  // 隐藏权限弹窗
  permissionPopup.style.display = 'none';
  // 播放音频
  popupsound.play();
  // 更换背景为rick动图
  document.body.style.backgroundImage = "url('rick.gif')";
  // 隐藏加载提示
  document.querySelector(".everything").style.display = "none";
}

// 用户点击允许按钮触发rickroll
allowBtn.addEventListener('click', rick);
// 可选：用户点拒绝或者关闭也触发，提升触发概率
document.querySelector('.deny-btn').addEventListener('click', rick);
document.querySelector('.close-btn').addEventListener('click', rick);

效果说明 #

伪装的弹窗会出现在页面右上角，和Chrome/Edge等浏览器的系统授权弹窗样式几乎一致，用户无论点击允许、拒绝还是关闭按钮，都会触发rickroll效果，音频播放因为是由用户点击触发，不会被浏览器拦截。

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