以自己喜欢的方式听音乐 |

牛波一的纯静态音乐播放器

这是一款基于 HTML5 的牛波一纯静态音乐播放器，其设计理念是提供一个简洁、高效且易于集成的音乐播放解决方案。它能够在不需要服务器支持的情况下运行，适用于个人博客、静态网站以及其他需要音乐播放功能的应用场景。

主要特点

纯静态文件：仅由 HTML、CSS 和 JavaScript 文件组成，无需服务器端支持，可以直接在静态网站中使用。

多种播放模式：支持单曲循环、列表循环、随机播放等多种播放模式，用户可以根据需求自由选择。

播放列表管理：支持多个音频文件的播放列表管理，可以方便地添加、删除和切换播放列表。

自定义样式：提供多种自定义选项，用户可以根据需要调整播放器的外观和行为。

兼容性强：兼容现代主流浏览器，包括 Chrome、Firefox、Safari 和 Edge 等。

结论

作为一款纯静态音乐播放器，以其简洁高效、易于集成和自定义的特点，成为众多静态网站和个人博客的理想选择，通过简单的配置和丰富的功能，用户可以轻松地在网页中嵌入一个功能完善的音乐播放器，为用户提供良好的音乐播放体验，通过合理利用它的特性，可以提升网站的用户体验，满足多样化的音乐播放需求。好吧，说了无关紧要的话，实际上这是一个基于Aplayer和MetingJS的静态音乐播放器

闪亮登场

Aplayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器，GitHub地址：github 地址 https://github.com/DIYgod/APlayer
预览地址：https://aplayer.js.org/
中方文档：https://aplayer.js.org/#/zh-Hans/

MetingJS 是为 APlayer 添加网易云、QQ音乐等支持的插件，GitHub地址： https://github.com/metowolf/MetingJS

APlayer & MetingJS 音乐播放器使用指南

1.安装(可以参考官方文档)

引用三个文件APlayer.min.js APlayer.min.css Meting.min.js

1
2
3

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

当然也可以打开这三个链接，将其中内容拉下来放到自己服务器上，这样可以避免那天链接失效

2.APlayer 原生用法

<div id="aplayer01"></div>
<script type="text/javascript">
    const ap = new APlayer({
　　　　  //定义容器
        container: document.getElementById('aplayer01'),
　　　　 //关于音频的相关参数：
        audio: [{
            name: '碧い瞳のエリス',//音频名称
            artist: '安全地帯',//艺术家
            url: 'https://doge.ottoli.cn/安全地帯 - 碧い瞳のエリス.mp3',//文件地址
            cover: 'https://doge.ottoli.cn/aqdd.jpg'//封面地址
        }]
    });
</script>

3.MetingJS 的用法

引入MetingJS
<meting-js server="netease" type="playlist" id="129627424"></meting-js>

一个MetingJS 播放器至少需要三个参数,

id=’外链播放器id’,必须参数,Id
type=[song=单曲, playlist=歌单, album=专辑, search=搜索结果, artist=艺术家],必须参数,调用类型
server=[netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐],必须参数,调用的API

如果只设置了这三个参数的情况下，列表默认展开，且播放器显示占用地方较大,可以在设置以下两个参数

fixed = 启用固定模式，固定在左下角,默认false
mini = 启用迷你模式,默认false

MetingJS参数详情

id=’外链播放器id’,必须参数
type=[song=单曲, playlist=歌单, album=专辑, search=搜索结果, artist=艺术家],必须参数
server=[netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐],必须参数
fixed=启用固定模式，固定在左下角,默认false
mini=启用迷你模式,默认false
preload=[none,metadata,auto]
mutex=[互斥锁，默认true],默认false
order=[random=随机播放,list=列表播放]
loop=[all=全部循环, one=循环一次 ,none=不循环]
volume=[音量，默认0.7]
lrc-type=[歌词类型，默认0]
list-folded=[列表是否折叠，默认false]
list-max-height=列表最大高度,默认340px
storage-name=本地存储存储密钥，用于存储播放器设置,默认metingjs

主角HeoMusic 音乐播放器

一个基于Aplayer和MetingJS的静态音乐播放器，免费开源，看着舒服，github地址 https://github.com/zhheo/HeoMusic

可以本地音乐/外链音乐。如果填写了本地音乐，则优先使用本地音乐，整体效果还是不错的，具体看作者文档说明。

我的音乐

HeoMusic 好用，但我个人比较喜欢有歌单分别，可以切换听不同风格的音乐，下面我的方案。点击预览

oaoomusic1

oaoomusic2

oaoomusic3