如何在Webflow网站中实现悬停图片播放音频及进度动效？

前期准备 #

• 提前把所有音频片段上传到Webflow资源库，每个音频对应绑定到目标图片的自定义属性里，比如给图片加data-audio-url属性存音频地址，加data-hover-active做状态标记用。
• 给所有目标图片套一个父容器，父容器设置position: relative，图片初始样式设置opacity: 0.5（偏暗的初始状态，数值可以自行调整）。

核心实现逻辑 #

1. 交互事件绑定 #

直接在Webflow的自定义代码页脚区域插入JS代码，核心逻辑：

• 监听所有目标图片的mouseenter事件：触发时创建音频实例，存到元素的自定义属性里避免重复创建，同时暂停其他所有正在播放的音频，把其他图片的透明度重置为初始值。
• 监听mouseleave事件：触发时暂停当前音频，重置当前图片透明度为初始值。

2. 进度同步逻辑 #

用timeupdate事件监听音频播放进度，每次触发时计算当前播放进度百分比：
进度百分比 = (当前播放时间 / 音频总时长) * 100
然后把百分比映射到图片透明度：
图片opacity = 初始透明度 + (1 - 初始透明度) * (进度百分比 / 100)
举个例子，如果初始透明度是0.5，那么播放到100%的时候，透明度刚好到1，完全正常显示。
如果需要额外展示剩余时长，可以在图片父容器里加一个绝对定位的文本元素，每次进度更新的时候计算剩余时长赋值给这个元素的文本内容即可。

3. 边缘情况处理 #

• 音频加载失败的时候要自动重置图片状态，避免卡住
• 鼠标快速划过多个图片的时候，要做防抖处理，避免频繁触发音频加载播放导致卡顿
• 音频播放结束后自动重置状态到初始偏暗的效果

示例代码片段 #

你可以直接把下面的代码放到Webflow站点设置的自定义代码 → 页脚代码区域，替换对应的选择器即可：

// 替换成你自己的图片选择器，比如对应的class名
const audioImages = document.querySelectorAll('.audio-image');
// 自行调整初始偏暗透明度
const INITIAL_OPACITY = 0.5;

audioImages.forEach(img => {
  let audio = null;
  let animationFrame = null;

  // 鼠标进入触发
  img.addEventListener('mouseenter', () => {
    // 先暂停清空其他正在播放的音频
    document.querySelectorAll('audio.playing-audio').forEach(a => {
      a.pause();
      a.remove();
    });
    document.querySelectorAll('.audio-image').forEach(i => {
      i.style.opacity = INITIAL_OPACITY;
    });

    // 创建当前音频实例
    const audioUrl = img.dataset.audioUrl;
    if (!audioUrl) return;
    audio = new Audio(audioUrl);
    audio.classList.add('playing-audio');
    audio.play().catch(err => console.log('音频播放失败', err));

    // 同步播放进度和图片透明度
    audio.addEventListener('timeupdate', () => {
      if (animationFrame) cancelAnimationFrame(animationFrame);
      animationFrame = requestAnimationFrame(() => {
        const progress = audio.currentTime / audio.duration;
        img.style.opacity = INITIAL_OPACITY + (1 - INITIAL_OPACITY) * progress;
      });
    });

    // 播放结束后重置状态
    audio.addEventListener('ended', () => {
      img.style.opacity = INITIAL_OPACITY;
      audio.remove();
      audio = null;
    });
  });

  // 鼠标离开触发
  img.addEventListener('mouseleave', () => {
    if (animationFrame) cancelAnimationFrame(animationFrame);
    if (audio) {
      audio.pause();
      audio.remove();
      audio = null;
    }
    img.style.opacity = INITIAL_OPACITY;
  });
});

样式配置注意事项 #

• 不要给图片本身加transition: opacity属性，不然会和JS实时设置的透明度冲突，导致进度映射不跟手
• 如果需要音频预加载，可以在页面加载的时候就提前把所有音频实例创建好，只在悬停的时候触发play
• 移动端可以把触发逻辑换成touchstart事件，适配触摸场景

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