js音乐播放器

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

js音乐播放器 ie兼容10

music

简洁的音乐播放器插件

插件参数

  • width:music宽度 

  • height:music高度 

  • hasBlur: 是否显示模糊效果

  • blur: 模糊效果的值

  • left:music left 的值

  • right:music right 的值

  • bottom: music bottom 的值

  • top: music top 的值

  • btnBackground:播放暂停按钮的背景色,不包括图标

  • iconColor:播放暂停按钮的图标颜色

  • hasSelect:是否可选择类型 (音乐的类型,在js中以静态数组的形式显示,可以的话从后台获取)

  • musicType:音乐类型   数组类型

  • hasAjax:是否是ajax请求数据,为false  则使用默认的source

  • source:音乐的数据信息  包括 name:名称,singer:歌手,url:音乐地址,img_url:封面地址

  • durationBg:canvas进度条的背景色

  • progressBg:canvas进度条当前状态的背景色方法

  • beforeMusicPlay:function(){}   在音乐播放之前触发 (首次加载的时候)

  • afterMusicLoading:function(){} 在音乐加载成功 可播放之前

  • musicChanged:function(ret){}     音乐切换之后,播放结束 或者点击下一首触发   返回值:index:音乐索引,data:所有的music数据,url:音乐地址

  • getMusicInfo:function(ret){}    获取所有音乐的信息

  MC.music({
      hasAjax:false,
      musicChanged:function(ret){
      var data = ret.data;
      var index = ret.index;
      var imageUrl = data[index].img_url;

      var music_bg = document.getElementById('music-bg');
      music_bg.style.background = 'url('+imageUrl+')no-repeat';
      music_bg.style.backgroundSize = 'cover';
      music_bg.style.backgroundPosition = 'center 30%';
    }
  });

为了方便 我把我自己写的loading插件和music.js放在一起

 MC.music的mc  可以在music.js倒数第二行更改你想要的名称

相关插件-音频和视频

3D音频分析仪

3D音频分析仪,效果那是相当的震撼。
  音频和视频
 10837  75

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 45398  205

jQuery音乐播放插件jPlayer

简洁的音乐插件jPlayer
  音频和视频
 16063  60

jquery音乐播放器

基于Jplayer制作一款音乐播放器,界面简洁漂亮。
  音频和视频
 33479  155

讨论这个项目(33)回答他人问题或分享插件使用方法奖励jQ币

    彦小石 0
    2018/4/8 16:32:41
    如果显示播放进度条的话改怎么改呢
        未曾遗忘的青春0
        2018/4/8 16:36:06
        改好改 关键是你打算放在什么位置
        进度条都是当前时间和音频总时长的比例来算的,通过timeupdate时间使得播放时间变化的时候获取新的进度并重新设置进度条的位置
        彦小石0
        2018/4/8 16:55:50
        想显示在歌名的下面
    回复
    彦小石 0
    2018/4/8 16:12:13
    你建的有前端的qq群吗?
        未曾遗忘的青春0
        2018/4/8 16:15:38
        QQ群:424418160
    回复
    赤毒墨幽 0
    2018/4/3 20:18:39
    你好 我想把这个循环作为标签写进表格的单元格中 每个对应的不同的URL url加载的资源是ftp的有账户和密码 用html的audio标签就是加载不出来ftp的资源 想知道你这个加载ftp的资源可以实现吗 回复
    赤毒墨幽 0
    2018/4/2 16:11:07
    DW is not defined 下的demo正常 我添加进自己的项目就不行了
        未曾遗忘的青春0
        2018/4/2 16:12:49
        你js代码是不是改了?直接引用js就可以了
        赤毒墨幽0
        2018/4/2 17:05:45
        调了半天吃了个饭 显示 jQuery is not defined
        我新下个 全换成新的试试吧
        赤毒墨幽0
        2018/4/2 17:30:43
        换了全新的好了 就是第一首歌不放 一直转圈 jq js学的不行 看来还是直接在项目里用HTML5标签比较稳 就是不支持IE了
    回复
    Ctrl z 0
    2017/12/25 14:01:17

    如何设置弹出的方向向左,而不是向右??

        未曾遗忘的青春0
        2017/12/25 14:04:07

        固定位置靠右  弹出的方向就是向左的    比如你设置right:10px那么  他就是向左的方向展开,向右的话 同理,设置left的值就行了

    回复
    crush 0
    2017/12/23 23:59:54

    加了代码都加进去了,但是按播放后div会乱。。。

        未曾遗忘的青春0
        2017/12/24 0:05:28
        div什么地方乱你能看出来吗?
    回复
    33oN ??120°E 0
    2017/10/28 23:03:07

    请问这个怎么弄成本地音乐啊

        未曾遗忘的青春1
        2017/10/29 0:01:15

        source 属性是设置音乐地址的 你可以把本地音乐的路径放到source里面 包括 名字 歌手 地址 图片信息 填写好了就可以

        33oN ??120°E0
        2017/10/30 10:38:12

        name:'追光者',

        singer:'岑宁儿',

         url:'../music/岑宁儿 - 追光者.mp3',

        我是这样设置的。可是没有用啊。。点播放  没反应啊

    回复
    ╃ 伊人未归 ┽ 0
    2017/8/18 10:47:10
    赞。要是能搜索音乐播放就完美了,不过也没关系,可以自己加
        未曾遗忘的青春0
        2017/8/29 17:37:19

        拓展版本里面有搜索线上歌曲的功能   在我的github里面

        Ctrl z0
        2017/12/25 14:02:29

        git地址多少呀

        未曾遗忘的青春0
        2017/12/25 14:05:00

        地址: https://github.com/IFmiss/music  

    回复
    └(^跃人生ω跃精彩^)┘ 0
    2017/7/14 12:52:22

    初学小白  ,很喜欢你的作品 ,

        未曾遗忘的青春0
        2017/7/14 13:24:08

        喜欢就好!!!

    回复
    Break. Dawn。 0
    2017/7/4 19:59:10

    hhh我找到你说的调大小的地方了,不过为什么会把div打乱还是不知道

        未曾遗忘的青春0
        2017/7/4 20:33:08
        MC.music({
            width: 240,
            height: 60,
            hasAjax: false,
            left: '10%',
            bottom: '10%',
            musicChanged: function(ret) {
                // alert(ret.url);
                // getMusic_buffer(ret.url);
                // return;
                var data = ret.data;
                var index = ret.index;
                var imageUrl = data[index].img_url;
                var music_bg = document.getElementById('music-bg');
                music_bg.style.background = 'url(' + imageUrl + ')no-repeat';
                music_bg.style.backgroundSize = 'cover';
                music_bg.style.backgroundPosition = 'center 30%';
            },
            getMusicInfo: function(data) {},
            musicPlayByWebAudio: function(ret) {},
        });

        不会啊  我试了一下,没问题啊 

        为了更好的动画过渡   建议宽度最好在240 以上   高度 56 以上

    回复
取消回复