uniapp app 如何调用 createaudioplayer 实现音频播放

在uniapp开发APP时，如何正确调用createAudioPlayer接口实现音频播放功能？尝试按照官方文档创建实例后，调用play()方法没有反应，也没有报错信息。需要确认以下细节：1) 是否需要特殊权限配置；2) 音频路径是否支持网络URL或必须本地路径；3) 是否有完整的代码示例展示创建、播放、暂停的全流程？目前测试发现onPlay事件未触发，求排查思路。

2 回复

在uniapp中，使用uni.createInnerAudioContext()创建音频播放器：

const audio = uni.createInnerAudioContext();
audio.src = '音频地址';
audio.play();

记得处理播放错误和自动播放限制。


在 UniApp 中，可以使用 uni.createInnerAudioContext() 创建音频播放器（注意不是 createaudioplayer，这是原生开发中的 API）。以下是实现步骤和示例代码：

步骤：

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

示例代码：

// 创建音频上下文
const audioPlayer = uni.createInnerAudioContext();

// 设置音频源（示例为网络URL，本地路径需放在static目录下）
audioPlayer.src = 'https://example.com/audio.mp3';

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

// 暂停播放
// audioPlayer.pause();

// 停止播放
// audioPlayer.stop();

// 监听播放完成事件
audioPlayer.onEnded(() => {
  console.log('音频播放完成');
});

// 监听播放错误事件
audioPlayer.onError((err) => {
  console.log('播放错误:', err);
});

// 销毁音频实例（在页面卸载时调用）
// audioPlayer.destroy();

注意事项：

  • 音频格式：确保音频格式兼容（如 MP3、AAC）。
  • 作用域管理：在页面或组件销毁时调用 destroy() 释放资源。
  • 网络权限：使用网络音频时，需在 manifest.json 中配置网络请求权限。

完整示例（Vue 页面）：

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

<script>
export default {
  data() {
    return {
      audioPlayer: null
    };
  },
  mounted() {
    this.audioPlayer = uni.createInnerAudioContext();
    this.audioPlayer.src = 'https://example.com/audio.mp3';
  },
  methods: {
    playAudio() {
      this.audioPlayer.play();
    },
    pauseAudio() {
      this.audioPlayer.pause();
    }
  },
  beforeDestroy() {
    this.audioPlayer.destroy();
  }
};
</script>

通过以上代码即可在 UniApp 中实现音频播放功能。

回到顶部