Handsome主题音乐播放器音量控制器样式

博主： Hmm
发布时间：2018 年 09 月 26 日
18565 次浏览
63 条评论
495 字数
分类：默认分类

Handsome主题音乐播放器音量控制器样式

Handsome主题主题自带了skPlayer播放器，但音量控制被隐藏了，默认只能100%音量和静音，今天修改了下js和css实现了音量控制，顺便兼容了Chorme和Firefox，对IE的兼容稍微有点问题，但还是可以实现操作，下面给出代码文件和使用说明。

页面预览

见本站

使用说明

1.确保主题已升级至4.5.1
2.下载css和js文件
3.替换/handsome/assets/css/和/handsome/assets/js/目录下的同名文件
4.目前只做了炫酷透明模式兼容，其他模式请自己修改CSS调整对应的颜色或在本文章下回复。

5.该样式已过期，请自主从handsome.css中提取音量控制条样式，js文件可直接替换

下载地址

此处内容需要评论回复后（审核通过）方可阅读。

最后修改：2020 年 10 月 27 日 08 : 24 PM

63 条评论

执念
3 个月前

看看大佬的

回复
Fulaoer
7 个月前

有没有能实现拖动时间轴的功能

回复
1. Hmm博主
  7 个月前
  
  @Fulaoer
  这个功能不是自带的就有么
  
  回复
  1. Fulaoer
    7 个月前
    
    @Hmm
    博主可以加QQ细说吗
    
    回复
    
    Hmm博主
    7 个月前
    
    @Fulaoer
    Handsome自带的播放器不是可以点击拖动歌曲进度嘛
    
    回复
    
    Fulaoer
    7 个月前
    
    @Hmm
    6.0版本没有
    
    回复
    
    Hmm博主
    7 个月前
    
    @Fulaoer
    鼠标移到播放器上底部会出现一个小小的的进度条，那个进度条可以点击（不能拖动）切换歌曲进度
    
    回复
    
    Fulaoer
    7 个月前
    
    @Hmm
    https://fulaoer.top/index.php/archives/38/ 最后一个
    
    回复
    
    Hmm博主
    7 个月前
    
    @Fulaoer
    刚才粗略看了一下，最后一个用的应该是weixinAudio.js插件，在github有一个版本的weixinAudio.js支持进度条拖动https://github.com/fei-chen888/weixinAudio 合并一下css和js文件就可以支持拖动了
    
    回复
    
    Fulaoer
    7 个月前
    
    @Hmm
    啊太复杂了对我来说，没弄好
    
    回复
京都一只喵
8 个月前

看看

回复
熊呢
9 个月前

路过看看

回复
阿迪斯
10 个月前

来看看

回复
洋葱魅特
11 个月前

还能用吗

回复
1. Hmm博主
  11 个月前
  
  @洋葱魅特
  能用，就是需要手动提取代码写入最新的样式文件了
  
  回复
  1. 洋葱魅特
    11 个月前
    
    @Hmm
    参考了你的js文件，改成了！发现7.3.1版本主题，作者把播放器相关代码集成到function.min.js里面了，总是改的能用了本来想通过另外的js代码控制滑轨边界，技术不到家最后还是直接在源代码里加个几个判断。。。不然一直报volume过界的错误，头大~ 还是太感谢你啦！
    
    回复
Tom
2020 年 07 月 27 日

感觉不错，过来看看

回复
dmbcjl
2020 年 07 月 10 日

学习一下

回复
dmbcjl
2020 年 07 月 10 日

see

回复
高考加油
2020 年 07 月 07 日

试着魔改

回复
1. Hmm博主
  2020 年 07 月 07 日
  
  @高考加油
  加油！主要改了handsome.css和music.min.js
  
  回复
七月
2020 年 06 月 21 日

学习OωO

回复
安然
2020 年 06 月 05 日

....看看

回复
surpriselon
2020 年 05 月 30 日

2333

回复
Shuazi
2020 年 05 月 13 日

@Hmm 6.0的css里没这串啊
skPlayer .skPlayer-control .skPlayer-volume .skPlayer-percentback {
改不带back的那项，点按钮不静音了，但是也不弹出改音量的.

回复
Shuazi
2020 年 05 月 12 日

老鸽老鸽，整完没？

回复
yuuxeun
2020 年 05 月 12 日

期待适配6.0中

回复
Shuazi
2020 年 05 月 12 日

6.0能用么

回复
1. Shuazi
  2020 年 05 月 12 日
  
  @Shuazi
  要不重新打包一份？？？，那个音量条怎么是椭圆形的.....
  
  回复
  1. Hmm博主
    2020 年 05 月 12 日
    
    @Shuazi
    是的，要重新打包，只不过我现在还是5.X的主题，明天我得弄个6.0的环境再打包，具体参考本博客现在的样式，如果还是椭圆形请说明一下浏览器类型及版本
    
    回复
    
    Shuazi
    2020 年 05 月 12 日
    
    @Hmm
    https://s1.ax1x.com/2020/05/12/YtqZcT.png
    火狐76.0.1 (64 位)
    整活！
    
    回复
2. Hmm博主
  2020 年 05 月 12 日
  
  @Shuazi
  不对，不可以！！！！6.0改了太多东西了！！！请手动合并文件修改的部分！！！！
  
  回复
  1. Shuazi
    2020 年 05 月 12 日
    
    @Hmm
    你已经动手了么····
    
    回复
    
    Hmm博主
    2020 年 05 月 12 日
    
    @Shuazi
    等我明天出一个6.0的版本吧，今天太晚了先睡觉啦
    
    回复
    
    Shuazi
    2020 年 05 月 12 日
    
    @Hmm
    成，顺便把着音量条改成正常形状吧（逃
    
    回复
    
    Hmm博主
    2020 年 05 月 12 日
    
    @Shuazi
    我突然想起来之前看过6.0的代码，改了很多东西，直接覆盖会出事故
    
    回复
3. Hmm博主
  2020 年 05 月 12 日
  
  @Shuazi
  理论上是可以
  
  回复
凉菜
2020 年 04 月 30 日

很不错，谢谢博主

回复
yuuxeun
2020 年 04 月 21 日

感谢博主分享

回复
1. yuuxeun
  2020 年 04 月 21 日
  
  @yuuxeun
  哇这评论审核邮箱通知怎么做的
  
  回复
yuuxeun
2020 年 04 月 21 日

插眼

回复