一款好看又简洁的HTML5音乐播放器skPlayer

一款好看又简洁的HTML5音乐播放器skPlayer

skPlayer是一款好看又简洁的HTML5网页音乐播放器,同时支持自定义歌单和网易云音乐
1
  • 详情内容
  • 留言点评

20180108151826.png

skPlayer是一款好看又简洁的HTML5网页音乐播放器,同时支持自定义歌单和网易云音乐歌单。skPlayer3.0仅需一个JS文件就可实现播放器的调用,播放列表可隐藏,各项控制参数可以单独自行选择启用。

skPlayer3.0播放器应用实例代码:

<div id="skPlayer"></div>
<script src="http://www.chengfeilong.com/skPlayer/dist/skPlayer.min.js"></script>    
<script>    
var player = new skPlayer({    
autoplay: true,    
music: {    
type: 'cloud',    
source: 317921676    
}    
});    
</script>

skPlayer3.0参数配置说明:

配置网易云音乐歌单方式:

var player = new skPlayer({
    autoplay: true,
    //可选项,自动播放,默认为false,true/false
    listshow: true,
    //可选项,列表显示,默认为true,true/false
    mode: 'listloop',
    //可选项,循环模式,默认为'listloop'
    //'listloop',列表循环
    //'singleloop',单曲循环
    music: {
    //必需项,音乐配置
        type: 'cloud',
        //必需项,网易云方式指定填'cloud'
        source: 317921676
        //必需项,网易云音乐歌单id
        //登录网易云网页版,在网页地址中拿到
        // ... playlist?id=317921676
    }
});

自定义配置音乐文件方式:

var player = new skPlayer({
     ... 
    //可选项配置同上
    music: {
    //必需项,音乐配置
        type: 'file',
        //必需项,自配置文件方式指定填'file'
        source: [
        //必需项,音乐文件数组
            {
                name: '打呼',
                //必需项,歌名
                author: '潘玮柏&杨丞琳',
                //必需项,歌手
                src: 'xxx.mp3',
                //必需项,音乐文件
                cover: 'xxx.jpg'
                //必需项,封面图片
            },
             ... 
        ]
    }
});

API

播放

player.play();

暂停

player.pause();

播放/暂停切换

player.toggle();

上一首

player.prev();

下一首

player.next();

切歌

player.switchMusic(index);
//index为列表中歌曲前对应的序号

列表显示/隐藏切换

player.toggleList();

静音/正常切换

player.toggleMute();

单曲循环/列表循环切换

player.switchMode();

销毁

player.destroy();
//skPlayer默认只能存在一个实例
//需要重新配置时调用该方法销毁当前实例

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
1

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看

老铁,为了让大家习惯在手机上用支付宝,年底马云家又疯狂了,用手机支付宝搜索“7629723”可以抢红包在实体店消费,玩法已升级,红包种类和金额都更嗨!