uni-app 中封装全局音频播放器

在开发移动应用时，音频播放功能是一个常见的需求。无论是背景音乐、音效还是语音消息，音频播放都需要一个稳定且易于管理的解决方案。在 uni-app 中，虽然原生提供了 uni.createInnerAudioContext 方法用于音频播放，但直接使用它可能会导致代码冗余和难以维护。且如果在存在同时播放的语音消息，无法控制上一条语音是暂停还是等待。因此，封装一个全局音频播放器是一个更好的选择。

1. 创建全局音频播放器模块

我们可以通过创建一个全局的音频播放器模块来管理音频的播放、暂停、停止等功能。以下是实现步骤：

1.1 创建音频播放器模块

在项目中创建一个名为 audioPlayer.js 的文件，用于封装音频播放器逻辑：

javascript 复制代码

// audioPlayer.js
const audioContext = uni.createInnerAudioContext();

// 音频播放器状态
const state = {
  isPlaying: false,
  currentUrl: null,
};

// 播放音频
function play(url) {
  if (state.isPlaying && state.currentUrl === url) {
    // 如果已经在播放同一个音频，直接返回
    return;
  }

  state.currentUrl = url;
  state.isPlaying = true;

  audioContext.src = url;
  audioContext.play();

  // 监听音频播放结束
  audioContext.onEnded(() => {
    state.isPlaying = false;
  });

  // 监听音频错误
  audioContext.onError((error) => {
    console.error("音频播放错误：", error);
    state.isPlaying = false;
  });
}

// 暂停音频
function pause() {
  if (!state.isPlaying) {
    return;
  }

  audioContext.pause();
  state.isPlaying = false;
}

// 停止音频
function stop() {
  if (!state.isPlaying) {
    return;
  }

  audioContext.stop();
  state.isPlaying = false;
}

// 获取当前播放状态
function getStatus() {
  return {
    isPlaying: state.isPlaying,
    currentUrl: state.currentUrl,
  };
}

// 暴露方法
export default {
  play,
  pause,
  stop,
  getStatus,
};

1.2 在全局挂载音频播放器

为了方便在各个页面中使用音频播放器，我们可以在 main.js 中将其挂载到全局对象 Vue.prototype 上：

javascript 复制代码

// main.js
import Vue from "vue";
import App from "./App";
import audioPlayer from "./audioPlayer";

Vue.config.productionTip = false;

// 挂载全局音频播放器
Vue.prototype.$audioPlayer = audioPlayer;

App.mpType = "app";

const app = new Vue({
  ...App,
});

app.$mount();

2. 使用全局音频播放器

在任何页面或组件中，都可以通过 this.$audioPlayer 调用音频播放器的方法。

到此就可以完成音频的创建与调用。

3. 问题

那么问题来了，全局的audioPlay，该如何监听播放结束并且加入特定的业务处理呢？

只需要修改onEnded，添加回调函数就好啦。

javascript 复制代码

 // 音频播放器状态
const state = {
  isPlaying: false,
  currentUrl: null,
  onEndedCallback: null, // 添加回调函数属性
};


onEnded(callback) {
    state.isPlaying = false;

    // 添加回调函数逻辑 
    if (state.onEndedCallback) {
      state.onEndedCallback(); // 调用回调函数
    }
  },


//播放时 添加回调
  this.$audioPlayer.play(
        "https://example.com/audio.mp3",
        this.onAudioEnded // 传入回调函数
      );

 onAudioEnded() {
      console.log("音频播放结束！");
      // 在这里执行音频播放结束后的逻辑
      // 例如：自动播放下一首歌曲
    },

通过为音频播放器的 ended 事件添加回调函数，可以更灵活地处理音频播放结束后的逻辑。