如何在Pixi中为网页背景音乐添加播放/暂停按钮？

作为Pixi新手，你只需要记住两个核心要点：保存音频实例的引用，以及给按钮添加交互事件来控制音频的播放/暂停状态。下面是一步步的详细实现：

1. 先保存音频实例（关键！） #

你原来的代码里，音频实例只在loaded回调里可用，要让按钮能控制它，得把它存到一个全局（或者可访问）的变量里：

// 声明全局变量存储音频实例，让按钮能访问到它
let backgroundSound;

PIXI.sound.Sound.from({
  url: 'musical-11.mp3',
  loop: true,
  preload: true,
  loaded: function(err, sound) {
    if (err) {
      console.error('音频加载失败:', err);
      return;
    }
    // 把加载好的音频实例存起来
    backgroundSound = sound;
    // 这里可以选择默认不播放，等用户点击按钮再启动
    // sound.play();
  }
});

2. 创建可交互的按钮 #

首先要确保你已经初始化了Pixi的舞台和渲染器（如果还没做的话）：

// 初始化Pixi应用，渲染到页面上
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

接下来我们创建两个独立的播放/暂停按钮（用Pixi的Graphics绘制，不需要额外图片资源，适合新手）：

// --- 创建播放按钮 ---
const playButton = new PIXI.Graphics();
playButton.beginFill(0x2ecc71); // 填充绿色
playButton.drawRect(0, 0, 100, 50); // 绘制矩形按钮
playButton.endFill();
playButton.x = 50; // 设置按钮位置
playButton.y = 50;
playButton.interactive = true; // 开启交互
playButton.buttonMode = true; // 鼠标悬停时显示手型
app.stage.addChild(playButton);

// 给播放按钮添加文本标签
const playText = new PIXI.Text('播放', { fill: 0xffffff, fontSize: 20 });
playText.x = playButton.x + (playButton.width - playText.width)/2; // 文本居中
playText.y = playButton.y + (playButton.height - playText.height)/2;
app.stage.addChild(playText);

// --- 创建暂停按钮 ---
const pauseButton = new PIXI.Graphics();
pauseButton.beginFill(0xe74c3c); // 填充红色
pauseButton.drawRect(0, 0, 100, 50);
pauseButton.endFill();
pauseButton.x = 200;
pauseButton.y = 50;
pauseButton.interactive = true;
pauseButton.buttonMode = true;
app.stage.addChild(pauseButton);

// 给暂停按钮添加文本标签
const pauseText = new PIXI.Text('暂停', { fill: 0xffffff, fontSize: 20 });
pauseText.x = pauseButton.x + (pauseButton.width - pauseText.width)/2;
pauseText.y = pauseButton.y + (pauseButton.height - pauseText.height)/2;
app.stage.addChild(pauseText);

3. 给按钮绑定控制音频的事件 #

现在给按钮添加点击事件，调用Pixi Sound的play()、pause()、resume()方法来控制音频：

// 播放按钮点击逻辑
playButton.on('pointerdown', () => {
  if (!backgroundSound) return; // 音频没加载好就不执行

  if (backgroundSound.isPaused) {
    // 如果音频是暂停状态，恢复播放
    backgroundSound.resume();
  } else if (!backgroundSound.isPlaying) {
    // 如果音频还没播放过，直接启动播放
    backgroundSound.play();
  }
});

// 暂停按钮点击逻辑
pauseButton.on('pointerdown', () => {
  if (backgroundSound && backgroundSound.isPlaying) {
    // 只有音频正在播放时才执行暂停
    backgroundSound.pause();
  }
});

进阶：用一个按钮切换播放/暂停 #

如果你觉得两个按钮太占空间，可以做一个切换按钮，点击一次切换播放/暂停状态：

// 创建切换按钮
const toggleButton = new PIXI.Graphics();
toggleButton.beginFill(0x3498db); // 蓝色按钮
toggleButton.drawRect(0, 0, 120, 50);
toggleButton.endFill();
toggleButton.x = 50;
toggleButton.y = 50;
toggleButton.interactive = true;
toggleButton.buttonMode = true;
app.stage.addChild(toggleButton);

// 切换按钮的文本标签
const toggleText = new PIXI.Text('播放', { fill: 0xffffff, fontSize: 20 });
toggleText.x = toggleButton.x + (toggleButton.width - toggleText.width)/2;
toggleText.y = toggleButton.y + (toggleButton.height - toggleText.height)/2;
app.stage.addChild(toggleText);

// 切换按钮的点击逻辑
toggleButton.on('pointerdown', () => {
  if (!backgroundSound) return;

  if (backgroundSound.isPlaying) {
    backgroundSound.pause();
    toggleText.text = '播放'; // 切换文本提示
  } else {
    // 如果是暂停状态就恢复，没播放过就直接播放
    backgroundSound.isPaused ? backgroundSound.resume() : backgroundSound.play();
    toggleText.text = '暂停'; // 切换文本提示
  }
});

注意事项 #

• 确保你已经正确引入了Pixi.js和Pixi Sound库（在HTML的<head>里添加对应的脚本标签）
• 浏览器对自动播放音频有严格限制，建议让用户手动点击按钮启动音频，避免被浏览器拦截
• 可以通过backgroundSound.isPlaying、backgroundSound.isPaused来判断当前音频状态

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