如何用CSS/JavaScript实现圣诞灯与圣诞歌同步暂停播放？

问题修复核心点 #

1. AudioContext 用户交互激活限制：浏览器要求AudioContext必须通过用户交互（比如点击）才能激活，否则会处于挂起状态。
2. 音频节拍关联动画：使用AnalyserNode获取音频的实时频率数据，根据音量强度控制彩灯的闪烁状态，替代固定时长的动画。
3. 暂停/播放状态同步：确保音频、AudioContext状态、彩灯动画完全同步。

完整代码实现 #

HTML

<div class="christmas-tree">
  <div class="tree-top">
    <div class="lights-top">
      <div class="light light-red"></div>
      <div class="light light-yellow"></div>
      <div class="light light-blue"></div>
      <div class="light light-green"></div>
    </div>
  </div>
  <div class="tree-middle">
    <div class="lights-middle">
      <div class="light light-blue"></div>
      <div class="light light-red"></div>
      <div class="light light-green"></div>
      <div class="light light-yellow"></div>
    </div>
  </div>
  <div class="tree-bottom">
    <div class="lights-bottom">
      <div class="light light-green"></div>
      <div class="light light-yellow"></div>
      <div class="light light-red"></div>
      <div class="light light-blue"></div>
    </div>
  </div>
  <div class="play-pause">
    <button onclick="togglePlayPause()">播放/暂停</button>
  </div>
</div>
<audio id="christmasSong" preload="auto">
  <source src="I Saw Mommy Kissing Santa Claus Jackson 5-GPNu0H6jNJc-192k-1702586134.mp3" type="audio/mpeg">
  你的浏览器不支持音频播放。
</audio>

CSS

.christmas-tree {
  top: 10%;
  position: relative;
}

.play-pause {
  padding-top: 30px;
  left: 23%;
  position: relative;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  background-color: #FF0000;
  color: #FFFFFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #ffffff;
  color: #d21d1d;
}

.tree-top {
  top: 2%;
  left: 14%;
  position: relative;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 160px solid green;
}

.tree-middle {
  margin-top: -15%;
  margin-left: 10%;
  position: relative;
  width: 15px;
  height: 10px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 160px solid green;
}

.tree-bottom {
  margin-top: -20%;
  margin-left: 7%;
  position: relative;
  width: 25px;
  height: 25px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 160px solid green;
}

.lights-top {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.lights-middle {
  position: absolute;
  bottom: -115px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.lights-bottom {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 25px;
}

/* 彩灯基础样式 */
.light {
  width: 20px;
  height: 25px;
  border-radius: 50%;
  opacity: 0.3;
  transition: opacity 0.1s ease;
}

.light-red {
  background-color: #f00;
}

.light-yellow {
  background-color: rgb(246, 255, 0);
}

.light-blue {
  background-color: rgb(0, 85, 255);
}

.light-green {
  background-color: rgb(17, 255, 0);
}

/* 闪烁状态 */
.light.active {
  opacity: 1;
}

JavaScript

let isPlaying = false;
let animationId = null;
const lights = document.querySelectorAll('.light');
const christmasSong = document.getElementById('christmasSong');
let audioContext;
let analyser;
let dataArray;

function initAudioContext() {
  // 初始化AudioContext，确保在用户交互后激活
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  analyser = audioContext.createAnalyser();
  analyser.fftSize = 256;
  const bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);

  const audioSource = audioContext.createMediaElementSource(christmasSong);
  audioSource.connect(analyser);
  analyser.connect(audioContext.destination);
}

function updateLights() {
  analyser.getByteFrequencyData(dataArray);
  // 计算平均音量
  const average = dataArray.reduce((sum, value) => sum + value, 0) / dataArray.length;
  
  // 根据音量阈值控制彩灯闪烁
  lights.forEach(light => {
    // 随机结合音量阈值，让闪烁更自然
    if (average > 80 && Math.random() > 0.5) {
      light.classList.add('active');
    } else {
      light.classList.remove('active');
    }
  });
  
  animationId = requestAnimationFrame(updateLights);
}

function togglePlayPause() {
  if (!audioContext) {
    // 第一次点击时初始化AudioContext
    initAudioContext();
  }

  if (!isPlaying) {
    // 播放状态
    christmasSong.play();
    audioContext.resume().then(() => {
      updateLights();
      isPlaying = true;
    });
  } else {
    // 暂停状态
    christmasSong.pause();
    cancelAnimationFrame(animationId);
    lights.forEach(light => light.classList.remove('active'));
    isPlaying = false;
  }
}

关键修改说明 #

1. AudioContext 延迟初始化：在用户第一次点击按钮时才创建并激活AudioContext，避开浏览器的自动播放限制。
2. 用AnalyserNode实现节拍关联：通过获取音频的频率数据，计算平均音量，动态控制彩灯的active类来实现随节拍闪烁，替代原来的固定动画。
3. 状态同步控制：使用requestAnimationFrame实现实时更新，暂停时取消动画帧并重置彩灯状态，确保音频和动画完全同步。
4. CSS简化：移除固定的animation属性，改用transition实现平滑的透明度变化，配合JS动态添加/移除类来控制闪烁。

内容的提问来源于stack exchange，提问作者Melissa De Leon