Vanilla JS中new Audio创建的音频播放延迟2秒问题求助

针对你在战舰游戏部署到GitHub Pages后出现的音效延迟问题，以下是几个经过验证的解决方案：

1. 确保音频完成解码后再使用 #

preload='auto'仅保证文件下载，在GitHub Pages的CDN环境下，浏览器可能未完成音频解码。通过监听canplaythrough事件并封装加载逻辑，确保音频真正就绪：

修改soundsController.js：

import cannonHit from './audio/cannon_hit.mp3';
import cannonAttack from './audio/cannon_attack.mp3';
import startClick from './audio/startClick.mp3';
import menuClick from './audio/menu_click.mp3';
import victory from './audio/victory.mp3';
import defeat from './audio/defeat.mp3';

const audioSources = [
  cannonAttack,
  cannonHit,
  menuClick,
  defeat,
  startClick,
  victory
];

export const audioObjects = [];

// 封装音频加载Promise
function loadAudio(src) {
  return new Promise((resolve) => {
    const audio = new Audio(src);
    audio.preload = 'auto';
    audio.addEventListener('canplaythrough', () => resolve(audio));
    audio.load(); // 显式触发加载
  });
}

// 预加载所有音频
Promise.all(audioSources.map(loadAudio)).then(audios => {
  audioObjects.push(...audios);
  // 提前激活音频上下文，避免首次播放延迟
  audioObjects.forEach(audio => {
    audio.currentTime = 0;
    audio.muted = true;
    audio.play().catch(() => {}); // 捕获自动播放限制错误
    audio.muted = false;
  });
});

// 静音切换逻辑保持不变
let soundBtn = document.querySelector('.sound-button');

soundBtn.addEventListener('click', () => {
  toggleMute();
  soundBtn.classList.toggle('off');
});

function toggleMute() {
  audioObjects.forEach((audio) => {
    audio.muted = !audio.muted;
  });
}

2. 切换到Web Audio API（低延迟首选） #

Web Audio API专为实时音频场景设计，延迟远低于HTML Audio，适合短音效。替换实现如下：

soundsController.js #

import cannonHit from './audio/cannon_hit.mp3';
import cannonAttack from './audio/cannon_attack.mp3';
import startClick from './audio/startClick.mp3';
import menuClick from './audio/menu_click.mp3';
import victory from './audio/victory.mp3';
import defeat from './audio/defeat.mp3';

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioBuffers = [];
let isMuted = false;

// 加载并解码音频为Buffer
async function loadAudioBuffer(src) {
  const response = await fetch(src);
  const arrayBuffer = await response.arrayBuffer();
  return audioContext.decodeAudioData(arrayBuffer);
}

// 预加载所有音效
async function initSounds() {
  const sources = [cannonAttack, cannonHit, menuClick, defeat, startClick, victory];
  audioBuffers.push(...await Promise.all(sources.map(loadAudioBuffer)));
}

// 播放指定索引的音效
export function playSound(index) {
  if (isMuted || !audioBuffers[index]) return;
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffers[index];
  source.connect(audioContext.destination);
  source.start();
}

// 静音切换
function toggleMute() {
  isMuted = !isMuted;
}

// 初始化音效
initSounds();

// 绑定静音按钮事件
let soundBtn = document.querySelector('.sound-button');
soundBtn.addEventListener('click', () => {
  toggleMute();
  soundBtn.classList.toggle('off');
});

调用示例（攻击函数） #

function updateCellHits(grid, x, y, target) {
  if (grid[x][y].ship !== null) {
    playSound(1);
    target.classList.add('hit');
    target.dataset.hit = 'true';
    target.style.pointerEvents = 'none';
  } else {
    playSound(0);
    target.classList.add('miss');
    target.dataset.hit = 'true';
    target.style.pointerEvents = 'none';
  }
}

3. 激活音频上下文（解决首次播放延迟） #

浏览器自动播放政策会在用户首次交互前暂停音频上下文，导致首次播放产生初始化延迟。在首次用户交互时主动激活：

startGameBtn.addEventListener('click', () => {
  // 针对Web Audio API激活上下文
  if (audioContext?.state === 'suspended') {
    audioContext.resume();
  }
  // 针对HTML Audio激活上下文
  audioObjects.forEach(audio => {
    audio.currentTime = 0;
    audio.muted = true;
    audio.play().then(() => audio.pause());
    audio.muted = false;
  });
  
  playSound(4); // 或audioObjects[4].play()
  initiatorContainer.style.display = 'none';
  initGameStart();
});

4. 优化缓存避免旧资源干扰 #

给音频文件添加版本查询参数，确保浏览器加载最新资源：

// 修改导入路径，添加版本号
import cannonHit from './audio/cannon_hit.mp3?v=1';
import cannonAttack from './audio/cannon_attack.mp3?v=1';
// 其他音频文件同理

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