Hmm

Handsome主题音乐播放器音量控制器样式
Handsome主题音乐播放器音量控制器样式Handsome主题主题自带了skPlayer播放器,但音量控制被隐藏...
扫描右侧二维码阅读全文
26
2018/09

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

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 条评论

  1. 执念

    看看大佬的

  2. Fulaoer

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

    1. Hmm
      @Fulaoer

      这个功能不是自带的就有么

      1. Fulaoer
        @Hmm

        博主可以加QQ细说吗

        1. Hmm
          @Fulaoer

          Handsome自带的播放器不是可以点击拖动歌曲进度嘛

          1. Fulaoer
            @Hmm

            6.0版本没有

            1. Hmm
              @Fulaoer

              鼠标移到播放器上底部会出现一个小小的的进度条,那个进度条可以点击(不能拖动)切换歌曲进度

                1. Hmm
                  @Fulaoer

                  刚才粗略看了一下,最后一个用的应该是weixinAudio.js插件,在github有一个版本的weixinAudio.js支持进度条拖动https://github.com/fei-chen888/weixinAudio 合并一下css和js文件就可以支持拖动了

                  1. Fulaoer
                    @Hmm

                    太复杂了对我来说,没弄好

  3. 京都一只喵

    看看

  4. 熊呢

    路过看看

  5. 阿迪斯

    来看看

  6. 洋葱魅特

    还能用吗

    1. Hmm
      @洋葱魅特

      能用,就是需要手动提取代码写入最新的样式文件了

      1. 洋葱魅特
        @Hmm

        参考了你的js文件,改成了!发现7.3.1版本主题,作者把播放器相关代码集成到function.min.js里面了,总是改的能用了 本来想通过另外的js代码控制滑轨边界,技术不到家最后还是直接在源代码里加个几个判断。。。不然一直报volume过界的错误,头大~ 还是太感谢你啦!

  7. Tom

    感觉不错,过来看看

  8. dmbcjl

    学习一下

  9. dmbcjl

    see

  10. 高考加油

    试着魔改

    1. Hmm
      @高考加油

      加油!主要改了handsome.css和music.min.js

  11. 七月

    学习OωO

  12. 安然

    ....看看

  13. surpriselon

    2333

  14. Shuazi

    @Hmm 6.0的css里没这串啊

    skPlayer .skPlayer-control .skPlayer-volume .skPlayer-percentback {

    改不带back的那项,点按钮不静音了,但是也不弹出改音量的.

  15. Shuazi

    老鸽老鸽,整完没?

  16. yuuxeun

    期待适配6.0中

  17. Shuazi

    6.0能用么

    1. Shuazi
      @Shuazi

      要不重新打包一份???,那个音量条怎么是椭圆形的.....

      1. Hmm
        @Shuazi

        是的,要重新打包,只不过我现在还是5.X的主题,明天我得弄个6.0的环境再打包,具体参考本博客现在的样式,如果还是椭圆形请说明一下浏览器类型及版本

        1. Shuazi
          @Hmm

          https://s1.ax1x.com/2020/05/12/YtqZcT.png
          火狐76.0.1 (64 位)
          整活!

    2. Hmm
      @Shuazi

      不对,不可以!!!!6.0改了太多东西了!!!请手动合并文件修改的部分!!!!

      1. Shuazi
        @Hmm

        你已经动手了么····

        1. Hmm
          @Shuazi

          等我明天出一个6.0的版本吧,今天太晚了先睡觉啦

          1. Shuazi
            @Hmm

            成,顺便把着音量条改成正常形状吧(逃

        2. Hmm
          @Shuazi

          我突然想起来之前看过6.0的代码,改了很多东西,直接覆盖会出事故

    3. Hmm
      @Shuazi

      理论上是可以

  18. 凉菜

    很不错,谢谢博主

  19. yuuxeun

    感谢博主分享

    1. yuuxeun
      @yuuxeun

      哇这评论审核邮箱通知怎么做的

  20. yuuxeun

    插眼

发表评论