当前位置: 首页 > Web前端 > HTML

如何给博客添加Aplayer音乐播放器

时间:2023-03-28 02:00:25 HTML

前言有没有一段音乐,前奏会让你的灵魂不由自主地颤抖。音乐就像老电影,每一首旋律,每一行歌词,都承载着每个人过往的回忆和感受。我收藏了很多音乐,但是很多音乐受版权限制,需要买VIP才能听,还有一些音乐已经下架了,变成了也听不了一个会员,所以你只能自己建立一个音乐播放器。博客上的音乐播放器大多是Mini音乐播放器。虽然很方便,但总觉得不够正式,音乐列表也不够直观,所以希望单独做一个页面。本文介绍如何在博客中添加音乐播放器并播放您自己的音乐。欢迎来到我的音乐主页echeverra,随时随地聆听。迷你播放器效果:单页音乐效果:教程一、音乐插件对比了几个音乐插件,最终还是选择了Aplayer.js,因为它界面美观,功能强大。支持音乐播放器的音乐信息、歌词、进度条、音量、顺序模式、循环模式。您可以使用第三方音乐链接,也可以使用您自己的音乐链接。官网:https://aplayer.js.org/Github:https://github.com/MoePlayer/APlayer/当然,由于一些限制,打开以上链接是概率事件...如果RP不足,可以加我微信公众号echeverra,回复“Aplayer”获取插件。2.音乐资源音乐资源可在各大音乐平台下载。如果你受会员限制或下架限制,你可以通过以下我常用的方式找到音乐。小白盘:https://www.xiaobaipan.com/魔方城堡:http://www.mfcb.net/wsyy/23APE:http://www.23ape.net/HIFINI:https://www.hifini.com/因为我会把下载的音乐上传到自己的服务器(WordPress后台媒体),当音乐文件太大的时候我的服务器承受不了(渣服务器),只好转成更小的MP3格式.推荐WORTHSEE:https://audio.worthsee.com/。3.实现代码将Aplayer插件APlayer.min.js和APlayer.min.css上传到服务器。如果博客使用WordPress,可以通过链接https://IP/wp-content/Aplayer上传至服务器的wp-content目录。..,您可以访问它。当然也可以直接使用jsdeliverCDN的方式,更快更方便,但是不稳定,偶尔会抽风...Aplayer主要参数说明:参数默认值描述containerdocument。querySelector('.aplayer')播放器容器元素fixedfalse启用底吸模式minifalse启用迷你模式autoplayfalse音频自动播放,一般浏览器默认会阻止音频自动播放theme'#b7daff'themecolorloop'all'音频循环播放,value:'all','one','none'order'list'音频循环顺序,值:'list','random'预加载'auto'音频预加载,值:'none','metadata','auto'volume0.7默认音量,播放器会记住用户的设置,用户设置音量后默认音量将失效。showlrctrue歌词是否显示audio-audio,一个音频为对象格式,多个音频为数组格式audio.name-音频名称audio.artist-音频艺术家audio.url-音频链接audio.cover-音频封面audio.lrc-audiolyricsmutextrue防止多个播放器同时播放,本播放器开始播放时暂停其他播放器listFoldedfalse列表是否先折叠默认,固定在界面左下角。如果你的博客使用WordPress,在你使用的主题设置中找到脚本项,在脚本中编写代码执行。也可以直接把代码粘贴到IDE中(记得设置编码格式),用浏览器打开就可以执行了。代码实现如下:

当有多首歌曲时,audio的值是数组形式,代码如下:3.2单页音乐单页音乐可以使用较大的界面显示音乐列表等信息,实现也很简单。直接在文章内容中写代码块,把fixed和mini改成默认值false。代码如下:
编辑器右侧可以实时显示播放效果。最终页面效果如下:如果要创建多个音乐播放器,需要创建多个音乐播放器元素
,id设置为不同的值,然后新建多个Aplayer播放器被实例化,然后配置每个播放器的音乐列表音频。参数mutex的默认值为true,即使有多个玩家也不会发生冲突。
注意Meting主要参数说明:参数默认值说明idrequiresongID/歌单ID/专辑ID/搜索关键词服务器要求音乐平台:网易、腾讯、酷狗、虾米、baidutype要求类型:歌曲、歌单、专辑、搜索、艺术家autooptions音乐链接,支持,支持:网易、腾讯、xiamifixedfalse启用吸底模式minifalse启用迷你模式autoplayfalse自动播放,一般浏览器默认会阻止音频自动播放theme#2980b9themecolorloopall音频循环播放,value:'all','one','none'orderlist音频循环顺序,value:'list','random'preloadautoaudiopreload,value:'none','metadata','auto'volume0.7默认音量,播放器会记住用户设置,用户自行设置音量后默认音量失效mutextrue防止同时播放多个播放器,在播放时暂停其他播放器ayer开始播放lrc-type0歌词类型list-foldedfalse列表是否先折叠list-max-height340px音频列表最大高度可以看出Meting参数和Aplayer基本一致。4.1单曲介绍我们以网易云为例,单曲BlowMeaKiss,链接:https://music.163.com/#/song?...代码如下:server="netease"指定音乐平台为网易云,type="song"指单曲类型,id="2526628”指的是音乐的id,同一个链接上的id一样。4.2歌单介绍我们使用我在网易云音乐中创建的一个歌单,链接:https://music.163.com/#/playl...代码如下:同server="netease"指定音乐平台为网易云,type="playlist"指的是播放列表的类型,id=“7360465359”是播放列表的id,和链接上的id一样。4.3Mini播放器我们使用Meting实现一个随机播放的Mini播放器,代码如下:除了之前设置的server,type,id参数,还要设置Miniplayer需要的参数是fixed="true",mini="true",randomorder="random"。4.4博客园音乐介绍博客园是为数不多的可自定义博客平台之一,我们先在博客后台申请JS权限->设置->申请JS权限,大概一个小时,成功后在博客后台->设置->footerHTML在代码中粘贴上面4.3的案例,就可以生成一个Mini音乐播放器。是不是很简单~博客园首页播放器效果:好了,以上就是使用Aplayer给博客添加音乐播放器的教程了吧?功能强大好用,很nice~希望对大家有所帮助~你学会“浪费”了吗?参考文章:Aplayer官方文档AplayerwithMetingjs音乐插件MetingJS如何配合Aplayer加载播放列表(完)文章首发于本人博客https://echeverra.cn/aplayer/,原创文章,转载请注明出处转载来源。欢迎关注我的微信公众号echeverra,一起学习进步!时不时会有资源和福利!