为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer

最新推荐文章于 2024-04-23 09:33:42 发布
原创 最新推荐文章于 2024-04-23 09:33:42 发布 · 1.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #hexo

这篇博客介绍了如何将Aplayer音乐播放器收入侧边栏，通过修改Aplayer.min.css文件，调整.left属性实现。同时，详细说明了如何改变歌词的颜色，包括字体大小和颜色，使得歌词显示更加个性化。只需将提供的CSS代码添加到配置文件中，即可完成定制。

最终效果

image-20210429142000885

1.收入侧边栏

找到butterfly配置文件APlayer.min.css把他下载下来,上图第一个

复制代码进入https://tool.oschina.net/codeformat/css格式化

由于.aplayer-body已经开启了fixed定位,只要简单修改一下left并设置最高优先级即可收入侧边栏

我们只需要在css中加入以下代码即可实现收入侧边栏

在代码最后加入即可

.aplayer.aplayer-narrow .aplayer-body {
   
   
    left: -66px !important;
}
.aplayer-body:hover
最低0.47元/天 解锁文章
hexo butterfly主题 添加全局吸底APlayer
weixin_44186409的博客
06-15 1729
<font color=""></font>
一段简单的html 5 音频,简洁的HTML音乐播放器
weixin_36049771的博客
06-03 703
APlayer是一个非常漂亮的HTML5音频播放器，它将audio标签封装，并结合CSS制作出漂亮的播放器UI，它支持设置歌名、歌手和歌词，可以设置是否自动播放，支持缩略图，支持播放进度以及设置播放源。演示地址：【点击查看】HTML首先是要加载播放器样式文件，这个播放器的样式酷似网易云音乐播放器。然后在body中加入播放器div#player1，待会要调用播放。接着载入APlayer.js文件。J...
html5音乐播放器模版,HTML5小型音乐播放器 - Aplayer
weixin_39980129的博客
06-03 599
OPTION:var option = {element: document.getElementById('player1'), // Optional, player elementnarrow: false, // Optional, narro...
hexo-tag-aplayer:将播放器嵌入Hexo帖子页面
05-15
hexo-tag-aplayer 在Hexo帖子/页面中嵌入APlayer（ ）。 重复的APlayer.JS加载 执照 安装 npm install --save hexo-tag-aplayer 相依性 APlayer.js> = 1.10.0 Meting.js> = 1.2.0 用法 {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %} 选项 title ：音乐标题 author ：音乐作者 url ：音乐文件网址 picture_url ：可选，音乐图片url narrow ：可选，窄样式 autoplay ：可选，自动播放音乐，移动浏览器不支持 width:xxx ：可选，前缀width: width:xxx播放器宽度（默认值：100％） lrc
Hexo + Next 主题实现全局播放背景音乐
Luis
04-09 5678
欢迎访问我的博客：https://iluis.cn/ 第一种方式：使用网易云音乐插件 此种方式特点： 十分方便快捷 有版权保护的歌无法播放 1. 生成网易云歌单插件 为什么要创建歌单外链而不是创建歌曲外链：以后添加或者删除歌曲不用修改代码，直接在网易云歌单中操作即可。 步骤一：创建歌单并添加自己喜爱的歌曲 小贴士：若我们的歌单中添加了受网易云版权保护的歌，在博客中我们的歌单就GG了，要避...
博客搭建(基于hexo)
Soul Blog
12-18 660
准备工作 博客框架：Hexo 博客主题：Fluid, Ayer, butterfly 主机：阿里云轻量级应用服务器 配置：2核2G 60GB 图床：阿里云OSS 软件：oss-browser(阿里云OSS适配) 写作工具：Typora 图床软件：PicGo 博客备份：Github，Gitee，Onedrive 博客框架选择 我采用的是Hexo作为我的博客框架，理由是：响应快速、内存占用小、文章格式统一（都使用markdown格式）、迁移能力强 文档 | Hexo 博客
APlayer, 哇这么漂亮的HTML5音乐播放器.zip
10-11
APlayer, 哇这么漂亮的HTML5音乐播放器 APlayer哇这么可爱的HTML5音乐播放器 简介 APlayer是一个可爱的HTML5音乐播放器。APlayer支持：媒体格式MP4 H.264 ( AAC或者 MP3 )波形
hexo添加_HEXO-aircloud主题：在侧边栏添加一项栏目
weixin_39527078的博客
01-03 296
本文首发于http://github.io博客，内容涉及对基于hexo-aircloud主题进行偏学术风格的个人主页设计。个人主页代码开源。https://meridiancas.github.io/archives/​meridiancas.github.io以添加Projects为例，展示如何在sidebar里添加一个新的item。第一步，用hexo新建一个名为projects的page，在s...
APlayer：哇，这么漂亮HTML5音乐播放器
02-03
一个玩家 哇，好可爱HTML5音乐播放器 介绍 APlayer是一个可爱HTML5音乐播放器。 APlayer支持： 媒体格式-MP4 H.264（AAC或MP3）-WAVE PCM-Ogg Theora Vorbis 功能-播放列表-歌词 在您的项目上使用APlayer？ 参加讨论 ：415835947 相关项目 外挂程式 ：Typecho ：Hexo ：WordPress ：WordPress的 ：Z-BlogPHP ：React ：Vue ：Vue ：PHP 工装 ：控制工具 ：使用音乐API 欢迎在“ 提交您的 谁使用APlayer？ ：
Player样式说明
axian168的专栏
12-02 508
转自：http://hi.baidu.com/cnzhouhai/blog/item/51329c1c66ef928a86d6b6b3.htmlplayer" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">      //文件地址
【亲测免费】 推荐开源项目：APlayer - 美观且功能强大的音乐播放器组件
最新发布
gitblog_00052的博客
04-23 1554
推荐开源项目：APlayer - 美观且功能强大的音乐播放器组件 项目简介 是一个轻量级、响应式的HTML5音乐播放器插件，由CompileLife开发并维护。它以其简洁的设计和丰富的功能赢得了开发者和用户的喜爱。APlayer不仅支持多种音频格式，还提供了炫酷的可视化效果和自定义配置选项，使得在网页中嵌入音乐变得简单而优雅。 技术分析 HTML5 Audio API：APlayer的基础是H...
aplayer得使用，记一次aplayer/Aplayer开发心得
pp
12-04 6900
aplayer有很多版本，适配vue得，有适配原生得，其中适配vue还有两种(Vue-Aplayer,vue-aplayer)，这里推荐后者，博主两种都用了，但是第二种用着比较好，文档比较完善，前者文档好像不完善，功能不足(前者有个bug，音量调节有些情况无法使用，找了半天也没有修复，遂放弃)。 直接贴上作者得github 点我，其中给出了各种版本，任君选取。 直接进入整体，这里就用博主最后用在项...
用 TS + Vue 重写 APlayer HTML5 音乐播放器
weixin_34343308的博客
07-24 574
简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ﾉωﾉ) 在我第一次看到这款播放器颜值的时候让我眼前一亮，我非常崇拜那些能设计出好看界面的设计师 (* >ω<) 但是在用过之后发现还是有不足的地方 这是我曾经提过的 Issues 用了一段时间，很喜欢 APlayer 简洁的 UI，提一些...
vue怎么实现【音频播放器】？css可根据自己的需求调整
weixin_50450473的博客
07-27 823
我这里采用的是音频插件，然后修改的样式的方式： 首先安装 音频插件 npm install --save vue-aplayer html：然后引入插件使用 css： <stylelang='scss'scoped> /deep/.aplayer{ box-shadow:inherit; background-color:#F7F7F7; border-radius:10px; width:100%; .aplayer-body{...
个人博客的APlayer音乐播放器
weixin_50582284的博客
02-14 1282
个人了博客的APlayer音乐播放器
Html5添加APlayer音乐播放器插件教程
keymob的博客
01-04 8333
一、APlayer音乐播放器安装 可以通过npm来安装APlayer音乐播放器插件。 $ npm install aplayer                  二、使用方法 使用APlayer音乐播放器插件需要引入APlayer.min.css和APlayer.min.js文件。                 三、HTML结构 可以使用一个元素作为音乐播放器的容器。
博客中如何添加一款精美的HTML5-Aplayer音乐播放器
忘忧的博客
09-07 4413
博客中如何添加一款精美的HTML5-Aplayer音乐播放器 - 简介 这几天一直在写博客的前端页面，看着单一且不能自定义播放背景音乐，总觉得少了点什么。百度了一下，找到了一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件 APlayer，该项目由一名bili bili 的前端大牛DIYgod开源,Aplayer拥有在线歌源、歌词滚动等常用功能。 - 项目地址 GIthub地址 Aplayer中文文档 - 使用方法 前往上面的github地址,下载到本地,进入目录/dist找到 APlayer.mi
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值