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

APlayer - APlayer 初识（APlayer 初识案例、APlayer 常用事件）

article 2026/4/21 10:57:19

一、APlayer

APlayer 是一款轻量级、功能丰富的 HTML5 音频播放器

二、APlayer 初识案例

1、案例演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>APlayer Test</title><link rel="stylesheet" href="css/APlayer.min.css" /><style>#aplayer {width: 300px;}</style>    </head><body><div id="aplayer"></div><script src="js/APlayer.min.js"></script><script>const ap = new APlayer({container: document.getElementById("aplayer"),audio: [{name: "test music",artist: "test music artist",url: "audio/test.mp3",cover: "img/test.jpg",},],});</script></body>
</html>

2、案例解读

（1）资源引入

引入 APlayer 的 CSS 与 JS 资源

<link rel="stylesheet" href="css/APlayer.min.css" />

<script src="js/APlayer.min.js"></script>

（2）播放器容器准备

<div id="aplayer"></div>

#aplayer {width: 300px;
}

（3）播放器挂载

参数	说明
container	指定播放器挂载的 DOM 元素
audio	音频列表，每个对象需包含 url、name、artist 等参数

audio 列表对象参数如下

参数	说明
name	歌曲名称
artist	艺术家
url	音频文件路径
cover	封面图片路径

const ap = new APlayer({container: document.getElementById("aplayer"),audio: [{name: "test music",artist: "test music artist",url: "audio/test.mp3",cover: "img/test.jpg",},],
});

三、APlayer 常用事件

1、基本介绍

事件	说明
play	音频开始播放时触发
pause	音频播放暂停时触发
volumechange	音频音量改变时触发
ended	音频播放结束时触发
timeupdate	音频播放进度更新时触发（频繁触发）

2、演示

ap.on("play", () => {console.log("开始播放");
});ap.on("pause", () => {console.log("播放暂停");
})ap.on("volumechange", () => {console.log("音量改变");
})ap.on("ended", () => {console.log("播放结束");
});

APlayer - APlayer 初识（APlayer 初识案例、APlayer 常用事件）

一、APlayer APlayer 是一款轻量级、功能丰富的 HTML5 音频播放器二、APlayer 初识案例 1、案例演示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthde…...

编程日记 2026/4/10 6:50:19

c++中什么时候应该使用final关键字？

在C中，final关键字是自C11标准引入的重要特性，主要用于类继承和虚函数重写机制的约束。下面从技术原理、使用场景和最佳实践三个维度进行系统分析，并给出工业级代码示例。目录一、技术原理深度解析二、关键使用场景分析 1. 类级别的fi…...

编程日记 2026/4/15 21:22:56

2025年2月15日（虚拟环境-deepseek）

好的，用户之前已经询问过如何在树莓派上安装venv，现在他们的问题是“如何使用”。我需要回顾之前的对话，看看之前是否已经涵盖了使用的部分，或者用户需要更详细的使用步骤。首先，查看之前的回答，发现用户…...

编程日记 2026/4/15 3:16:23

PyTorch Lightning LightningDataModule 介绍

LightningDataModule 是 PyTorch Lightning 提供的数据模块，用于统一管理数据加载流程（包括数据准备、预处理、拆分、批量加载等）。它的核心作用是将数据处理逻辑与模型解耦，提高代码的可复用性和可读性。 1. LightningDataModule 的作用 ✅ 封装数据预处理：数据下载、清…...

编程日记 2026/4/9 5:56:28

Windows环境下使用Ollama搭建本地AI大模型教程

注：Ollama仅支持Windows10及以上版本。安装Ollama 去 ollama官网下载对应平台及OS的安装包。运行安装包，点击“安装”按钮即可开始安装。Ollama会自动安装到你的 C:\Users\<当前用户名>\AppData\Local\Programs\Ollama 目录上。安装完成后&…...

编程日记 2026/4/20 12:50:55

2024年认证杯SPSSPRO杯数学建模A题(第二阶段)保暖纤维的保暖能力全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 A题保暖纤维的保暖能力原题再现： 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花、羽绒到近年来各种各样的人造纤维。不…...

