博客站

在 UniApp 中，音频播放是许多应用的核心需求之一，例如音乐播放、语音消息播放等。UniApp 提供了 uni.createInnerAudioContext API 来实现音频播放功能。以下是 UniApp 处理音频播放的详细步骤：

一、基本音频播放

1. 使用 uni.createInnerAudioContext

• uni.createInnerAudioContext 是 UniApp 提供的音频播放 API。
• 示例：

  const innerAudioContext = uni.createInnerAudioContext();
  
  innerAudioContext.src = 'https://example.com/audio.mp3';
  innerAudioContext.autoplay = true;
  
  innerAudioContext.onPlay(() => {
    console.log('音频开始播放');
  });
  
  innerAudioContext.onEnded(() => {
    console.log('音频播放结束');
  });
  

2. 设置音频属性

• 通过 src、autoplay、loop 等属性设置音频播放行为。
• 示例：

  innerAudioContext.src = 'https://example.com/audio.mp3';
  innerAudioContext.autoplay = true;
  innerAudioContext.loop = true;
  innerAudioContext.volume = 0.5; // 音量（0 到 1）
  

二、控制音频播放

1. 播放音频

• 通过 play 方法播放音频。
• 示例：

  innerAudioContext.play();
  

2. 暂停音频

• 通过 pause 方法暂停音频。
• 示例：

  innerAudioContext.pause();
  

3. 停止音频

• 通过 stop 方法停止音频。
• 示例：

  innerAudioContext.stop();
  

4. 跳转播放位置

• 通过 seek 方法跳转到指定位置。
• 示例：

  innerAudioContext.seek(10); // 跳转到第 10 秒
  

三、监听音频事件

1. 监听播放开始

• 通过 onPlay 监听音频播放开始事件。
• 示例：

  innerAudioContext.onPlay(() => {
    console.log('音频开始播放');
  });
  

2. 监听播放暂停

• 通过 onPause 监听音频播放暂停事件。
• 示例：

  innerAudioContext.onPause(() => {
    console.log('音频暂停');
  });
  

3. 监听播放结束

• 通过 onEnded 监听音频播放结束事件。
• 示例：

  innerAudioContext.onEnded(() => {
    console.log('音频播放结束');
  });
  

4. 监听播放错误

• 通过 onError 监听音频播放错误事件。
• 示例：

  innerAudioContext.onError((err) => {
    console.log('音频播放错误：', err);
  });
  

四、处理音频状态

1. 获取当前播放位置

• 通过 currentTime 属性获取当前播放位置。
• 示例：

  console.log('当前播放位置：', innerAudioContext.currentTime);
  

2. 获取音频总时长

• 通过 duration 属性获取音频总时长。
• 示例：

  console.log('音频总时长：', innerAudioContext.duration);
  

3. 获取播放状态

• 通过 paused 属性获取音频播放状态。
• 示例：

  console.log('音频是否暂停：', innerAudioContext.paused);
  

五、总结

UniApp 处理音频播放的步骤如下：

1. 使用 uni.createInnerAudioContext：通过 uni.createInnerAudioContext API 实现音频播放。
2. 控制音频播放：通过 play、pause、stop 和 seek 方法控制音频播放。
3. 监听音频事件：通过 onPlay、onPause、onEnded 和 onError 监听音频播放状态。
4. 处理音频状态：通过 currentTime、duration 和 paused 获取音频播放状态。

以下是一个完整的音频播放示例：

const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.src = 'https://example.com/audio.mp3';
innerAudioContext.autoplay = true;
innerAudioContext.loop = true;
innerAudioContext.volume = 0.5;

innerAudioContext.onPlay(() => {
  console.log('音频开始播放');
});

innerAudioContext.onPause(() => {
  console.log('音频暂停');
});

innerAudioContext.onEnded(() => {
  console.log('音频播放结束');
});

innerAudioContext.onError((err) => {
  console.log('音频播放错误：', err);
});

// 播放音频
innerAudioContext.play();

// 暂停音频
setTimeout(() => {
  innerAudioContext.pause();
}, 5000); // 5 秒后暂停

// 跳转到第 10 秒
setTimeout(() => {
  innerAudioContext.seek(10);
}, 10000); // 10 秒后跳转

通过合理使用这些方法，可以轻松实现 UniApp 中的音频播放功能，满足应用的需求。