如何在指定div内每次追加class为xyz的新div时播放提醒音效

你可以通过MutationObserver接口监听父容器的DOM变动，匹配到类为xyz的新子元素追加时触发音效播放，具体实现如下：

1. 预创建音频实例 #

提前实例化音频对象，避免每次播放重复加载资源：

// 替换为你自己的提醒音效文件路径
const notifyAudio = new Audio('/path/to/notification.mp3');
// 开启音频预加载
notifyAudio.preload = 'auto';

2. 获取待监听的父容器 #

替换为你实际的父容器选择器，选中要监听的div容器：

// 示例：如果父容器id为container，就写'#container'
const parentContainer = document.querySelector('你的父容器选择器');

3. 初始化DOM变动观察者 #

配置监听规则，仅监听子节点新增变动，匹配目标元素时触发音频播放：

// 观察者配置：只监听子元素新增，不需要监听属性、文本变动
const observerOptions = {
  childList: true,
  subtree: false // 如果xyz类div可能嵌套在其他新增节点内，就把这个值改成true
};

const domObserver = new MutationObserver((mutationList) => {
  for (const mutation of mutationList) {
    // 遍历所有新增节点
    for (const addedNode of mutation.addedNodes) {
      // 校验节点是否为类名包含xyz的div元素
      if (
        addedNode.nodeType === Node.ELEMENT_NODE &&
        addedNode.tagName === 'DIV' &&
        addedNode.classList.contains('xyz')
      ) {
        // 重置播放进度，避免连续触发时播放失效
        notifyAudio.currentTime = 0;
        notifyAudio.play().catch((err) => {
          // 捕获浏览器自动播放限制报错：浏览器要求用户至少和页面交互1次（点击/触摸）后才允许自动播放音频
          console.warn('音频播放被拦截，请先点击页面任意位置激活播放权限', err);
        });
      }
    }
  }
});

// 启动监听
domObserver.observe(parentContainer, observerOptions);

• 不需要监听时可以调用domObserver.disconnect()销毁观察者，释放内存
• 可以提前在页面加个简单的用户交互引导，比如「点击页面开启提醒」，提前获取音频播放权限，避免首次触发时播放失败

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