编程日记 2026/4/9 19:00:04

算法19（力扣244）反转字符串

1、问题编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 2、示例 （1） 示例 1&a…...

编程日记 2026/4/9 12:23:12

DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2026/4/20 2:40:21

ESP32 arduino + DeepSeek API访问

此项目主要使用ESP32-S3实现一个AI语音聊天助手，可以通过该项目熟悉ESP32-S3 arduino的开发，百度语音识别，语音合成API调用，百度文心一言大模型API的调用方法，音频的录制及播放，SD卡的读写，Wifi…...

编程日记 2026/4/8 5:10:33

SQLMesh 系列教程4- 详解模型特点及模型类型

SQLMesh 作为一款强大的数据建模工具，以其灵活的模型设计和高效的增量处理能力脱颖而出。本文将详细介绍 SQLMesh 模型的特点和类型，帮助读者快速了解其强大功能。我们将深入探讨不同模型类型（如增量模型、全量模型、SCD Type 2 等&#xff0…...

编程日记 2026/4/11 20:27:14

三维重建（十二）——3D先验的使用

文章目录零、最近感受和前言一、使用能够快速得到重建初始化的方法1.1 Colmap（多视角）1.2 深度估计（单视角）二、已知形状模板2.1 人脸2.2 人体2.3 动物三、刚性与非刚性约束（变形约束）3.1 刚性变形3.2 非刚性变形四、统计（深度学习）先验——从大量（3D）数据中提取信息…...

编程日记 2026/3/17 23:22:55

渗透利器：YAKIT 工具-基础实战教程.

YAKIT 工具-基础实战教程. YAKIT（Yak Integrated Toolkit）是一款基于Yak语言开发的集成化网络安全单兵工具，旨在覆盖渗透测试全流程，提供从信息收集、漏洞扫描到攻击实施的自动化支持。其核心目标是通过GUI界面降低Yak语言的使用…...

编程日记 2026/4/17 19:40:00

Kotlin 2.1.0 入门教程（二十一）数据类

