如何编写词典App页面点击单词即可播放对应发音MP3的通用JS脚本

修正后可直接运行的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>单词发音功能示例</title>
</head>
<body>
    <!-- 实际使用时替换为你的p标签即可，只要元素id和单词、发音文件名对应即可 -->
    <p id="cat">cat</p>
    <p id="dog">dog</p>
    <button id="apple">apple（旁侧按钮示例）</button>

<script>
// 全局监听页面点击事件，无需单独给每个单词元素绑定事件
document.addEventListener('click', function(e) {
    const targetId = e.target.id.trim();
    // 仅点击带非空id的元素时触发发音，避免误触页面其他区域
    if (targetId) {
        playSound(targetId);
    }
});

// 通用发音播放函数
function playSound(word) {
    // 用原生HTML5 Audio API实现，兼容性更好，无需修改页面DOM结构
    const audio = new Audio(`${word}.mp3`);
    // 可选：音频加载失败时的兜底提示，方便排查文件缺失问题
    audio.addEventListener('error', () => {
        console.log(`未找到${word}对应的发音文件`);
    });
    audio.play();
}
</script>
</body>
</html>

关键修改说明 #

• 修复了原代码中字符串拼接语法错误、占位符未替换的问题
• 替换了老旧的embed标签方案，使用原生Audio API无需修改DOM结构，适配绝大多数现代浏览器
• 增加了id非空判断，避免点击页面空白区域、无id元素时抛出异常
• 自动适配全页面所有带对应id的元素，不管是p标签还是旁侧按钮都能触发

如果你坚持要使用插入embed标签的原有方案，可以把上面的playSound函数替换为以下版本：

function playSound(word) {
    document.getElementById(word).innerHTML = `
        <embed src="${word}.mp3" hidden="true" autostart="true" loop="false" />
    `;
}

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