如何在单页面中实现点击播放图标触发对应字母音频播放功能

AI 小北

2026-9-30

多字母音频点击播放实现方案

不需要使用loop属性，loop专门用于音频循环播放场景，你的需求是点击触发对应字母音频单次播放，用事件绑定关联对应音频资源的方案即可实现，参考实现逻辑如下：

实现步骤

给每个播放图标添加data-audio-src自定义属性，存储对应字母的音频资源路径
统一为所有播放图标绑定点击事件，避免重复编写冗余代码
点击时先中断正在播放的音频，再读取当前点击图标关联的音频地址创建实例播放

示例代码

HTML 结构

<!-- 单个字母卡片示例，批量生成时只需修改字母文本和data-audio-src的值即可 -->
<div class="letter-item">
  <span class="letter-text">A</span>
  <img class="play-btn" src="播放图标本地路径" data-audio-src="./audio/a.mp3" alt="播放发音">
</div>
<div class="letter-item">
  <span class="letter-text">B</span>
  <img class="play-btn" src="播放图标本地路径" data-audio-src="./audio/b.mp3" alt="播放发音">
</div>

JavaScript 逻辑

// 记录当前正在播放的音频实例，避免多个音频同时播放
let playingAudio = null;

// 批量绑定点击事件
document.querySelectorAll('.play-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 中断上一个正在播放的音频
    if(playingAudio) {
      playingAudio.pause();
      playingAudio = null;
    }
    // 读取当前按钮绑定的音频地址
    const targetAudioSrc = this.dataset.audioSrc;
    // 创建音频实例播放
    playingAudio = new Audio(targetAudioSrc);
    playingAudio.play().catch(error => {
      console.error('播放失败，请检查音频路径是否正确：', error);
    });
  });
});