228. 综合实战：开放世界（二十九）

这节我们来加一些音效。

比如背景音乐、走路、碰到物体的声音等。

走路音效可以用这个：

https://www.aigei.com/item/jiao_bu_sheng_26428.html

下载下来放到 public 目录：

代码里用 Audio 引入下：

// 走路音效
const walkSound = new Audio('/walk.mp3');
walkSound.loop = true;
walkSound.volume = 0.5;
let isWalkSoundPlaying = false;

走路的时候播放下：

// 控制走路音效
if (isMoving && isOnGround && !isCarView && !isComputerView && !isTalking) {
    if (!isWalkSoundPlaying) {
      walkSound.play().catch(err => {
        console.log('播放走路音效失败:', err);
      });
      isWalkSoundPlaying = true;
    }
} else {
    if (isWalkSoundPlaying) {
      walkSound.pause();
      walkSound.currentTime = 0; // 重置到开头，下次播放时从头开始
      isWalkSoundPlaying = false;
    }
}

试一下：

2026-02-15 10.01.46.gif

jaudio

这样走路音效就添加完成了。

然后我们加一个背景音乐，这里用纯音乐就行。

https://www.2t58.com/playlist/ZGNodndoeGNzYw.html

用这个吧

https://www.2t58.com/song/ZHNzZGtrbQ.html

代码里加载下：

// 背景音乐
const backgroundMusic = new Audio('/秋日私语.mp3');
backgroundMusic.loop = true;
backgroundMusic.volume = 0.3; // 背景音乐音量设置为30%

// 在用户第一次交互时播放背景音乐（浏览器自动播放限制）
let musicStarted = false;
function startBackgroundMusic() {
  if (!musicStarted) {
    backgroundMusic.play().catch(err => {
      console.log('播放背景音乐失败:', err);
    });
    musicStarted = true;
  }
}

// 监听用户交互事件来启动背景音乐
document.addEventListener('click', startBackgroundMusic, { once: true });
document.addEventListener('keydown', startBackgroundMusic, { once: true });

试一下：

2026-02-15 10.01.46.gif

这样，背景音乐就添加完成了，沉浸式体验更好。

案例代码上传了小册仓库

总结

这节我们加上了走路的音效、背景音乐。

这样交互更沉浸式了，后面还可以继续加更多音效。

228. 综合实战：开放世界（二十九）

总结

评论