个性暗音乐播放精简优化版

所属分类:媒体-音频和视频

 23143  283  查看评论 (39)
分享到微信朋友圈
X
个性暗音乐播放精简优化版 ie兼容9

更新时间:2019/7/7 上午11:55:31

更新说明:

  • 修改了背景颜色,原来edge和ie等浏览器会透明显示

  • 修复localStorage在无cookie支持或发生兼容性问题时报错的问题,现在只会提示

  • 修复ie浏览器下歌曲列表的歌名部分反转问题

  • 修复了进度条鬼畜问题


在"个性暗音乐播放精简版插件"的基础上,做了如下改动


1. 在插件面板上增加了歌曲标题显示

2. 隐藏了删除列表按钮,如果只是博客等网站本地播放音乐没必要这个按钮

3. 更改了当前播放歌曲的样式,使其更明显和美观

4. 将歌曲列表抽出到demo.html中了,你喜欢的话放回去也无所谓

5. 将当前播放的歌曲id进行了本地存储,当你刷新页面的时候会继续选中上次播放的歌曲

6. 放大了音量选择条,原来的感觉太小了,很难选中

7. 去掉了不必要的js文件,只保留音乐插件所需的js

8. 默认隐藏歌曲列表

使用:

1.导入css和js

2.将两张图片放入images 文件夹中

3.不懂就看demo

小弟花一晚上时间赶出来的,可能还有很多问题,大佬勿喷

相关插件-音频和视频

时间播放器

类似视频播放器下面的时间播放控制
  音频和视频
 46275  306

一个交互式的动画SVG(鼓)工具包

有关如何使用GSAP和jQuery创建动画和交互式SVG鼓套件的教程。
  音频和视频
 31921  439

jQuery视频轮播(原创)

让视频像图片一样轮播
  音频和视频
 42239  367

jQuery音乐播放插件jPlayer

简洁的音乐插件jPlayer
  音频和视频
 47589  341

讨论这个项目(39)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0043 0
    2023/6/23 18:17:05
    451562145 0
    2022/3/24 0:24:23
    请问一下进入页面自动播放音乐怎么设置? 回复
    yuehao 0
    2021/5/28 16:36:46
    非常NICE 感谢楼主 回复
    一世风尘,梦离骚 0
    2020/9/14 10:03:33
    楼主:有没有相关音乐接口
        理智的傻逼1
        2020/9/19 16:13:39
        没怎么注意,之前用的网易云的,各大音乐平台应该都有
    回复
    一世风尘,梦离骚 0
    2020/9/12 11:04:41
    在vue里面怎么使用
        一世风尘,梦离骚0
        2020/9/12 11:05:04
        为什么我没报错也没反应
        理智的傻逼1
        2020/9/19 16:12:46
        应该不冲突的,你看文件齐全没
    回复
    一世风尘,梦离骚 0
    2020/9/12 9:54:36
    好用吗,不知道有没有相关文件引导 回复
    傻× 0
    2020/9/1 16:38:26
    这个怎么添加目录啊?

    添加目录时要不影响正在播放的歌曲
        理智的傻逼1
        2020/9/19 16:09:27
        传一个歌曲url列表进来就行
    回复
    kunm 0
    2020/9/1 15:41:35
    这个怎么用这种http://music.163.com/outchain/player?type=0&id=3778678&auto=0
        理智的傻逼0
        2020/9/19 16:07:26
        只能用歌曲链接
    回复
    心灵沃土 0
    2020/2/28 1:20:51

    移动端无法显示
    不能加这个标签

        一世风尘,梦离骚0
        2020/9/14 10:04:38
        移动端的css代码设置隐藏了
    回复
    海文东 0
    2020/2/6 1:37:49
    发现一个问题,播放列表滚到底仍能继续滚动,求解决方案
        海文东3
        2020/2/6 6:43:38
        自己琢磨出了解决方案。
        1.把player_database.js中的$ul.height(1000)删除
        2.player.js中的.jp-playlist ul删去height属性并添加max-height: calc(27px * 24);
        3.其中第二条中的27px是我项目中.jp-playlist li的高度,24是歌曲数目
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复