Android开发：如何实现无间隙的持续蜂鸣音

阿华AIGC实验室

2026-5-28

解决无间隙持续蜂鸣音的方案

嘿，这个无间隙持续蜂鸣的问题我之前帮不少开发者捋顺过，咱们先搞清楚间隙产生的核心原因：你现在用100ms周期的蜂鸣，大概率是靠定时器循环触发短音频播放，或者用了普通HTML5 Audio的循环——前者会因为JS事件循环的延迟出现间隙，后者可能因为音频文件本身的静音片段、API的初始化开销导致断档。下面给你几个靠谱的解决方案：

一、最可靠：用Web Audio API生成无缝循环的蜂鸣

Web Audio API直接操作音频缓冲，能做到真正的无间隙循环，而且不需要依赖外部音频文件，还能避免播放时的微小点击声。给你一个现成的实现代码：

// 初始化Web Audio上下文（注意：需要用户交互触发，比如点击事件，否则浏览器会阻止自动播放）
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 生成无间隙衔接的蜂鸣音频缓冲
function createSeamlessBeepBuffer(duration = 0.1, frequency = 440) {
  const sampleRate = audioContext.sampleRate;
  const sampleLength = sampleRate * duration;
  const buffer = audioContext.createBuffer(1, sampleLength, sampleRate);
  const channelData = buffer.getChannelData(0);

  for (let i = 0; i < sampleLength; i++) {
    const time = i / sampleRate;
    // 用正弦淡入淡出处理首尾，避免循环时出现"咔哒"声
    const fadeFactor = Math.sin(Math.PI * time / duration);
    // 生成440Hz的正弦波蜂鸣音
    channelData[i] = fadeFactor * Math.sin(2 * Math.PI * frequency * time);
  }
  return buffer;
}

// 控制蜂鸣的播放与停止
let activeBeepSource = null;
function startContinuousBeep() {
  // 如果之前有播放，先停止
  if (activeBeepSource) {
    activeBeepSource.stop();
  }
  const beepBuffer = createSeamlessBeepBuffer();
  activeBeepSource = audioContext.createBufferSource();
  activeBeepSource.buffer = beepBuffer;
  activeBeepSource.loop = true; // 关键：开启原生无缝循环
  activeBeepSource.connect(audioContext.destination);
  activeBeepSource.start();
}

function stopContinuousBeep() {
  if (activeBeepSource) {
    activeBeepSource.stop();
    activeBeepSource = null;
  }
}

使用的时候，只需要在你的事件触发时调用startContinuousBeep()，停止时调用stopContinuousBeep()就行。注意：现代浏览器要求音频播放必须由用户交互（比如点击、触摸）触发，所以第一次调用最好绑定在某个用户操作事件里。

二、如果用现成音频文件：先处理文件+双音频交替播放

如果你坚持用外部音频文件（比如WAV/MP3），先做两步准备：

用音频编辑工具（比如Audacity）打开你的蜂鸣文件，裁剪掉首尾的静音片段，确保音频从蜂鸣开始到结束没有空白；
导出为无压缩的WAV格式（MP3是有损压缩，很多编码器会自动添加静音头）。

然后用双音频元素交替播放的方式避免间隙：

<!-- 预加载两个相同的蜂鸣音频 -->
<audio id="beepA" src="seamless-beep.wav" preload="auto"></audio>
<audio id="beepB" src="seamless-beep.wav" preload="auto"></audio>

const beepA = document.getElementById('beepA');
const beepB = document.getElementById('beepB');
let currentBeep = beepA;

// 监听音频播放进度，提前触发下一个播放
function setupBeepLoop() {
  const triggerOffset = 0.01; // 提前10ms触发下一个，避免间隙
  beepA.addEventListener('timeupdate', () => {
    if (beepA.duration - beepA.currentTime < triggerOffset) {
      switchBeep();
    }
  });
  beepB.addEventListener('timeupdate', () => {
    if (beepB.duration - beepB.currentTime < triggerOffset) {
      switchBeep();
    }
  });
}

function switchBeep() {
  currentBeep = currentBeep === beepA ? beepB : beepA;
  currentBeep.currentTime = 0;
  currentBeep.play().catch(err => console.error(err));
}

// 启动/停止蜂鸣
function startBeep() {
  currentBeep.currentTime = 0;
  currentBeep.play().catch(err => console.error(err));
}

function stopBeep() {
  beepA.pause();
  beepB.pause();
}

// 初始化监听
setupBeepLoop();

这个方法的缺点是依赖浏览器的音频事件精度，不如Web Audio方案稳定，但如果你的场景不能用Web Audio的话可以试试。