音频标签（audio）点击事件无法触发问题求助

看起来你遇到了audio点击事件不生效，而且shakeDots函数本身也有几个小问题，我帮你梳理下问题点和修复方案：

一、先修复JavaScript代码里的语法/逻辑错误 #

你的JS代码里有几个明显的错误，这是导致函数执行失败的核心原因：

1. 方法名拼写错误：document.querySelectorALL 应该是 document.querySelectorAll（注意是小写的all结尾，不是大写的ALL，JS方法名是大小写敏感的）
2. 类名选择错误：HTML里span的类是sho，但你JS里选的是.shok，类名多了个k，完全匹配不上目标元素
3. 元素集合无法直接操作classList：querySelectorAll返回的是元素集合（NodeList），不是单个元素，不能直接调用classList.add，需要循环遍历每个元素来添加类
4. console.log拼写错误：你写成了console,log，逗号要改成点.

修复后的JavaScript代码：

function shakeDots() {
    const dots = document.querySelectorAll('.sho');
    // 遍历每个dot元素添加抖动类
    dots.forEach(dot => dot.classList.add('shak'));
    console.log("函数触发成功！");
}

二、Audio标签点击事件的潜在坑点 #

即使修复了JS代码，你可能还是会遇到audio点击不触发事件的情况——这是因为开启controls属性后，浏览器会渲染原生的音频控件UI，点击播放/暂停按钮这些核心区域时，浏览器的默认控件会拦截点击事件，导致你绑定的onclick不会被触发。

更靠谱的方式是监听audio的play事件（而不是click事件），因为我们真正想要的是“当音频开始播放时触发抖动效果”，而不是单纯的点击audio元素。这里给你两种实现方案：

方案1：改用事件监听（推荐，分离HTML和JS代码）

先修改HTML，移除audio标签上的onclick属性：

<div class="lyric-word">
    <span class="sho">.</span>
    <span class="sho">.</span>
    <span class="sho">.</span>
    <span class="sho">.</span>
    <span class="sho">.</span>
    <span class="sho">.</span>
</div>      
<div class="btm">
    <audio id="thisaudio" src="https://pagalworld.com.mx/wp-content/uploads/2023/02/Until-I-Found-You.mp3"
          controls controlsList="nodownload noplaybackrate"></audio>
</div>

然后在JS里绑定play事件：

// 等页面DOM加载完成后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
    const audioEl = document.getElementById('thisaudio');
    // 监听音频播放事件
    audioEl.addEventListener('play', shakeDots);
    
    // 额外：如果需要暂停时移除抖动类（方便重复触发效果），可以加个pause事件
    audioEl.addEventListener('pause', function() {
        const dots = document.querySelectorAll('.sho');
        dots.forEach(dot => dot.classList.remove('shak'));
    });
});

function shakeDots() {
    const dots = document.querySelectorAll('.sho');
    dots.forEach(dot => dot.classList.add('shak'));
    console.log("音频开始播放，抖动效果触发！");
}

方案2：如果一定要用点击事件（不推荐）

可以给audio外面的.btm容器绑定点击事件，或者用事件委托，但这种方式可能会误触发（比如点击容器空白区域也会触发），所以还是优先推荐监听音频的原生事件。

小提示 #

如果你的抖动效果是一次性动画，记得在合适的时机移除shak类（比如音频暂停、结束时），不然类会一直留在元素上，下次触发时可能看不到新的动画效果哦。

备注：内容来源于stack exchange，提问作者Alsiro Mira