uniapp 微信小程序如何播放mp3文件

在uniapp开发微信小程序时，如何实现播放本地或网络上的mp3文件？试过使用uni.createInnerAudioContext()，但有时候加载网络音频会失败，有没有更稳定的方法？还需要考虑音频自动播放的限制和兼容性问题，求具体实现方案和注意事项。

2 回复

在uniapp中播放mp3，可以使用uni.createInnerAudioContext()创建音频上下文，然后设置src为mp3文件路径并调用play()方法。注意：微信小程序要求音频文件域名需在后台配置。


在 UniApp 中播放 MP3 文件（适用于微信小程序），可以使用内置的音频 API。以下是实现步骤和示例代码：

步骤：

  1. 创建音频上下文：使用 uni.createInnerAudioContext() 创建音频实例。
  2. 设置音频源：通过 src 属性指定 MP3 文件的路径（支持本地路径或网络 URL）。
  3. 控制播放：调用 play()、pause()、stop() 等方法。
  4. 监听事件：如播放完成、错误等，以处理交互逻辑。

示例代码：

// 创建音频实例
const audio = uni.createInnerAudioContext();

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

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

// 可选：监听事件
audio.onPlay(() => {
  console.log('开始播放');
});
audio.onEnded(() => {
  console.log('播放结束');
});
audio.onError((err) => {
  console.log('播放错误:', err);
});

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

// 停止播放（重置进度）
// audio.stop();

注意事项：

  • 网络音频：需在微信小程序后台配置 request 合法域名。
  • 本地音频：文件需放在项目 static 目录，路径如 /static/audio.mp3。
  • 音频格式：微信小程序支持 MP3、AAC 等常见格式。
  • 自动播放限制：需由用户交互（如点击按钮）触发播放，否则可能被系统阻止。

完整示例（结合按钮控制）：

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

<script>
export default {
  data() {
    return {
      audio: null
    };
  },
  mounted() {
    this.audio = uni.createInnerAudioContext();
    this.audio.src = 'https://example.com/audio.mp3';
  },
  methods: {
    playAudio() {
      this.audio.play();
    },
    pauseAudio() {
      this.audio.pause();
    }
  },
  beforeDestroy() {
    // 销毁音频实例避免内存泄漏
    this.audio.destroy();
  }
};
</script>

通过以上代码，即可在 UniApp 微信小程序中实现 MP3 播放功能。

回到顶部