当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 8:12:21

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

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

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

1.1 创建音频播放器模块

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

// 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 上：

// 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，添加回调函数就好啦。

 // 音频播放器状态
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 事件添加回调函数，可以更灵活地处理音频播放结束后的逻辑。