黑色侧边悬浮MP3音乐播放器代码

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

<div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application" aria-label="media player" style="left: 0px; height: 175px; bottom: 20px;">

<div class="jp-type-playlist">

<div id="jquery_jplayer_N" class="jp-jplayer" style="width: 90px; height: 90px;">

<audio id="jp_audio_0" preload="metadata" src="9.mp3" title="那英"></audio>

<video id="jp_video_0" preload="metadata" title="那英" style="width: 0px; height: 0px;"></video>

</div>

<div class="jp-gui">

<div class="jp-video-play" style="display: none;">

<button class="jp-video-play-icon" role="button" tabindex="0">播放</button>

</div>

<div class="jp-interface">

<div class="jp-progress">

<div class="jp-seek-bar" style="width: 100%;">

<div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>

</div>

</div>

<div class="jp-current-time" role="timer" aria-label="time">04:11</div>

<div class="jp-duration" role="timer" aria-label="duration">04:17</div>

<div class="jp-controls-holder">

<div class="jp-controls">

<button class="jp-previous" role="button" tabindex="0">上一曲</button>

<button class="jp-play" role="button" tabindex="0">播放</button>

<button class="jp-next" role="button" tabindex="0">下一曲</button>

<button class="jp-stop" role="button" tabindex="0">暂停</button>

</div>

<div class="jp-volume-controls">

<button class="jp-mute" role="button" tabindex="0">静音</button>

<button class="jp-volume-max" role="button" tabindex="0">最大音量</button>

<div class="jp-volume-bar">

<div class="jp-volume-bar-value" style="width: 10%;"></div>

</div>

</div>

<div class="jp-toggles">

<button class="jp-repeat" role="button" tabindex="0">重复</button>

<button class="jp-shuffle" role="button" tabindex="0">随机</button>

<!--<button class="jp-full-screen" role="button" tabindex="0">全屏</button>-->

</div>

</div>

<div class="jp-details" style="display: none;">

<div class="jp-title" aria-label="title">那英</div>

</div>

</div>

</div>

<div class="jp-playlist">

<div class="jp-playlist-box" style="height: 80px;">

<ul style="height: 1000px; display: block; top: 0px;">

<li>

<div>

<a href="javascript:;" class="jp-playlist-item-remove">×</a>

<a href="javascript:;" class="jp-playlist-item" tabindex="0">默 <span class="jp-artist" style="transform: rotate(180deg);"> - 英</span></a>

</div>

</li>

<li class="">

<div>

<a href="javascript:;" class="jp-playlist-item-remove">×</a>

<a href="javascript:;" class="jp-playlist-item" tabindex="0">Ellens Gesang III D839 <span class="jp-artist" style="transform: rotate(180deg);"> - Geoffrey Parsons</span></a>

</div>

</li>

<li>

<div>

<a href="javascript:;" class="jp-playlist-item-remove">×</a>

<a href="javascript:;" class="jp-playlist-item" tabindex="0">Fire <span class="jp-artist" style="transform: rotate(180deg);"> - Said The Sky</span></a>

</div>

</li>

<li class="jp-playlist-current" style="display: list-item;">

<div>

<a href="javascript:;" class="jp-playlist-item-remove">×</a>

<a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">兰若词 <span class="jp-artist" style="transform: rotate(180deg);"> - 菲</span></a>

</div>

</li>

</ul>

</div>

</div>

<div class="jp-no-solution" style="display: none;">

<span style="transform: rotate(180deg);">升级需要</span> 您浏览器赞不支持播放，请更新版本

<a href="r" target="_blank">Flash插件</a>.

</div>

</div>

<!--歌曲列表滚动条-->

<div class="scrollBar" style="display: block;">

<div class="bar" style="top: 0px;"></div>

</div>

<!--播放器展开隐藏按钮-->

<button type="button" class="folded_bt" title="点击收缩" id="btnfold" style="top: 52px;">

  <span style="transform: rotate(180deg);"></span>

</button>

<div id="listRemove" style="display: block;"></div>

<!--移除全部歌曲按钮-->

<div id="listClose"></div>

<!--歌曲列表展开收缩按钮-->

</div>

书写css代码。

.jp-audio :focus, .jp-audio-stream :focus, .jp-video :focus { outline: 0 }

 .jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner {

 border: 0

}

