求助：在Elementor中实现多可点击播放图标关联不同音频的方案

方法一：使用数据属性关联已有音频元素 #

这种方法适合需要保留独立音频元素的场景，每个按钮对应一个预先定义的<audio>标签。

步骤1：设置HTML结构（Elementor中操作） #

• 播放按钮：添加「图标」或「按钮」组件，设置CSS类为 audio-button；在「高级」标签页的「自定义属性」中添加：
  • 名称：data-audio-target
  • 值：audio-1（每个按钮对应唯一的音频ID）
• 音频元素：添加「HTML」组件，插入<audio>标签，替换src为你的媒体库音频链接：

<!-- 音频1 -->
<audio id="audio-1" src="https://your-site.com/wp-content/uploads/audio1.mp3"></audio>

<!-- 音频2 -->
<audio id="audio-2" src="https://your-site.com/wp-content/uploads/audio2.mp3"></audio>

步骤2：添加JavaScript代码 #

在页面的「自定义HTML」组件中插入以下脚本（建议放在页面底部）：

<script>
// 获取所有播放按钮和音频元素
const audioButtons = document.querySelectorAll('.audio-button');
const audioElements = document.querySelectorAll('audio');

// 为每个按钮绑定点击事件
audioButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮对应的音频ID
    const targetAudioId = this.getAttribute('data-audio-target');
    const targetAudio = document.getElementById(targetAudioId);
    
    if (!targetAudio) return; // 音频不存在则退出
    
    // 暂停其他正在播放的音频
    audioElements.forEach(audio => {
      if (audio !== targetAudio && !audio.paused) {
        audio.pause();
        audio.currentTime = 0; // 重置到开头
      }
    });
    
    // 切换当前音频的播放/暂停状态
    if (targetAudio.paused) {
      targetAudio.play();
      // 可选：切换按钮图标为暂停（需替换为你的图标代码）
      // this.innerHTML = '<i class="fas fa-pause"></i>';
    } else {
      targetAudio.pause();
      // 可选：切换按钮图标为播放
      // this.innerHTML = '<i class="fas fa-play"></i>';
    }
  });
});
</script>

方法二：动态创建音频元素（更简洁） #

这种方法无需预先添加<audio>标签，直接通过按钮的data-audio-src属性获取音频链接，动态创建音频实例。

步骤1：设置按钮结构（Elementor中操作） #

• 添加「图标」或「按钮」组件，设置CSS类为 audio-button；在「高级」标签页的「自定义属性」中添加：
  • 名称：data-audio-src
  • 值：你的媒体库音频链接（如https://your-site.com/wp-content/uploads/audio1.mp3）

步骤2：添加JavaScript代码 #

同样在页面底部插入以下脚本：

<script>
let currentAudio = null; // 跟踪当前播放的音频
const audioButtons = document.querySelectorAll('.audio-button');

audioButtons.forEach(button => {
  button.addEventListener('click', async function() {
    const audioSrc = this.getAttribute('data-audio-src');
    if (!audioSrc) return;

    // 如果点击的是当前正在播放的音频，切换状态
    if (currentAudio && currentAudio.src.includes(audioSrc)) {
      currentAudio.paused ? await currentAudio.play() : currentAudio.pause();
      // 可选：切换图标
      return;
    }

    // 暂停之前的音频
    if (currentAudio) {
      currentAudio.pause();
      currentAudio.currentTime = 0;
      // 可选：重置之前按钮的图标
    }

    // 创建新的音频实例并播放
    currentAudio = new Audio(audioSrc);
    await currentAudio.play();
    // 可选：切换当前按钮图标为暂停
  });
});
</script>

关键说明 #

• 图标切换：如果需要在播放/暂停时切换图标，只需替换代码中注释部分的图标HTML（Elementor中使用的图标类名）。
• Elementor兼容性：确保所有自定义属性和CSS类正确设置，脚本放在页面底部避免DOM未加载完成的问题。
• 音频格式：使用浏览器支持的格式（如MP3、WAV），确保媒体库中的音频链接可直接访问。

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