关于如何通过APlayer+MetingJS为自己的wordpress博客网页添加网易音乐播放器(无需插件)

关于如何通过APlayer+MetingJS为自己的wordpress博客网页添加网易音乐播放器(无需插件)

码农世界 2024-05-28 前端 97 次浏览 0个评论

本文转自博主的个人博客:https://blog.zhumengmeng.work,欢迎大家前往查看。

原文链接:点我访问

序言:最近在网上冲浪,发现大家的博客大部分都有一个音乐播放器能够播放音乐,随机我也开始寻找解决方法。可是找来找去我却发现在wordpress上的大部分音乐播放器插件无法实现播放网易云歌单,但是皇天不负苦心人,我找到了APlayer和MetingJS。

一、介绍

  • Aplayer是一个简洁漂亮、功能强大的 Html5 音乐播放器,支持音乐信息、歌词、进度条、音量、顺序模式、循环模式,可以使用三方音乐外链,也可以使用自己的音乐链接。开源地址:https://github.com/DIYgod/APlayer
  • MetingJS 扩展了 APlayer.js 的功能,能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单。

    开源地址:https://github.com/metowolf/MetingJS

    二、使用方法

    打开wordpress后台管理页面,依次点击外观-小工具-添加-自定义HTML。

    在编辑栏复制粘贴如下代码:

    
    
    
    
    
    
    
    
    
    
    
    
    

    效果如下图所示:

    三、参数说明

    参数默认值描述
    idrequire歌曲 ID/歌单 ID/专辑 ID/搜索关键字
    serverrequire音乐平台: netease, tencent, kugou, xiami, baidu
    typerequire类型:song, playlist, album, search, artist
    autooptions音乐链接,支持: netease, tencent, xiami
    fixedfalse开启吸底模式
    minifalse开启迷你模式
    autoplayfalse自动播放,一般浏览器默认会阻止音频自动播放
    theme#2980b9主题色
    loopall音频循环播放,值:’all’、’one’、’none’
    orderlist音频循环顺序,值:’list’,’random’
    preloadauto音频预加载,值: ‘none’, ‘metadata’, ‘auto’
    volume0.7默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效
    mutextrue防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器
    lrc-type0歌词类型
    list-foldedfalse列表是否先折叠
    list-max-height340px音频列表最大高度

    大家可能会问一个问题,歌单 id 怎么找?浏览器里打开网易云官网并登录,找到自己的歌单,点击进去后,链接后面那串数字就是ID。

    比如:https://music.163.com/#/my/m/music/playlist?id=7723752305,7723752305就是ID.

转载请注明来自码农世界,本文标题:《关于如何通过APlayer+MetingJS为自己的wordpress博客网页添加网易音乐播放器(无需插件)》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,97人围观)参与讨论

还没有评论,来说两句吧...

Top