.jp-audio-stream, .jp-video { /*外框*/

width: 480px; height: 94px; position: fixed; left: -480px; bottom: 20px; z-index: 999; font-size: 16px; font-family: "微软雅黑"; line-height: 1.6; color: #fff; border-radius: 4px; background: #130519de; }

.jp-controls-holder { /*控件区*/

width: 440px; margin: 0 auto; clear: both; overflow: hidden; position: absolute; left: 82px; top: 25px; }

.jp-controls { width: 134px; margin-left: 150px; }

.jp-controls button { display: block; float: left; border-radius: 50%; overflow: hidden; text-indent: -999px; border: none; cursor: pointer; }

/*控件icons*/

.jp-play { width: 40px; height: 40px; background: url(../images/player.png) no-repeat; }

.jp-play:hover { background: url(../images/player.png) -41px 0 no-repeat; }

.jp-state-playing .jp-play { background: url(../images/player.png) 0 -42px no-repeat; }

.jp-state-playing .jp-play:hover { background: url(../images/player.png) -41px -42px no-repeat; }

.jp-next, .jp-previous, .jp-stop { width: 28px; height: 28px; margin-top: 6px; }

.jp-stop { background: url(../images/player.png) 0 -83px no-repeat; margin-left: 10px; }

.jp-stop:hover { background: url(../images/player.png) -29px -83px no-repeat; }

.jp-previous { background: url(../images/player.png) 0 -112px no-repeat; }

.jp-previous:hover { background: url(../images/player.png) -29px -112px no-repeat; }

.jp-next { background: url(../images/player.png) 0 -141px no-repeat; }

.jp-next:hover { background: url(../images/player.png) -29px -141px no-repeat; }

.jp-progress { overflow: hidden; background-color: #ddd; }

.jp-audio .jp-progress { position: absolute; top: 32px; height: 15px; }

.jp-audio .jp-type-single .jp-progress { left: 110px; width: 186px; }

.jp-audio .jp-type-playlist .jp-progress { left: 166px; width: 130px; }

.jp-video .jp-progress { top: 0; left: 0; width: 100%; height: 4px; }

/*进度条*/

.jp-seek-bar { background: url(../images/player.png) 0 -202px repeat-x; width: 0; height: 100%; cursor: pointer; }

.jp-play-bar { background-color: #7E60AD; width: 0; height: 100%; }

.jp-seeking-bg { background: url(../images/player.seeking.gif); }

/*音量控制*/

.jp-volume-controls { width: 100px; position: absolute; top: 32px; left: 260px; }

.jp-video .jp-volume-controls { top: 12px; left: 30px; }

.jp-volume-controls button { display: block; position: absolute; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }

.jp-mute, .jp-volume-max { width: 18px; height: 15px; }

.jp-volume-max { left: 74px; }

.jp-mute { background: url(../images/player.png) 0 -170px no-repeat; }

.jp-mute:hover { background: url(../images/player.png) -19px -170px no-repeat; }

.jp-state-muted .jp-mute { background: url(../images/player.png) -60px -170px no-repeat; }

.jp-state-muted .jp-mute:hover { background: url(../images/player.png) -79px -170px no-repeat; }

.jp-volume-max { background: url(../images/player.png) 0 -186px no-repeat; }

.jp-volume-max:hover { background: url(../images/player.png) -19px -186px no-repeat; }

.jp-volume-bar { position: absolute; overflow: hidden; background-color: #5C4169; top: 6px; left: 20px; width: 50px; height: 3px; cursor: pointer; border-radius: 3px; }

.jp-volume-bar-value { background-color: #6646A1; width: 0; height: 5px }

.jp-audio .jp-time-holder { position: absolute; top: 50px; }

.jp-audio .jp-type-single .jp-time-holder { left: 110px; width: 186px; }

.jp-audio .jp-type-playlist .jp-time-holder { left: 166px; width: 130px; }

.jp-current-time, .jp-duration { width: 60px; font-size: 10px; color: #dadada; }

.jp-current-time { float: left; display: inline; cursor: default; }

.jp-duration { float: right; display: inline; text-align: right; cursor: pointer; }

/*播放时间*/

.jp-video .jp-current-time { font-size: 10px; position: absolute; left: 115px; top: 70px; }

.jp-video .jp-duration { font-size: 10px; position: absolute; right: 35px; top: 70px; }

.jp-details { font-weight: 700; text-align: center; cursor: default; }

.jp-details, .jp-playlist { width: 100%; background-color: #ccc; }

.jp-type-playlist .jp-details, .jp-type-single .jp-details { border-top: none; }

.jp-details .jp-title { margin: 0; padding: 5px 20px; font-size: .72em; font-weight: 700; }

/*播放列表*/

.jp-playlist-box { width: 100%; height: 0px; position: absolute; left: 0; top: 94px; overflow: hidden; }

.jp-playlist ul { list-style-type: none; margin: 0; padding: 0px; font-size: 12px; background: rgba(0, 0, 0, 0.4); width: 100%; height: 200px; position: absolute; left: 0; top: 0px; font-family: "宋体"; }

.jp-playlist li { height: 27px; line-height: 27px; padding: 0 0 0 27px; list-style-type: decimal; list-style-position: inside; }

.jp-playlist li div { display: inline; }

div.jp-type-playlist div.jp-playlist li.jp-playlist-current { background: rgba(0, 0, 0, .4); }

div.jp-type-playlist div.jp-playlist a { color: #7E60AD; font-family: "宋体"; text-decoration: none; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-current, div.jp-type-playlist div.jp-playlist a:hover, div.jp-type-playlist div.jp-playlist li.jp-playlist-current span.jp-artist, div.jp-type-playlist div.jp-playlist a:hover span { color: #665975; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { float: right; display: inline; text-align: right; margin-right: 35px; color: #efefef; }

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { color: #5C4169; }

span.jp-artist { font-size: 12px; }

/*歌手名*/

/*循环、随机*/

.jp-video .jp-toggles { width: 100px; position: absolute; right: 27px; margin: 10px 0 0; }

.jp-toggles button { display: block; float: left; width: 25px; height: 18px; text-indent: -9999px; line-height: 100%; border: none; cursor: pointer; }

.jp-repeat { background: url(../images/player.png) 0 -290px no-repeat; }

.jp-repeat:hover { background: url(../images/player.png) -30px -290px no-repeat; }

.jp-state-looped .jp-repeat { background: url(../images/player.png) -60px -290px no-repeat; }

.jp-state-looped .jp-repeat:hover { background: url(../images/player.png) -90px -290px no-repeat; }

.jp-shuffle { background: url(../images/player.png) 0 -270px no-repeat; margin-left: 5px; }

.jp-shuffle:hover { background: url(../images/player.png) -30px -270px no-repeat; }

.jp-state-shuffled .jp-shuffle { background: url(../images/player.png) -60px -270px no-repeat; }

.jp-state-shuffled .jp-shuffle:hover { background: url(../images/player.png) -90px -270px no-repeat; }

/*滚动条*/

html, body, header, nav, footer, div, ul, ol, li, p, form, input, a, span, em, i, strong, b, font, img { margin: 0; padding: 0; list-style: none; border: none; }

.jp-video .scrollBar { width: 4px; height: 80px; background: #3A3B3B; position: absolute; right: 0; bottom: 0; border-radius: 4px; display: none; }

.jp-video .scrollBar .bar { width: 4px; height: 25px; background: #6646A1; position: absolute; left: 0; top: 0px; border-radius: 4px; cursor: pointer; }

.jp-video .folded_bt { width: 20px; height: 80px; display: block; position: absolute; right: -20px; top: 5px; border: none; background: #111; cursor: pointer; padding: 0; margin: 0; }

.jp-video .folded_bt span { width: 20px; height: 30px; display: block; background: url(../images/player.png) no-repeat -90px -6px; }

.jp-video .folded_bt:hover span { background-position: -116px -6px; }

#listRemove { width: 20px; height: 20px; display: none; position: absolute; right: 5px; bottom: 2px; cursor: pointer; background: url(../images/player.png) no-repeat -93px -53px; }

#listRemove:hover { background-position: -119px -53px; }

#listClose { width: 30px; height: 30px; cursor: pointer; position: absolute; right: 0px; top: 0; background: url(../images/player.png) no-repeat -88px -85px; }

#listClose:hover { background-position: -115px -85px; }

书写并添加js代码。这些js在网站上可以下载是个js包

<script src="js/jquery.min.js"></script>

<!--播放器js-->

<script src="js/player.js"></script>

<script src="js/playlist.js"></script>

<script src="js/player_database.js"></script>

<!--播放器js-->

代码整体结构。

查看效果。