侧边栏添加可调用网易云音乐&腾讯音乐的播放器-记录

简介

引用APlayer和MetingJS库在侧边栏添加可调用网易云音乐&腾讯音乐的播放器

APlayer v1.10.1 : https://github.com/DIYgod/APlayer

MetingJS : https://github.com/metowolf/MetingJS

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

安装很简单,一共需要调用三个文件: APlayer.min.js APlayer.min.css Meting.min.js

Meting.js 依赖 APlayer.js,扩展了 APlayer.js 的功能,能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单

效果演示

图片[1]-侧边栏添加可调用网易云音乐&腾讯音乐的播放器-记录

教程开始

在主题的functions.php文件中添加CSS和JS(引入APlayer和MetingJS库)

function enqueue_aplayer_and_metingjs() {
    wp_enqueue_style('aplayer-css', 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css');
    wp_enqueue_script('aplayer-js', 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js', array(), null, true);
    wp_enqueue_script('meting-js', 'https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_aplayer_and_metingjs');
图片[2]-侧边栏添加可调用网易云音乐&腾讯音乐的播放器-记录

这段代码的作用是将APlayer和MetingJS的CSS样式表和JavaScript文件引入到网站中,以便在页面上使用这些库。

代码详解

1. enqueue_aplayer_and_metingjs 函数

  • 这是一个自定义函数,负责将APlayer和MetingJS的外部资源(CSS和JavaScript文件)加载到WordPress的页面中。

2. wp_enqueue_style

  • wp_enqueue_style('aplayer-css', 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css');
  • 这个函数用于注册并加载一个CSS文件。
  • 'aplayer-css' 是一个唯一的句柄,用于标识这个样式表。
  • 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css' 是样式表的URL。
  • 通过这个函数,能确保这个CSS文件在需要的页面中正确加载。

3. wp_enqueue_script

  • wp_enqueue_script('aplayer-js', 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js', array(), null, true);
  • 这个函数用于注册并加载一个JavaScript文件。
  • 'aplayer-js' 是一个唯一的句柄,用于标识这个脚本。
  • 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js' 是脚本文件的URL。
  • array() 表示此脚本没有任何依赖的其他脚本。如果有依赖的脚本,可以在数组中列出它们的句柄。
  • null 是脚本的版本号,可以用来强制浏览器重新加载新的脚本版本。null 表示不指定版本号。
  • true 表示将脚本放置在页面的底部(即在 </body> 标签之前),以确保页面的其他内容在脚本加载前被渲染。这有助于提升页面加载速度。
  • wp_enqueue_script('meting-js', 'https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js', array(), null, true);
  • 与上面的 wp_enqueue_script 类似,加载的是 MetingJS 的 JavaScript 文件。

4. add_action

  • add_action('wp_enqueue_scripts', 'enqueue_aplayer_and_metingjs');
  • add_action 是一个 WordPress 钩子函数,用于将 enqueue_aplayer_and_metingjs 函数挂载到 wp_enqueue_scripts 钩子上。
  • wp_enqueue_scripts 是 WordPress 中的一个动作钩子,专门用于在适当的时候加载样式表和脚本。
  • 通过这个钩子,WordPress 会在正确的时机(通常是在页面加载时)自动调用 enqueue_applayer_and_metingjs 函数,从而确保APlayer和MetingJS的资源被加载到页面中。

在侧边栏添加<meting-js>标签

  • 前往WordPress后台,进入外观 > 小工具,添加一个“Custom HTML”小工具。
  • 在小工具中粘贴以下代码:
<meting-js style="color: #000" class="meting" server="netease" type="playlist" volume="1" id="8829630010" fixed="false"
    autoplay="false" loop="all" order="random" preload="auto" list-folded="true" list-max-height="300px" lrc-type="0">
</meting-js>

要将音乐来源从腾讯音乐改为网易云音乐,你需要将 server="tencent" 修改为 server="netease"。这样可以让播放器从网易云音乐获取歌曲或播放列表。如果你需要固定在网页左下角可以修改  fixed=”true”

属性详解

  • style="color: #000":
    • 用于设置播放器的样式属性。这里设置了颜色为黑色 (#000),这个颜色将应用到播放器的文本或其他相关元素上。
  • class="meting":
    • 设置标签的 CSS 类名为 meting,这可以帮助通过自定义 CSS 样式来进一步控制播放器的外观和布局。
  • server="netease":
    • 指定音乐来源服务器。在这里,netease 表示音乐将从网易云音乐获取。其他可能的值包括 tencent(腾讯音乐)和 kugou(酷狗音乐)等。
  • type="playlist":
    • 指定播放器加载的音乐类型。playlist 表示加载的是一个播放列表。其他可能的类型包括 song(单曲)和 album(专辑)等。
  • volume="1":
    • 设置播放器的初始音量。1 表示最大音量(100%),0.5 表示50%的音量,依此类推。
  • id="8829630010":
    • 这是网易云音乐中的播放列表 ID。播放器将根据这个 ID 从网易云音乐加载对应的播放列表。
  • fixed="false":
    • 控制播放器是否固定在页面的底部。如果设置为 true,播放器会固定在屏幕底部,不随页面滚动而移动。设置为 false 则播放器会出现在页面的当前插入位置,并随页面滚动。
  • autoplay="false":
    • 控制播放器是否自动播放。设置为 false 表示页面加载时不会自动播放音乐;true 则会在页面加载后自动开始播放。
  • loop="all":
    • 设置播放列表循环模式。all 表示循环播放列表中的所有歌曲。其他可能的值包括 one(单曲循环)和 none(不循环)。
  • order="random":
    • 设置播放顺序。random 表示随机播放列表中的歌曲。其他可能的值包括 list(按列表顺序播放)。
  • preload="auto":
    • 设置音频文件的预加载行为。auto 表示浏览器会尽量预加载音频文件,以减少播放时的延迟。其他可能的值包括 none(不预加载)和 metadata(仅加载元数据)。
  • list-folded="true":
    • 控制播放列表是否默认折叠。true 表示播放列表初始状态为折叠,用户需要点击展开以查看列表。false 则默认展开播放列表。
  • list-max-height="300px":
    • 设置播放列表的最大高度。如果播放列表的高度超过这个值,列表将变为可滚动的,最大高度在这里被设置为 300 像素。
  • lrc-type="0":
    • 控制歌词显示模式。0 表示不显示歌词。其他值可以包括 1(嵌入的 LRC 歌词)和 3(匹配外部 LRC 歌词)。

添加短代码的方式

除了上述方式,你还可以将代码放入一个WordPress短代码中,然后在侧边栏小工具中调用该短代码以实现上述效果

functions.php中添加短代码功能

function aplayer_meting_shortcode() {
    return '<link rel="stylesheet" href="https://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.0.1/dist/Meting.min.js"></script>
    <meting-js style="color: #000" class="meting" server="netease" type="playlist" volume="1" id="8829630010" fixed="false"
    autoplay="false" loop="all" order="random" preload="auto" list-folded="true" list-max-height="300px" lrc-type="0">
    </meting-js>';
}
add_shortcode('aplayer_meting', 'aplayer_meting_shortcode');

在侧边栏调用短代码即可

  • 在侧边栏的小工具中,添加[aplayer_meting]短代码。

总结

这段代码的作用是将APlayer和MetingJS的CSS样式表和JavaScript文件引入到网站中,以便在页面上使用这些库。这样,当你在WordPress的侧边栏或页面中使用 <meting-js> 标签时,播放器能够正常工作。这是一种标准的方式来在WordPress中加载外部资源,确保页面的性能和功能。

© 版权声明
THE END
喜欢就支持一下吧
赞赏