aplayer.js是一款html5音乐播放器插件-BFW插件库

aplayer.js是一款html5音乐播放器插件

aplayer.js是一款html5音乐播放器插件。

支持媒体格式-MP4 H.264（AAC或MP3）-wave PCM-Ogg Theora Vorbis

主要功能

支持播放列表

支持歌词同步显示

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

名称	默认值	描述
container	document.querySelector('.aplayer')	播放器容器元素
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	'#b7daff'	主题色
loop	'all'	音频循环播放, 可选值: 'all', 'one', 'none'
order	'list'	音频循环顺序, 可选值: 'list', 'random'
preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	'auto'	可选值: 'auto', 'hls', 'normal' 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	'aplayer-setting'	存储播放器设置的 localStorage key

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["APlayer.min", "APlayer.min"], function() {
                const ap = new APlayer({
                    container: document.getElementById('aplayer'),
                    audio: [{
                        name: 'name',
                        artist: 'artist',
                        url: 'http://repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3',
                        cover: 'http://repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'
                    }]
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div id="aplayer"></div>
</body>
</html>

官网 https://aplayer.js.org/

中文文档 https://aplayer.js.org/#/zh-Hans/