SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS

1.页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大学生心理健康管理系统</title>
    <link rel="icon" href="images/icon.png">
    <link type="text/css" rel="stylesheet" href="css/music.css">

</head>
<body>

    <header>
        <img src="images/logo.jpg">
        <hr noshade="noshade" color="white">
    </header>

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

    <footer>
        <p>Copyright © 2017-2018  长沙医学院信息工程学院 张宁 版权所有</p>
    </footer>

</body>
</html>

CSS代码：

body{
    height: auto;
    width: auto;
    background-color: #2facd4;
}

header{
    text-align: center;
}

#skPlayer{
    margin: auto;
    margin-top:100px;
}

footer{
    margin-top: 260px;
    text-align: center;
}

2.效果：

SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS

3.下载地址：http://download.****.net/download/mzd8341/10201372

SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS

相关推荐