前端页面添加音乐插件

2024-04-25 22:13:28

1、Aplayer搭配Metingjs音乐插件的使用

Aplayer和MetingJ的介绍
Aplayer官网文档：https://aplayer.js.org/#/
Metingjs官网文档：https://github.com/metowolf/MetingJS
Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。
简单使用

    <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><meting-jsserver="netease"type="playlist"id="5144722080"fixed="true"autoplay="true"loop="all"order="list"preload="auto"list-folded="true"list-max-height="500px"lrc-type="1"></meting-js>

效果：

字段解析：
中文版选项

英文版选项

注意：server指音乐平台，我的例子中参数填写了netease指用网易云音乐， type类型：用了playlist列表。
当type类型是playlist列表的时候，则id的值必须是歌单的id，不能是单曲的id，否则音乐播放器不会显示出来。因为当你是单曲的id的时候，type类型应该是song。

2、获取外链

那具体如何获取歌曲id或者歌单id呢？也就是说如何知道网易云哪些音乐的外链
1、打开网易云软件
2、选择歌曲，点击分享

3、点击复制连接

4、粘贴出来：http://music.163.com/song?id=516657051&userid=617352839
可以看到id是516657051，并且我们还发现song，说明你用这个id的时候，type类型必须选song，而且应用之后，播放器只显示一首歌，而不是一个歌单列表

5、歌单生成外链，网易云搜索歌单

外链为：http://music.163.com/playlist?id=5144722080&userid=617352839
效果：

综上：
当你是单曲的外链时：type为song
专辑的外链时：type为album
歌单的外链时：type为playlist

前端页面添加音乐插件相关推荐

前端页面添加灰色滤镜,使网页整体变灰
前端页面添加灰色滤镜,使网页整体变灰修改css样式只需要在html的样式里面加一句代码 html,body,div,img{-webkit-filter: grayscale(100%);-moz ...
博客添加音乐插件、网站运行时间、文章阅读次数和网站访客统计
今天为博客增加了音乐播放插件.博客页脚网站安全运行时间.文章阅读次数以及网站访客统计的功能,接下来进行详细介绍. 博客音乐插件的使用本博客使用的音乐播放插件为hexo-tag-aplayer ...
前端页面加水印插件_没用过这7款浏览器插件，你一定是假的程序员
谷歌Chrome浏览器,几乎是每个程序员必备的浏览器,除了速度快之外,还有非常丰富的插件可以使用,今天我们来细数程序员最常用的7大插件,可以极大地提升你的效率. 1.AdBlock,必备神器,全球超过 ...
flash 音乐 html代码,用html为flash页面添加音乐
现在越来越多人用flash建网站了,由于mx2004支持部分html的标签,我们可以用它们来丰富页面,而不仅仅是文字. 这里有一个要注意的: 图像标签说明:这个标签的功能不仅仅是在文本框中插入图片,还 ...
flash咋导入歌曲html,使用html为flash页面添加音乐
来源: 中国教程网作者: xuqingzhong 2008-05-15/01:36 现在越来越多人用flash建网站了,由于mx2004支持部分html的标签,我们可以用它们来丰富页面,而不仅仅是文 ...
怎样用html制作音乐界面,用html为flash页面添加音乐
现在越来越多人用flash建网站了,由于mx2004支持部分html的标签,我们可以用它们来丰富页面,而不仅仅是文字. 这里有一个要注意的: 图像标签说明:这个标签的功能不仅仅是在文本框中插入图片,还 ...
前端页面添加全局水印或指定页面添加水印
前言为了防止信息泄露或知识产权被侵犯,在web的世界里,对于图片文档等增加水印处理是十分有必要的.水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加. 今天介绍的就是通过canv ...
H5页面添加音乐播放
在制作H5页面展示的时候,经常会遇到一些带音乐播放的场景,在右上角还有一个音频按钮,点击切换播放和暂停.其实很简单,只需简单几步就可以完成 html <span id="musicCo ...
QT Designer前端页面添加的图标在程序运行时不显示解决方法
1.首先需要将图标添加到资源管理器中 2.添加完毕后项目中会生成一个.qrc文件 3.添加一个External Tools 在PyCharm中的配置操作:File ->> Settings ...

最新文章

热门文章