css+js实现带播放列表简洁音乐播放器代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：css+js实现带播放列表简洁音乐播放器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body,div,p {
    	padding: 0;
    	margin: 0;
    	font-family: "微软雅黑";
    }
    body{background-color: #1d1d1d}
    a {
    	text-decoration: none;
    	color: #666;
    }
    
    a:hover {
    	color: #DDD;
    }
    
    ul li{
    	list-style: none;
    }
    
    
    .wrapper {
    	
    }
    
    .bz_music {
        width: 700px;
        height: 380px;
       	margin: 150px auto;
       	box-shadow: 0 0 40px rgba(0,0,0,0.8);
       	border-radius: 10px;
       	background: #222;
       	position: relative;
    }
    
    /*上半部分*/
    
    .bz_music .music_info {
    	width: 500px;
    	height: 150px;
    	background: #000;
    	border-radius: 10px 10px 0 0;
    	position: relative;
    }
    
    .music_info .left_photo {
    	width: 100px;
    	height: 100px;
    	background-color: #fff;
    	border-radius: 50%;
    	position: absolute;
    	top: 15%;
    	left: 20px;	
    	overflow: hidden;
    	transition: all 1s;
    }
    
    .music_info .left_photo img {
    	width: 100px;
    	height: 100px;
    	transform:rotate(0deg);
    }
    
    .music_info .right_btn {
    	width: 30px;
    	height: 100px;
    	color: #666;
    	position: absolute;
    	top: 30%;
    	right: 20px;
    	
    }
    
    .music_info .right_btn .random {
    	display: block;
    	margin-bottom: 10px;
    }
    
    .music_info .right_btn .list {
    	display: block;
    	margin-bottom: 10px;
    	color: #DDD;
    }
    
    .music_info .right_btn .heart {
    	display: block;
    }
    
    .music_info .center_list {
    	width: 500px;
    	height: 150px;
    	position: relative;
    }
    
    .music_info .center_list ul {
    	position: absolute;
        top: 35%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    /*.music_info .center_list ul li {
    	display: none;
    }
    
    .music_info .center_list ul .list_current {
    	display: block;
    }*/
    
    .music_info .center_list .list_title {
    	font-size: 30px;
    	display: block;
    	color: rgba(255,255,255,0.4);
    	margin-bottom: 10px;
    	text-align: center;
    	white-space: nowrap;
    }
    
    .music_info .center_list .list_singer {
    	display: block;
    	color: rgba(255,255,255,0.4);
    	text-align: center;
    }
    
    .music_info .process {
    	width: 100%;
    	height: 5px;
    	background: #000;
    	display: block;
    	position: absolute;
    	bottom: 0;
    	cursor: pointer;
    }
    
    .music_info .process .process_slide {
    	width: 0;
    	height: 5px;
    	display: block;
    	background: #ed553b;
    }
    
    
    /*下半部分*/
    
    .bz_music .music_controls {
    	width: 500px;
    	height: 210px;
    	color: #666;
    	text-align: center;
    	/*background: rgba(152, 46, 75, 0.6);*/
    }
    
    .music_controls .time {
    	width: 100%;
    	font-size: 52px;
    	padding: 15px 0 20px;
    }
    
    .music_controls .play_controls {
    	width: 100%;
    	font-size: 40px;
    	padding: 10px 0;
    }
    
    .music_controls .play_controls [class^="btn_"]{
    	padding: 0 50px;
    }
    
    .music_controls .volume {
    	width:300px;
    	height:2px;
    	background: #fff;
    	margin: 10px auto;
    	position: relative;
    	font-size: 20px;
    	cursor: pointer;
    }
    
    .music_controls  .volumeOff {
    	position: absolute;
    	top: 355px;
    	left: 80px;
    }
    
    .music_controls  .volumeUp {
    	position: absolute;
    	top: 355px;
    	right: 270px;
    }
    
    .music_controls .volume .btn_slide {
    	width: 50%;
    	height: 2px;
    	display: block;
    	background: #ed553b;
    }
    
    /*播放列表*/
    
    .bz_music .play_list_area {
    	width: 200px;
    	height: 360px;
       	border-radius: 10px;
       	background: #222;
       	position: absolute;
       	top: 0;
       	right: 0;
       	overflow-y: auto;
    }
    
    .bz_music .play_list {
    	padding: 0;
    	
    }
    
    .bz_music .play_list .current {
    	background: #ddd;
    }
    
    .bz_music .play_list li {
    	width: 100%;
    	height: 30px;
    	line-height: 30px;
    	display: block;
    	color: #ddd;
    	cursor: pointer;
    	font-size: 14px;
    } 
    
    .bz_music .play_list .current {
    	background: #333;
    }
    
    .bz_music .play_list .list_title {
    	margin-left: 10px;
    	float: left;
    }
    
    .bz_music .play_list .list_time {
    	margin-right: 10px;
    	float: right;
    }
    </style>
</head>

<body>
    <audio id="player" src="audio/a1.mp3"></audio>
    <!--<div class="wrapper">-->
    <div id="bz_music" class="bz_music">
        <div class="music_info">
            <div class="left_photo">
                <a href="javascript:;">
                    <img id="left_photo" src="//repo.bfw.wiki/bfwrepo/icon/60d1c2f3e1d1e.png" alt="" />
                </a>
            </div>
            <div class="center_list">
                <ul>
                    <li class="list_current">
                        <a href="javascript:;">
                            <span id="list_title" class="list_title">Running Away</span>
                        </a>
                        <a href="javascript:;">
                            <span id="list_singer" class="list_singer">Tobu</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="right_btn">
                <a id="btn_random" href="javascript:;">
                    <span class="random fa fa-random"></span>
                </a>
                <a id="btn_list" href="javascript:;" onclick="showMusicList()">
                    <span id="showHide" class="list fa fa-list"></span>
                </a>
                <a id="btn_heart" href="javascript:;">
                    <span class="heart fa fa-heart"></span>
                </a>

            </div>
            <div id="process" class="process">
                <span id="process_slide" class="process_slide"></span>
            </div>
        </div>
        <div class="music_controls">
            <div id="time" class="time">00:00</div>
            <div class="play_controls">
                <a id="btnBackward" href="javascript:;" class="btn_back fa fa-backward" onclick="backword()"></a>
                <a id="btnPlay" href="javascript:;" class="btn_play fa fa-play"></a>
                <a id="btnForward" href="javascript:;" class="btn_forward fa fa-forward" onclick="forward()"></a>
            </div>
            <a id="volumeOff" class="volumeOff fa fa-volume-off" href="javascript:;" onclick="volumeOff()"></a>
            <div id="volume" class="volume">
                <span id="volume_slide" class="btn_slide"></span>
            </div>
            <a id="volumeUp" class="volumeUp fa fa-volume-up" href="javascript:;" onclick="volumeUp()"></a>
        </div>
        <div id="play_list_area" class="play_list_area">
            <ul id="play_list" class="play_list">
                <!--动态创建-->
                <!--<li class="current"><span class="list_title">十年</span><span class="list_time">00：00</span></li>
						<li><span class="list_title">动物世界</span><span class="list_time">00：00</span></li>					-->
            </ul>
        </div>
    </div>
    <!--</div>-->
    <script type="text/javascript" charset="utf-8">
        //播放列表
var music_list =[
        {
            "id":"1",
            "name":"Running Away",
            "singer":"Tobu",
            "duration":"00:29",
            "src":".........完整代码请登录后点击上方下载按钮下载查看