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倒数第二行更改你想要的名称

相关插件-音频和视频

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 29922  177

jQuery悬浮HTML5音乐播放器插件QPlayer

一款简洁小巧的HTML5底部悬浮音乐播放器
  音频和视频
 11651  85

基于html5的视频播放器不依赖任何插件

基于html5的播放器插件不依赖任何框架引入即可使用
  音频和视频
 23739  82

jquery音乐播放器

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

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

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

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

    回复
    └(^跃人生ω跃精彩^)┘ 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 以上

    回复
    Break. Dawn。 0
    2017/7/4 18:01:23
    请问下这个播放器的大小和位置是在哪里设置的啊,我想放到一个div里面去,直接加进去就把旁边的div挤开了,刚开始学,不会弄这个qwq
        未曾遗忘的青春0
        2017/7/4 18:54:38
        MC.music({
            width:260
            height:60
            left:
            right:
            .....
            这个和我文档上一样的
        })
        Break. Dawn。0
        2017/7/4 19:26:32

        我把

        <div class="music-bg" style="height: 100%;filter: blur(100px);transition:all 0.3s;" id="music-bg">
            <div class="music-mask"></div>
        </div>

        这段加到我的div里面去的时候为什么会把整个布局给打乱啊,就是所有的div都乱了,而且那个播放器也不见了qwq

        未曾遗忘的青春1
        2017/7/4 20:45:48

        这段代码是body下的代码!你其实可以不用这段代码,musicChanged:function(ret){} 这个方法里面的代码删掉 就ok了    music生成的代码是fixed定位的   不会受影响

    回复
    泡??斌メ 0
    2017/6/22 20:28:41

    加上进度条、音量更完美

        未曾遗忘的青春0
        2017/7/2 22:20:24

        进度条在音乐播放器缩小的情况下是有进度条效果的,音量就没加了   没什么必要  而且也不知道往哪放

    回复
    斯丢彼得啦 0
    2017/6/16 21:49:30
    不可以调音量啊!
        未曾遗忘的青春0
        2017/6/16 22:02:42

        调音量我没有加  用volume  就可以设置或者返回音量 

    回复
取消回复