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

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

news 来源：原创 2025/5/21 6:48: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 事件添加回调函数，可以更灵活地处理音频播放结束后的逻辑。

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

在开发移动应用时，音频播放功能是一个常见的需求。无论是背景音乐、音效还是语音消息，音频播放都需要一个稳定且易于管理的解决方案。在 uni-app 中，虽然原生提供了 uni.createInnerAudioContext 方法用于音频播放，但直接使用它可…...

编程日记 2025/5/21 6:48:21

Uniapp：设置TabBar

目录一、setTabBarBadge：增加文本二、removeTabBarBadge：移除文本三、showTabBarRedDot：显示红点四、hideTabBarRedDot：隐藏红点一、setTabBarBadge：增加文本为 tabBar 某一项的右上角添加文本。 uni.setTabBarBadge({index: 0,text: 1 })参数类型必填说明indexNumber…...

编程日记 2025/4/30 6:39:10

如何查看k8s获取系统是否清理过docker镜像

k8s集群某个节点down掉后，pod就会漂移到其他节点，但是在该节点却又执行了拉取镜像操作，明明该节点之前部署过该容器的，不知为什么又拉取了一次镜像（镜像拉取配置的优先使用本地），所以怀疑是触发…...

编程日记 2025/5/17 2:24:41

【Linux网络】深入解析I/O多路转接 - Select

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/4/30 6:38:07

如何解决 Xcode 签名证书和 Provisioning Profile 过期问题

在 iOS 应用开发过程中，签名证书和 Provisioning Profile 是确保应用安全性和合法性的关键组件。然而，当这些证书或配置文件过期时，开发者可能会遇到编译或归档失败的问题。本文将详细介绍如何解决 Xcode 中“iOS Distribution”证书未找到和…...

编程日记 2025/4/30 6:38:06

[C++]C++20协程的原理

文章目录协程的状态机Promise 对象挂起和恢复机制协程的执行流程示例代码分析 C 协程是 C20 引入的一项重要特性，它提供了一种更简洁、高效的异步编程方式。下面从协程的状态机、Promise 对象、挂起和恢复机制等方面介绍其底层实现原理。协程的状态机从底层角度…...

编程日记 2025/5/7 1:57:09

Oracle OCP证书有效期是三年？

这一段时间，网上经常传出消息Oracle OCM认证证书有效期为三年，其实这个假消息，通过博睿谷与Oracle官方人员确认，OCP认证证书有效期是永久的。 OCP证书本身永久有效，但老版本的OCP证书代表着更多的项目经验&#xff0c…...

编程日记 2025/5/21 5:48:25

2025.4.29_STM32_看门狗WDG

1.WDG简介大概意思就是给看门狗设置一个时间范围，在这个范围内必须喂狗(重置定时器)，这个操作必须一直执行，比如看门狗的的时间范围是1-2秒，我们就必须间隔1-2秒就喂一次狗，否则它自减到0时就会重置电路，相…...

编程日记 2025/5/21 6:34:32

基于Java，SpringBoot，HTML水文水质监测预警系统设计

摘要随着水资源管理需求的日益增长，构建高效、精准的水文监测预警系统至关重要。本文设计并实现了一套基于 Java、SpringBoot 和 HTML 技术的水文监测预警系统。系统采用 Java 语言与 SpringBoot 框架搭建后端服务，利用其强大的业务逻辑处理能力与高效…...

编程日记 2025/5/21 4:38:54

Qt开发：JSON字符串的序列化和反序列化

文章目录一、构建和解析单个JSON对象二、JSON对象中嵌套多个JSON对象三、JSON对象中组建多个数组对象四、构建和解析数组对象一、构建和解析单个JSON对象 1.1 JSON对象的构建使用key-value形式生成JSON对象 #include <QJsonObject> #include <QJsonDocument> …...

编程日记 2025/4/30 6:37:01

第10次：电商项目配置开发环境

本次内容主要为给整个电商项目配置好开发环境，包括如下环节： 创建电商项目xiaoyu_mall，Django版本默认是最新的大版本5.2配置应用目录，因项目会涉及到多个应用，为保证项目结构清晰，将在项目下建立apps目录…...

编程日记 2025/4/30 6:37:01

【强化学习系列】Q-learning——从贝尔曼最优方程谈起