数据类数据类主要用于存储数据。对于每个数据类，编译器会自动生成一些额外的成员函数，这些函数支持将实例打印为易读的输出、比较实例、复制实例等操作。数据类使用 data 关键字标记： data class User(val name: String, val age: Int…...

编程日记 2026/4/18 10:46:07

Python学习心得数据的验证

数据的验证是指程序对用户输入的数据进行”合法“性验证一、数据的验证的一些方法： 方法名描述说明 str.isdigit() 所有字符都是数字(阿拉伯数字) str.isnumeric() 所有字符都是数字 str.isalpha() 所有字符都是字母(包含中文字符) str.isalnum() 所有…...

编程日记 2026/2/17 2:00:15

PyQt6/PySide6 的信号与槽原理

一、核心原理剖析 1.1 观察者模式的GUI实现信号与槽机制基于观察者模式实现解耦通信，相比传统GUI回调机制具备： 类型安全：信号参数与槽参数自动匹配松耦合：发送者无需知道接收者存在多对多连接：一个信号可绑定多个…...

编程日记 2026/4/11 16:40:19

jenkins 配置ssh拉取gitlab

一、生成key ssh-keygen -t rsa -b 4096 -C "root" 二、将id_rsa内容拷贝到jenkins 公钥id_rsa.pub拷贝到gitlab...

编程日记 2026/4/8 14:14:51

基于css实现正六边形的三种方案

方案一：通过旋转三个长方形生成正六边形分析： 如下图所示，我们可以通过旋转三个长方形来得到一个正六边形。疑问： 1. 长方形的宽高分别是多少？ 设正六边形的边长是100，基于一些数学常识，可以…...

编程日记 2026/4/20 2:17:40

18.Python实战：实现年会抽奖系统

目录结构 python/ ├── sql/ │ └── table.sql # 创建数据库及数据表 ├── config/ │ └── __init__.py # 数据库和Flask配置 ├── static/ │ ├── style.css # 样式文件 │ └── script.js # JavaScript脚本…...

编程日记 2026/4/15 18:06:10

145，【5】 buuctf web [GWCTF 2019]mypassword

进入靶场修改了url后才到了注册页面注测后再登录查看源码都点进去看看有个反馈页面再查看源码又有收获 // 检查$feedback是否为数组 if (is_array($feedback)) {// 如果是数组，弹出提示框提示反馈不合法echo "<script>alert(反馈不合法);<…...

编程日记 2026/4/10 11:13:09

19.4.9 数据库方式操作Excel

编程日记 2026/4/19 6:35:26

什么是AI Agent的身份安全问题

什么是AI Agent的身份安全问题 AI发展背景与趋势 DeepSeek大模型R1成果引发关注，同时AI Agent元年到来，其应用将呈指数级上升，但也带来安全问题，如身份冒用风险。OpenAI创始人强调人工智能规模定律持续有效，AI Agent发展引发广泛关注，不过AI教母李飞飞指出其应定位为工…...

编程日记 2025/10/23 10:35:04

3.2 企业级AI Agent数据科学实战：从数据清洗到模型服务的全链路工业级方案

企业级AI Agent数据科学实战：从数据清洗到模型服务的全链路工业级方案引言：数据科学家的Agent开发革命 IDC报告显示，优秀的数据处理流程可使大模型效果提升37%，模型推理成本降低58%。本文将揭示企业级Agent开发中数据科学家的核心方法论，通过GitHub Sentinel等案例，展…...

编程日记 2025/11/29 3:27:16

CAS单点登录（第7版）7.授权

如有疑问，请看视频：CAS单点登录（第7版） 授权概述授权和访问管理可以使用以下策略实施授权策略以保护 CAS 中的应用程序和依赖方。服务访问策略服务访问策略允许您定义授权和访问策略，以控制对向 CAS 注册的…...

编程日记 2026/4/10 14:08:05

C语言中的对象、左值、右值、序列点、副作用的概念

对象赋值表达式的目的就是把数据存储到内存位置上，用于存储值的数据区域统称数据对象左值左值是C语言中的术语，用于标识特定数据对象的名字。因此，对象指的是实际的数据存储，而左值是用于标识或定位存储位置的标签。右值 …...

编程日记 2025/10/30 1:41:45

java集合框架之Map系列

前言首先从最常用的HashMap开始。HashMap是基于哈希表实现的，使用数组和链表（或红黑树）的结构。在Java 8之后，当链表长度超过阈值时会转换为红黑树，以提高查询效率。哈希冲突通过链地址法解决。需要明确的是&#xff…...

编程日记 2026/4/12 7:59:07

【MediaTek】 T750 openwrt-23.05编 cannot find dependency libexpat for libmesode

MediaTek T750 T750 采用先进的 7nm 制程，高度集成 5G 调制解调器和四核 Arm CPU，提供较强的功能和配置，设备制造商得以打造精巧的高性能 CPE 产品，如固定无线接入（FWA）路由器和移动热点。 MediaTek T750 平台是一款综合的芯片组，集成了 5G SoC MT6890、12nm 制程…...

编程日记 2026/4/21 9:03:02

EasyX学习笔记1：线条

目录一、线条颜色1. setlinecolor - 设置当前线条颜色2. getlinecolor - 获取当前线条颜色二、线条样式1. setlinestyle - 设置线条样式（宽度、类型等） 三、绘制线条1. line - 绘制两点间直线2. lineto - 从当前位置画线到指定点3. linerel - 相对当前…...

编程日记 2025/11/30 7:50:06

HTML、Vue和PHP文件的区别与联系

一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据…...

编程日记 2026/3/24 1:15:44

C#windows窗体人脸识别

一、创建一个数据库，名为TestFaceDB 里面有一张表就OK了，表名Users,表里面有几个字段我说明一下： id--------------------bigint----------------------编号 name--------------varchar(50)-----------------用户名 phone--------------v…...

编程日记 2026/4/10 5:33:13