uniapp 如何实现音频播放功能

在uniapp中如何实现音频播放功能？需要支持本地音频文件和网络音频的播放，能够控制播放、暂停、进度调整和音量调节。最好能提供完整的代码示例，以及在不同平台（iOS/Android/H5）上的兼容性注意事项。另外，如何监听播放状态（如播放完成、播放错误等事件）？

2 回复

使用uni.createInnerAudioContext()创建音频对象，设置src属性为音频链接，调用play()方法播放。可监听播放、暂停、错误等事件。


在 UniApp 中实现音频播放功能，可以使用内置的 uni.createInnerAudioContext() API。以下是基本实现步骤和示例代码：

实现步骤：

  1. 创建音频上下文对象：使用 uni.createInnerAudioContext() 初始化音频播放器。
  2. 设置音频源：通过 src 属性指定音频文件路径（支持本地路径和网络 URL）。
  3. 控制播放：调用 play()、pause()、stop() 方法控制播放状态。
  4. 监听事件：处理播放、暂停、结束等事件，更新 UI 状态。

示例代码：

// 在 Vue 组件的 methods 中定义
methods: {
  initAudio() {
    // 创建音频上下文
    this.innerAudioContext = uni.createInnerAudioContext();
    // 设置音频源（示例为网络音频，需替换为实际 URL）
    this.innerAudioContext.src = 'https://example.com/audio.mp3';
    
    // 监听音频播放事件
    this.innerAudioContext.onPlay(() => {
      console.log('开始播放');
    });
    
    // 监听音频结束事件
    this.innerAudioContext.onEnded(() => {
      console.log('播放结束');
    });
    
    // 监听错误事件
    this.innerAudioContext.onError((res) => {
      console.log('播放错误:', res.errMsg);
    });
  },
  
  playAudio() {
    if (this.innerAudioContext) {
      this.innerAudioContext.play();
    }
  },
  
  pauseAudio() {
    if (this.innerAudioContext) {
      this.innerAudioContext.pause();
    }
  },
  
  stopAudio() {
    if (this.innerAudioContext) {
      this.innerAudioContext.stop();
    }
  }
},

// 在页面加载时初始化
onLoad() {
  this.initAudio();
},

// 页面卸载时销毁音频上下文
onUnload() {
  if (this.innerAudioContext) {
    this.innerAudioContext.destroy();
  }
}

模板示例（UI 控制）：

<template>
  <view>
    <button @click="playAudio">播放</button>
    <button @click="pauseAudio">暂停</button>
    <button @click="stopAudio">停止</button>
  </view>
</template>

注意事项：

  • 音频格式：确保音频格式兼容（如 MP3、AAC 等），不同平台支持可能略有差异。
  • 网络音频：使用网络 URL 时需配置合法域名（在 manifest.json 的 networkTimeout 中设置）。
  • 自动播放限制：部分平台（如 iOS）禁止自动播放，需通过用户交互触发播放。
  • 内存管理：页面销毁时调用 destroy() 释放资源，避免内存泄漏。

通过以上代码，即可在 UniApp 中实现基本的音频播放控制。如需进度条、音量调节等高级功能，可通过监听 onTimeUpdate 和设置 volume 属性扩展。

回到顶部