个人博客的APlayer音乐播放器

大家好，今天看到的个人了博客音乐播放器，就想自己搞一个。弄了几个小时才搞懂。在网上找了好多资料，最后发现没用。出差各种问题，因为小编我一开始也不是很理解。我目前找到了三种方法，给大家分享一下，如果还有其他的方法，请在评论区留言。

第一种就是APlayer音乐播放器

需要引入三个文件APlayer.min.js、APlayer.min.css、Meting.min.js。

 <!-- require APlayer --><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><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

在body内添加这行代码就行

  <meting-js server="netease" type="playlist" id="5260535564" fixed="true" autoplay="true" loop="all" order="random"preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"></meting-js>

这是所有代码复制粘贴运行就可以显示了，如果要换歌单，就修改id，id的歌单可以在网易云上获取等下在说。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- require APlayer --><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><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script></head><body><meting-js server="netease" type="playlist" id="5260535564" fixed="true" autoplay="true" loop="all" order="random"preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"></meting-js></body>
</html>

效果图：

第二章方法使用网易云的外联播放器。

学习歌单‖极静轻音乐01 - 歌单 - 网易云音乐 (163.com)

点击生成外链播放器然后复制代码粘贴就好了

这个相对比较简单

注意：APlayer音乐播放器修改歌单使用的id 歌单id是我标红线的地方粘贴复制就行看下图

第三个是一个管方的网站，永久免费。但是只能添加一个播放器。多个吗，氪金你值得拥有。

这个还可以更换皮肤。还是比较不错的。

地址：

个人博客的APlayer音乐播放器相关推荐

hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...
Hexo博客使用aplayer音乐播放插件
首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程, 文章目录前情提要〇.懒人版一.独立部署写法1 写法2 二.插件配置 ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
Hexo全局添加APlayer音乐播放器
本人博客相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具基于 Yilia 主题全局添加 APlayer 音乐播放器编辑文件 hexo-t ...
20款可嵌入网站和博客的免费音频播放器
本文将给您提供一些免费的在线音频播放器,在线音频播放器允许任何人在他们的站点和博客上添加,比如常见的音乐网站及其他个性的网站中.在这篇文章中,我已编制了20个免费为您的网站和博客提供的音频播放器,希 ...
jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
Hexo主题插入音乐之aplayer音乐播放器
原文首发自:https://wiki.hushhw.cn/posts/a84d1ef1.html 今天折腾的点是给博客中插入音乐,找到的具体可行的方案有: 使用音乐平台提供的插件体验很差使用hex ...
React + Vite 实现一个音乐网站（aplayer音乐播放器）
众所周知,音乐网站需要能播放音乐 1.页面搭建我们需要搭建这样一个部分那么秉承一分为二的原则,左边音乐列表,右边显示cd图片.理所应当我们得让cd运动起来. components里面建立文件夹Mu ...
aimp输出dsd_极客评论：音乐播放器AIMP 2
aimp输出dsd I love trying out cool music players. I have already written about several players and no ...

个人博客的APlayer音乐播放器

个人博客的APlayer音乐播放器相关推荐

最新文章

热门文章