引言上一篇贝尔曼最优方程中我们已经推导出动作价值形式的贝尔曼最优方程： q π ∗ ( s , a ) ∑ s ′ ∈ S ∑ r ∈ R p ( s ′ , r ∣ s , a ) [ r γ max ⁡ a ′ q π ∗ ( s ′ , a ′ ) ] \begin{equation}q_{\pi^*}(s,a)\sum_{s\in S}\sum_{r\in R}p(s,…...

编程日记 2025/5/19 10:35:05

Java 基础--运算符全解析

【Java 基础】Java 运算符全解析：程序世界的“加减乘除”与“是非对错” 作者：IvanCodes 发布时间：2025年4月29日🐣 专栏：Java教程嗨，各位 Java 探险家们！👋 掌握了变量、数据类…...

编程日记 2025/5/6 14:42:34

【神经网络与深度学习】改变随机种子可以提升模型性能？

引言随机种子在机器学习和数据处理领域中至关重要，它决定了模型训练、数据划分以及参数初始化的随机性。虽然固定随机种子能确保实验的可重复性，但改变随机种子有时会意外提升模型性能。本文将探讨这一现象的潜在原因，并揭示随机性如何影响…...

编程日记 2025/4/30 6:35:57

一页概览：统一数据保护方案

2010年左右手绘，用的是公司的信纸，签字笔，马克笔。方案为统一数据保护。其实解释备份软件加备份硬件（支持重复数据删除）的联合解决方案。...

编程日记 2025/5/18 9:50:51

Python中的itertools模块常见函数用法示例

itertools ，迭代工具模块，提供了用于高效处理迭代器和组合问题的工具。 1. itertools.permutations(iterable, rNone) 功能：生成输入迭代器的所有可能排列。参数： iterable：输入的可迭代对象。r：可选参数…...

编程日记 2025/4/30 6:35:55

微服务学习笔记

1 微服务微服务：基于业务领域建模的、可独立发布的服务，把业务内聚的功能封装起来，并通过网络供其他服务访问。好处： 技术异构性，不同服务可以使用不同的技术弹性，可以更好的处理服务不可用的问题扩展…...

编程日记 2025/4/30 6:34:54

实验七：基于89C51和DS18B20的温度采集与显示

一、实验目的学习使用DS18B20数字温度传感器采集温度数据。使用4位共阳极数码管显示温度数据，显示精度到小数点后两位。熟悉89C51单片机的I/O口操作和位选控制。二、实验器材 89C51单片机开发板DS18B20数字温度传感器4位共阳极数码管三极管8550（用于位选驱动）电阻、电容等辅…...

编程日记 2025/5/7 5:14:30

cmake:基础

本文主要探讨cmake语法相关知识。 cmake(GUI)安装 apt install cmake-curses-gui cmake -y cmake语法 cmake_minimum_required(VERSION 版本号) 设置cmake最低版本 project(工程名) <> PROGECT_NAME/CMAKE_PROJECT_NAME 设置工程名字 add_library(库名 SHARED/STAT…...

编程日记 2025/4/30 6:34:52

1.8 点云数据获取方式——小结

点云，作为三维空间信息的直观载体，在各行各业都得到了广泛应用。而能够获得三维点云数据手段，也是极为丰富。本章节主要介绍了主动式手段（包括激光雷达、ToF相机、结构光相机）和被动式手段（双目立体相机、单…...

编程日记 2025/4/30 6:34:51

超越单体：进入微服务世界与Spring Cloud概述

大家好！欢迎来到我的新系列文章——《微服务架构：Spring Cloud实战指南》。在之前的《Java服务端核心技术》系列中，我们一起深入学习了如何使用Spring Boot构建功能强大、安全可靠的单体应用程序。我们掌握了Spring的核心原理、Web开发、数据…...

编程日记 2025/4/30 6:34:51

深度学习篇---模型权重变化与维度分析

文章目录前言1. 权重的作用2. 权重的维度全连接层卷积层3. 权重的变化4.实例代码（PyTorch 框架）场景代码解释模型定义数据生成优化设置初始权重设置训练循环前向传播反向传播更新权重结果输出维度与变化总结维度匹配梯度跟新5. 增加网络深度：多层感知机（MLP）代码解释6. 权…...

编程日记 2025/4/30 6:33:49

AtCoder Beginner Contest 403(题解ABCDEF)

A - Odd Position Sum #1.奇数数位和 #include<iostream> #include<vector> #include<stdio.h> #include<map> #include<string> #include<algorithm> #include<queue> #include<cstring> #include<stack> #include&l…...

编程日记 2025/5/19 15:04:37

计算机视觉与深度学习｜双目立体匹配算法理论+Opencv实践+matlab实践

双目立体匹配一、双目立体匹配算法理论与OpenCV、matlab实践一、双目立体匹配理论二、OpenCV实践三、优化建议四、算法对比与适用场景二、双目立体匹配算法理论及Matlab实践指南一、双目立体匹配理论二、Matlab实践步骤三、算法对比与优化建议四、完整流程示例五、常见问题与解…...

编程日记 2025/5/5 22:32:39

深挖Java基础之：认识Java（创立空间/先导：Java认识）

今天我要介绍的是在Java中对Java的一些基本语法的认识与他们的运用，以及拟举例子说明和运用场景，优势和劣势， 注：本篇文章是对Java的一些基本的，简单的代码块的一些内容，后续会讲解在Java中的变量类型&…...

编程日记 2025/4/30 6:33:46

springmvc从请求到响应的流程分析

一、创建springmvc项目通过网盘分享的文件：hello-springmvc.zip 链接: https://pan.baidu.com/s/1VmUHurgph661ND9LWqKhaw 提取码: b36a 二、从请求到响应流程我们先画一下流程图，如下图所示。三、源码解析 3.1 HttpServlet接收请求用户发送htt…...

编程日记 2025/4/30 6:32:45

RabbitMQ 启动报错 “crypto.app“ 的解决方法

RabbitMQ 启动报错 “crypto.app” 的解决方法在使用 RabbitMQ 时，有时会遇到启动报错的问题，其中一种常见的报错是： {"init terminating in do_boot",{error,{crypto,{"no such file or directory","crypto.app…...

编程日记 2025/5/1 9:03:22

idm 禁止自动更新提示（修改注册表）

目前版本：v 6.42 Bulid 35 运行-regedit- 计算机\HKEY_CURRENT_USER\SOFTWARE\DownloadManager 计算机\HKEY_CURRENT_USER\SOFTWARE\DownloadManagerLstCheck -> 0 重启...

编程日记 2025/4/30 6:32:44

LeetCode - 02.02.返回倒数第 k 个节点

目录题目解法一双指针算法原理详细过程为什么它有效？ 时间复杂度与空间复杂度代码解法二递归算法核心思想执行流程详解具体例子代码题目面试题 02.02. 返回倒数第 k 个节点 - 力扣（LeetCode） 解法一双指针算…...

编程日记 2025/5/18 2:52:59

＜c++＞使用detectMultiScale的时候出现opencv.dll冲突

最近在试着弄一下opencv，看网上很多人都是的用的python，但是python跑起来没有c快，生成的qt工程也大一些，想着试试c看能不能生成opencv。然后就用到这个函数，detectMultiScale。出现一个问题，就是我的程序在…...

编程日记 2025/4/30 6:32:43

从实列中学习linux shell脚本2: shell 的变量方法命名和使用规则之类比如拿：获取cpu 负载，以及负载超过2.0 以后就发生邮件为例子

以下是对 Linux Shell 中变量、方法（函数）、命名规则的详细说明，并结合获取CPU负载并在负载超过2.0时发送邮件的示例进行演示： 1. Shell 变量命名规则命名格式：变量名由字母、数字、下划线组成，不能以…...

编程日记 2025/4/30 6:32:42

Centos Ubuntu RedOS系统类型下查看系统信息

文章目录一、项目背景二、页面三、说明四、代码1.SysInfo2.EmsSysConfig3.HostInformationController4.HostInfo 一、项目背景公司项目想展示当前部署系统的：操作系统，软件版本、IP、主机名。二、页面三、说明说明点1：查询系统类型及…...

编程日记 2025/4/30 6:31:41

【Hive入门】Hive高级特性：视图与物化视图

在大数据分析中，Hive作为Hadoop生态系统中的重要组件，提供了强大的数据查询和管理能力。除了基本表的操作，Hive还支持视图和物化视图，这两种特性在数据管理和查询优化中扮演着重要角色。本文将深入探讨视图的创建与性能影响&…...

编程日记 2025/5/20 7:52:17

特征工程四-2：使用GridSearchCV 进行超参数网格搜索（Hyperparameter Tuning）的用途

1. GridSearchCV 的作用 GridSearchCV（网格搜索交叉验证）用于： 自动搜索给定参数范围内的最佳超参数组合。交叉验证评估每个参数组合的性能，避免过拟合。返回最佳模型，可直接用于预测或分析。 2. 代码逐行解析 (1…...

编程日记 2025/4/30 6:31:39

【Hive入门】Hive函数：内置函数与UDF开发

Apache Hive作为Hadoop生态系统中的重要组件，为大数据分析提供了强大的SQL-like查询能力。Hive不仅支持丰富的内置函数，还允许用户开发自定义函数（UDF）以满足特定需求。本文将深入探讨Hive的内置函数（包括数学函数、字…...

编程日记 2025/4/30 6:31:39

HTML Picture标签详细教程

HTML Picture标签详细教程简介 <picture>标签是HTML5中引入的一个强大元素，它为开发者提供了更灵活的图像资源管理方式。该标签主要用于让浏览器根据不同条件（如设备屏幕大小、分辨率或支持的图像格式）选择最适合当前显示环境的图像…...

编程日记 2025/4/30 6:31:38

Html1

一，HTML概述网页开发需要学习的知识： html css javaScript 两个框架 VUE.js ElementUI UI user interface 用户界面 HTML xml 可扩展标记语言-->存储数据 Markup Language标签语言都会提供各种标…...

编程日记 2025/4/30 6:31:37

runpod team 怎么设置自己的ssh key呢？

生成 ed25519 公钥密钥 ssh-keygen -t ed25519 -C "yourqq.com"然后在pod容器配置key以及启动方式选择edit pod 添加启动代码启动代码可以参考官方给的内容： https://docs.runpod.io/pods/configuration/use-ssh bash -c apt update;DEBIAN_FRONT…...

编程日记 2025/5/11 22:57:10

Flutter：组件10、倒计时

import dart:async; import package:flutter/material.dart;class CountdownTimer extends StatefulWidget {final int seconds;final double? fontSize;final Color? textColor;final bool showDays;final bool showHours;final bool showMinutes;final bool showSeconds;fi…...

编程日记 2025/5/15 19:11:59

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

1.1 创建音频播放器模块

1.2 在全局挂载音频播放器

2. 使用全局音频播放器

3. 问题

相关文章：