在uni-app vue3 setup语法糖中使用 uni.createInnerAudioContext() 并封装成组件 保证其他页面都可使用

要在 uni-app Vue3 的 setup 语法糖中使用 `uni.createInnerAudioContext()`，并封装成一个可在其他页面中使用的组件，可以按照以下步骤进行操作：

1. 首先，在你的项目中创建一个新的文件夹，用来存放组件相关的文件。例如，可以创建一个名为 `AudioPlayer` 的文件夹。

2. 在 `AudioPlayer` 文件夹中创建一个名为 `index.vue` 的文件，作为组件的主文件。

3. 在 `index.vue` 中定义组件的模板和样式，并在 `script` 部分使用 `setup` 语法糖来编写组件的逻辑。

<template>
  <div>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="stop">停止</button>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const audio = uni.createInnerAudioContext()
    
    const play = () => {
      audio.src = 'path/to/audio.mp3'
      audio.play()
    }
    
    const pause = () => {
      audio.pause()
    }
    
    const stop = () => {
      audio.stop()
    }

    onMounted(() => {
      // 在组件挂载后执行一些初始化操作
    })

    onUnmounted(() => {
      // 在组件卸载前执行一些清理操作
      audio.destroy() // 销毁音频实例
    })

    return {
      play,
      pause,
      stop
    }
  }
}
</script>

<style scoped>
/* 组件的样式 */
</style>

4. 在需要使用该音频播放组件的页面中，引入并使用 `AudioPlayer` 组件。

<template>
  <div>
    <audio-player></audio-player>
  </div>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer'

export default {
  components: {
    AudioPlayer
  }
}
</script>

<style scoped>
/* 页面的样式 */
</style>

现在，你就成功地将 `uni.createInnerAudioContext()` 封装成了一个可在其他页面中使用的组件。在页面中使用 `<audio-player></audio-player>` 标签就可以调用音频播放功能了。记得根据你的项目需求进行相应的配置和修改。