嘿，我仔细看了你的代码和问题描述，这就帮你梳理下导致音频一直播放的核心原因，再给你修正后的实现方案：

问题根源分析 #

1. 重复调用peep.play()导致音频叠加：你的_peep函数里先后触发了三次peep.play()——开头一次、setTimeout回调里一次、最后又一次。哪怕loop设为false，多次触发播放会让音频实例反复启动，看起来就像是一直在循环播放。
2. 计时器逻辑混乱：你在函数里直接执行clearInterval(this.state.myDuration)，这个操作时机完全不对，而且没有正确管理间隔播放的计时器，很容易导致播放逻辑失控。
3. 未处理音频播放状态：如果在音频还没播放结束时再次调用play()，浏览器会重新启动这个音频的播放，这也会造成“持续播放”的错觉。

修正后的代码实现 #

我重新梳理了你的逻辑，确保启动、间隔、结束时各播放一次音频，同时彻底解决重复播放的问题：

const peepUrl = require('./../../../Assets/peep.mp3');
const peep = new Audio(peepUrl);
peep.loop = false;

// 封装安全播放音频的函数，避免重复触发
const playPeep = () => {
  // 先暂停并重置播放位置，再启动播放
  peep.pause();
  peep.currentTime = 0;
  peep.play();
};

_peep = () => {
  // 启动时播放警告音
  playPeep();

  const intervalMinutes = this.state.myInterval;
  const totalDurationMinutes = this.state.myDuration;

  // 如果设置了间隔时间，启动间隔播放计时器
  let intervalId = null;
  if (intervalMinutes > 0) {
    intervalId = setInterval(() => {
      playPeep();
    }, intervalMinutes * 60000); // 转换为毫秒
  }

  // 总时长结束时播放警告音，并清理所有计时器
  setTimeout(() => {
    playPeep();
    if (intervalId) clearInterval(intervalId);
    clearInterval(this.state.myDuration);
  }, totalDurationMinutes * 60000); // 假设myDuration是分钟数，转换为毫秒
};

关键改进点 #

• 封装playPeep函数：每次播放前先暂停音频并重置到开头，确保每次播放都是全新的单次播放，不会叠加之前的音频实例。
• 用setInterval处理间隔播放：原来的setTimeout只能触发一次间隔播放，改用setInterval可以稳定地每隔设定时间重复播放，最后在总时长结束时清理这个间隔器。
• 调整计时器清理时机：把所有清理操作放到总时长结束的回调里，确保计时器完成后才停止间隔播放，逻辑更清晰。
• 避免重复调用play()：现在启动、间隔、结束各只触发一次安全播放函数，彻底杜绝音频叠加的问题。

另外，你也可以检查下peep.mp3文件本身是否带有循环音频内容，如果文件自身是循环的，那即使设置loop=false也可能有问题，但从代码逻辑来看，上面的修正应该能解决你当前的核心问题。

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