🎀 🌸

给你的网站增加一款简洁而功能强大的音乐播放器

有问题请联系小渡qq2092115940

给你的网站增加一款简洁而功能强大的音乐播放器

H5播放器介绍

APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器
MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件

 

安装教程

安装很简单,一共需要调用三个文件:APlayer.min.js APlayer.min.css Meting.min.js
你可以使用 CDN 调用,只需要在 <head> 里面插入:

<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>

在 footer 里面插入:

<script src="https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js"></script>

使用方法

先看一个最简单的例子:

<div id="aplayer"></div>
<script type="text/javascript">
	const ap = new APlayer({
		container: document.getElementById('aplayer'),
		audio: [{
			name: '你从未离去',
			artist: '白挺',
			url: 'https://doge.ottoli.cn/你从未离去.mp3',
			cover: 'https://doge.ottoli.cn/你从未离去.jpg'
		}]
	});
</script>

在js 代码中:
参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer
参数 audio 中有 4 个子参数,定义关于音频的相关参数:

  • 参数 name 定义音频名称
  • 参数 artist 定义艺术家名
  • 参数 url 指向音频文件的地址
  • 参数 cover 指向音频封面的地址

然后,在需要使用播放器的地方,将容器 <div> 的 id 设置为参数 container 中设定的值即可

MetingJS 的用法

前面已经看到,APlayer 原生用法设置参数十分繁琐,而且只能调用音频文件直链,增加服务器开销。而使用 MetingJS 就很好地解决了这个问题
先看一个最简单的例子:

对应的代码为:

<meting-js
	server="netease"
	type="song"
	id="31365604"
>
</meting-js>

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

server 指定调用的 API ,可选 neteasetencentkugouxiamibaidu ,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
type 指定调用类型,可选 songplaylistalbumsearchartist ,分别对应单曲、歌单、专辑、搜索结果、艺术家
id 指定调用的 id ,一般可以在地址栏中找到
当 type 选择的是个播放列表时,生成的播放器是这样的:

 

播放列表默认是打开的,你可以使用参数 listFolded="true" 使其默认折叠
当你设定 fixed="true" ,会生成一个吸附在页面左下角的播放器,就像我的博客左下角那个
当你设定 mini="true" ,会生成一个 mini 播放器:

值得注意的是:除了 mini 模式,MetingJS 生成的播放器默认是带有歌词的(而且关不掉)

全部参数说明请查阅 MetingJS 官方文档(其实除了三个必要参数其余都和 APlayer 原生参数一样)

温馨提示:本文最后更新于2025-01-18 19:56:58,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长
版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
THE END
喜欢就支持一下吧
分享