如何在Ionic Vue中使用Capacitor的Native Audio插件开发音乐播放器

1. 前置安装 #

执行以下命令安装插件并同步Capacitor配置：

npm install @capacitor-community/native-audio
npx cap sync

2. 完整组件示例（Vue3 组合式API） #

以下是包含基础播放控制功能的单文件组件示例：

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <h3>简易音乐播放器</h3>
      <ion-button @click="preloadAudio" :disabled="isPreloaded">预加载音频</ion-button>
      <ion-button @click="playAudio" :disabled="!isPreloaded">播放</ion-button>
      <ion-button @click="pauseAudio" :disabled="!isPreloaded">暂停</ion-button>
      <ion-button @click="stopAudio" :disabled="!isPreloaded">停止</ion-button>
      <p>当前播放状态：{{ playStatus }}</p>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { NativeAudio } from '@capacitor-community/native-audio'
import { IonPage, IonContent, IonButton } from '@ionic/vue'

// 音频唯一ID，可自定义
const AUDIO_ID = 'bg_music_01'
const isPreloaded = ref(false)
const playStatus = ref('未加载')

// 预加载音频
const preloadAudio = async () => {
  try {
    // 本地音频路径示例：将test.mp3放在项目public/audio目录下即可
    await NativeAudio.preload({
      assetPath: 'audio/test.mp3',
      audioId: AUDIO_ID,
      volume: 0.8,
      // 设为true则循环播放
      isLooping: false
    })
    isPreloaded.value = true
    playStatus.value = '已加载'
  } catch (e) {
    console.error('音频预加载失败：', e)
  }
}

// 播放音频
const playAudio = async () => {
  try {
    await NativeAudio.play({ audioId: AUDIO_ID })
    playStatus.value = '播放中'
  } catch (e) {
    console.error('播放失败：', e)
  }
}

// 暂停音频
const pauseAudio = async () => {
  try {
    await NativeAudio.pause({ audioId: AUDIO_ID })
    playStatus.value = '已暂停'
  } catch (e) {
    console.error('暂停失败：', e)
  }
}

// 停止音频
const stopAudio = async () => {
  try {
    await NativeAudio.stop({ audioId: AUDIO_ID })
    playStatus.value = '已停止'
  } catch (e) {
    console.error('停止失败：', e)
  }
}

// 页面卸载时释放音频资源
onUnmounted(async () => {
  if (isPreloaded.value) {
    await NativeAudio.unload({ audioId: AUDIO_ID })
  }
})
</script>

3. 注意事项 #

• 本地音频资源需要放在项目public目录下，上述示例中audio/test.mp3对应的实际路径为public/audio/test.mp3，执行npx cap sync后资源会自动同步到原生端对应目录。
• 若需要实现后台播放功能，需要额外配置原生端权限：iOS端需在Info.plist中添加后台音频模式声明，Android端需在AndroidManifest.xml中添加音频播放相关权限。
• 短音效建议复用预加载后的实例，长音频在不需要使用时及时调用unload释放资源，避免出现内存泄漏问题。

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