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

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

news 来源：原创 2025/5/10 7:53:02

一、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("播放结束");
});