HTML5列表音乐播放器Lmusic rem自适应 (兼容所有移动设备以及现代pc浏览器脱离jquery也可独立运行)

原创作品，版权归 laijiadayuan.com 所有，使用请保留出处.

组件信息

this.widgetInfo = {
   fileName   : "lkmusic_visualizer",
   version    : "1.0.0",
   author     : "windKe",
   createTime : "2016 10 5",
   updateTime : "2016 11 2"
};

版本记录

2016-10-5 1.0.0 创建版本

新增音乐可视化，通过配置 lkmusic.appcache 可以实现离线缓存功能，修复播放模式错乱，以及音乐播放完成以后，点击播放按钮失效的问题。 新增移动端自适应。新播放器弃用像素 px 布局，采用全新的 rem 布局，实现移动端自适应。以及其他一些 bug 修复。

参数配置

参数名

类型

默认值

可选值

说明

musicList

Array

musicList.js(项目目录里面需要引入音乐播放器组件之前引入)

自定义

歌曲列表

defaultVolume

Number

0.5

0-1

默认音量

autoPlay

Boolean

false

true or false

是否自动播放

defaultMode

Number

1

1,2,3

//播放模式 随机播放 按顺序播放 还是循环播放

offlineMode

Boolean

false

true or false

是否支持离线缓存（此功能暂时不能使用）

showrightmenu

Boolean

false

true or false

是否禁用播放器上面的右键功能

gradientleft

String

#52b228

颜色字符串能够支持 hsl、rgba、rgb 等格式

自行测试

gradientmiddle

String

#55bd27

颜色字符串能够支持 hsl、rgba、rgb 等格式

自行测试

gradientright

String

#52b228

颜色字符串能够支持 hsl、rgba、rgb 等格式

自行测试

gradienttop

String

#f5f325

颜色字符串能够支持 hsl、rgba、rgb 等格式

自行测试

callback

Function

function(muicObjec){}

自定义

播放器组件初始化成功之后的毁掉函数返回实例对象

基础属性和方法

参数名

类型

默认值

示例

说明

widgetInfo

Object

-

-

组件信息

setVolume

Function

-

-

设置音量

play

Function

-

-

播放

pause

Function

-

-

暂停播放

CSS 样式

                                `/**
                                     * lkmusic
                                     * Author:lk
                                     * Version:1.0.0
                                     * url: project/lkmusic/index.html
                                     */
                                    .f-cb {
                                      height: 0; }

                                    .f-cb:after {
                                      display: block;
                                      content: " ";
                                      height: 0;
                                      visibility: hidden;
                                      clear: both; }

                                    .f-ib {
                                      display: inline-block; }

                                    .f-din {
                                      display: inline; }

                                    .f-dn {
                                      display: none; }

                                    .f-db {
                                      display: block; }

                                    .f-fl {
                                      float: left; }

                                    .f-fr {
                                      float: right; }

                                    .f-fwn {
                                      font-weight: normal; }

                                    .f-fwb {
                                      font-weight: bold; }

                                    .f-tal {
                                      text-align: left; }

                                    .f-tac {
                                      text-align: center; }

                                    .f-tar {
                                      text-align: right; }

                                    .f-oh {
                                      overflow: hidden;
                                      zoom: 1;
                                      clear: both; }

                                    .f-tdn {
                                      text-decoration: none !important; }

                                    .f-vam, .f-vama * {
                                      vertical-align: middle; }

                                    .f-wsn {
                                      word-wrap: normal;
                                      white-space: nowrap; }

                                    .f-pre {
                                      overflow: hidden;
                                      text-align: left;
                                      white-space: pre-wrap;
                                      word-wrap: break-word;
                                      word-break: break-all; }

                                    .f-wwb {
                                      white-space: normal;
                                      word-wrap: break-word;
                                      word-break: break-all; }

                                    .f-ti {
                                      overflow: hidden;
                                      text-indent: -30000px; }

                                    .f-lhn {
                                      line-height: normal; }

                                    .f-toe {
                                      overflow: hidden;
                                      word-wrap: normal !important;
                                      white-space: nowrap;
                                      text-overflow: ellipsis; }

                                    .f-usn {
                                      -webkit-user-select: none;
                                      -moz-user-select: none;
                                       -ms-user-select: none;
                                           user-select: none; }

                                    .f-bsb {
                                      box-sizing: border-box; }

                                    .f-cp {
                                      cursor: pointer; }

                                    /*SMusic*/
                                    .grid-music-container .music-container-spectrum {
                                      width: 100%;
                                      height: 100%;
                                      position: absolute;
                                      left: 0;
                                      top: 0;
                                      z-index: 2; }

                                    .grid-music-container .music-container-blur-bg {
                                      width: 100%;
                                      height: 100%;
                                      position: absolute;
                                      left: 0;
                                      top: 0;
                                      z-index: 1;
                                      background: url(../images/music_bg.jpg);
                                      background-size: cover;
                                      -webkit-filter: saturate(5) contrast(1);
                                              filter: saturate(5) contrast(1); }

                                    .grid-music-container .m-music-play-wrap {
                                      height: 8.5rem;
                                      position: relative;
                                      padding-left: 7rem;
                                      z-index: 3; }

                                    .grid-music-container .u-cover {
                                      width: 6.05rem;
                                      height: 6.05rem;
                                      overflow: hidden;
                                      background: url(../images/music_icons_white.png) 0 0 no-repeat;
                                      position: absolute;
                                      top: 0;
                                      left: 0;
                                      border-radius: 50%; }

                                    .grid-music-container .u-cover img {
                                      display: block;
                                      width: 100%;
                                      height: auto;
                                      max-height: 100%;
                                      border: 2px solid #eee; }

                                    .grid-music-container .u-cover.play {
                                      -webkit-animation: Circle 10s linear infinite 0s forwards;
                                              animation: Circle 10s linear infinite 0s forwards; }

                                    .grid-music-container .u-cover.paused {
                                      -webkit-animation-play-state: paused;
                                              animation-play-state: paused; }

                                    @-webkit-keyframes Circle {
                                      from {
                                        -webkit-transform: rotate(0deg);
                                                transform: rotate(0deg); }
                                      to {
                                        -webkit-transform: rotate(360deg);
                                                transform: rotate(360deg); } }
                                    @keyframes Circle {
                                      from {
                                        -webkit-transform: rotate(0deg);
                                                transform: rotate(0deg); }
                                      to {
                                        -webkit-transform: rotate(360deg);
                                                transform: rotate(360deg); } }
                                    .grid-music-container .m-now-info {
                                      height: 100%; }

                                    .grid-music-container .m-now-info h1 {
                                      font-weight: normal;
                                      text-overflow: ellipsis;
                                      white-space: nowrap;
                                      overflow: hidden; }

                                    .grid-music-container .m-now-info h1 strong {
                                      font-size: 0.9rem;
                                      color: #fff;
                                      font-weight: normal; }

                                    .grid-music-container .m-now-info h1 small {
                                      margin-left: 1rem;
                                      font-size: 0.7rem;
                                      color: #fff; }

                                    .grid-music-container .m-now-controls {
                                      position: relative; }

                                    .grid-music-container .m-now-controls .u-control {
                                      display: inline-block;
                                      vertical-align: middle;
                                      font-size: 0;
                                      overflow: hidden; }

                                    .grid-music-container .m-now-controls .u-process {
                                      width: calc(100% - 6.5rem);
                                      height: 0.2rem;
                                      position: relative;
                                      background-color: #cecfd4;
                                      cursor: pointer; }

                                    .grid-music-container .m-now-controls .u-process .buffer-process, .grid-music-container .m-now-controls .u-process .current-process {
                                      display: block;
                                      width: 0;
                                      height: 0.2rem;
                                      position: absolute;
                                      top: 0;
                                      left: 0;
                                      background-color: #efa05b;
                                      z-index: 1; }

                                    .grid-music-container .m-now-controls .u-process .buffer-process {
                                      z-index: 0;
                                      background-color: #c1c2c0; }

                                    .grid-music-container .m-now-controls .u-time {
                                      margin-left: 0.5rem;
                                      font-size: 0.6rem;
                                      color: #fff; }

                                    .grid-music-container .m-now-controls .u-volume {
                                      overflow: visible;
                                      text-align: center;
                                      position: relative;
                                      margin-left: 1rem;
                                      float: right; }

                                    .grid-music-container .u-volume .volume-process {
                                      width: 0.15rem;
                                      height: 2.5rem;
                                      background: #cecfd4;
                                      position: absolute;
                                      top: -2.7rem;
                                      left: 0.3rem;
                                      cursor: pointer;
                                      visibility: hidden; }

                                    .grid-music-container .u-volume .volume-process.show {
                                      visibility: visible; }

                                    .grid-music-container .u-volume .volume-process .volume-current,
                                    .grid-music-container .u-volume .volume-process .volume-event {
                                      display: inline-block;
                                      width: 0.15rem;
                                      height: 50%;
                                      background-color: #efa05b;
                                      position: absolute;
                                      left: 0;
                                      bottom: 0;
                                      -webkit-transition: height .2s linear;
                                              transition: height .2s linear; }

                                    .grid-music-container .u-volume .volume-process .volume-event {
                                      width: 1.05rem;
                                      left: -0.5rem;
                                      background: none;
                                      height: 100%;
                                      z-index: 1; }

                                    .grid-music-container .u-volume .volume-process .volume-bar {
                                      display: inline-block;
                                      width: 0.4rem;
                                      height: 0.4rem;
                                      border-radius: 100%;
                                      background-color: #fff;
                                      border: 1px solid #a8a9a7;
                                      position: absolute;
                                      left: -0.15rem;
                                      bottom: 50%;
                                      -webkit-transition: bottom .2s linear;
                                              transition: bottom .2s linear; }

                                    .grid-music-container .u-volume .volume-process .volume-bar:hover,
                                    .grid-music-container .u-volume .volume-process .volume-bar:active {
                                      background-color: #f1f2f0; }

                                    .grid-music-container .u-volume .volume-control {
                                      display: inline-block;
                                      width: 0.9rem;
                                      height: 0.9rem;
                                      background-image: url(../images/music_icons_white.png);
                                      background-repeat: no-repeat;
                                      background-position: -7rem -4rem;
                                      background-size: 15.5rem 6.05rem;
                                      cursor: pointer; }

                                    .grid-music-container .u-volume .volume-control:hover {
                                      background-position: -7.9rem -4rem; }

                                    .grid-music-container .u-volume .volume-control.muted {
                                      background-position: -7rem -4.9rem; }

                                    .grid-music-container .u-volume .volume-control.muted:hover {
                                      background-position: -7.9rem -4.9rem; }

                                    .grid-music-container .m-music-list-wrap {
                                      margin-left: 0;
                                      margin-right: 0;
                                      height: 6rem;
                                      border: 1px solid rgba(255, 255, 255, 0.7);
                                      overflow-x: hidden;
                                      overflow-y: auto;
                                      position: relative;
                                      z-index: 3;
                                      background-color: rgba(0, 0, 0, 0.3); }

                                    .grid-music-container .m-music-list-wrap li {
                                      display: block;
                                      line-height: 1.5rem;
                                      height: 1.5rem;
                                      overflow: hidden;
                                      text-overflow: ellipsis;
                                      padding: 0 10px;
                                      cursor: pointer;
                                      color: #fff;
                                      font-size: 0.8rem;
                                      -webkit-transition: all 0.5s ease-in;
                                              transition: all 0.5s ease-in; }

                                    .grid-music-container .m-music-list-wrap li strong {
                                      font-size: 0.8rem;
                                      font-weight: normal; }

                                    .grid-music-container .m-music-list-wrap li:hover, .grid-music-container .m-music-list-wrap li.current {
                                      background-color: rgba(255, 255, 255, 0.7);
                                      color: #efa05b; }

                                    .grid-music-container .m-music-list-wrap li.current {
                                      background-color: transparent; }

                                    .grid-music-container .m-play-controls {
                                      margin: 0.5rem 0; }

                                    .grid-music-container .m-play-controls a {
                                      display: inline-block;
                                      vertical-align: middle; }

                                    .grid-music-container .m-play-controls .u-play-btn {
                                      display: inline-block;
                                      width: 1.5rem;
                                      height: 1.5rem;
                                      margin-right: 0.75rem;
                                      cursor: pointer; }

                                    .u-play-btn {
                                      background-image: url(../images/music_icons_white.png);
                                      background-repeat: no-repeat;
                                      background-position: -220px 0;
                                      background-size: 15.5rem 6.05rem; }

                                    /*310 121*/
                                    .u-play-btn.prev, .u-play-btn.next {
                                      background-position: -11rem 0; }

                                    .u-play-btn.prev:hover, .u-play-btn.next:hover {
                                      background-position: -11rem -1.8rem; }

                                    .u-play-btn.prev {
                                      -webkit-transform: rotate(-180deg);
                                          -ms-transform: rotate(-180deg);
                                              transform: rotate(-180deg); }

                                    .u-play-btn.play {
                                      background-position: -12.5rem 0; }

                                    .u-play-btn.play:hover {
                                      background-position: -12.5rem -1.8rem; }

                                    .u-play-btn.paused {
                                      background-position: -14rem 0; }

                                    .u-play-btn.paused:hover {
                                      background-position: -14rem -1.8rem; }

                                    .u-play-btn.mode {
                                      width: 1rem !important;
                                      height: 0.9rem !important;
                                      margin-right: 0.5rem !important; }

                                    .u-play-btn.mode-list {
                                      background-position: -9.05rem -4.9rem;
                                      margin-left: calc(100% - 16rem); }

                                    .u-play-btn.mode-list.current {
                                      background-position: -11.05rem -4.9rem; }

                                    .u-play-btn.mode-random {
                                      background-position: -10.05rem -4rem; }

                                    .u-play-btn.mode-random.current {
                                      background-position: -12.05rem -4rem; }

                                    .u-play-btn.mode-single {
                                      background-position: -9.05rem -4rem; }

                                    .u-play-btn.mode-single.current {
                                      background-position: -11.05rem -4rem; }

                                    /*姝岃瘝*/
                                    .grid-music-container .m-music-lyric-wrap {
                                      width: 100%;
                                      height: 12.5rem;
                                      position: relative;
                                      right: 0;
                                      top: 1rem;
                                      overflow: hidden;
                                      z-index: 9; }

                                    .grid-music-container .m-music-lyric-wrap .inner-bg {
                                      width: 100%;
                                      height: 100%;
                                      position: absolute;
                                      left: 0;
                                      top: 0;
                                      z-index: 2; }

                                    .grid-music-container .m-music-lyric-wrap .inner {
                                      position: absolute;
                                      top: 1rem;
                                      left: 1rem;
                                      right: 1rem;
                                      bottom: 1rem;
                                      overflow-x: hidden;
                                      overflow-y: auto;
                                      z-index: 3; }

                                    .grid-music-container .m-music-lyric-wrap .inner ul {
                                      position: absolute;
                                      width: 100%;
                                      top: 0;
                                      left: 0;
                                      overflow: hidden;
                                      -webkit-transition: all .5s ease-in;
                                              transition: all .5s ease-in; }

                                    .grid-music-container .m-music-lyric-wrap ul li {
                                      display: block;
                                      line-height: 1.5rem;
                                      height: 1.5rem;
                                      overflow: hidden;
                                      text-align: center;
                                      font-size: 0.9rem;
                                      color: #fff;
                                      -webkit-transition: all 0.5s ease-in;
                                              transition: all 0.5s ease-in;
                                      text-shadow: 0.1rem 0.15rem 0.25rem rgba(228, 175, 129, 0.6); }

                                    .grid-music-container .m-music-lyric-wrap ul li.current {
                                      color: #efa05b;
                                      font-size: 1rem;
                                      font-weight: bold;
                                      -webkit-transform: scale(1.3);
                                          -ms-transform: scale(1.3);
                                              transform: scale(1.3); }

                                    .grid-music-container .m-music-lyric-wrap ul li.eof {
                                      height: 100%;
                                      line-height: 12.5rem;
                                      font-size: 1rem;
                                      color: #999; }`

HTML 结构

 <!--音乐播放器组件-->
  <div class="grid-music-container-3d" id="grid-music-container-3d">

      <div class="grid-music-container f-usn ">
          <div class="m-music-play-wrap">
              <div class="u-cover"></div>
              <div class="m-now-info">
                  <h1 class="u-music-title" ><strong>标题</strong><small>歌手</small></h1>
                  <div class="m-now-controls">
                      <div class="u-control u-process tips" data-title="0" data-direction="top">
                          <span class="buffer-process"></span>
                          <span class="current-process"></span>
                      </div>
                      <div class="u-control u-time">00:00/00:00</div>
                      <div class="u-control u-volume">
                          <div class="volume-process tips" data-volume="0.50" data-title="调节音量" data-direction="top">
                              <span class="volume-current"></span>
                              <span class="volume-bar"></span>
                              <span class="volume-event"></span>
                          </div>
                          <a class="volume-control"></a>
                      </div>
                  </div>
                  <div class="m-play-controls">
                      <a class="u-play-btn prev tips"  data-title="上一曲" data-direction="top"></a>
                      <a class="u-play-btn ctrl-play play tips"  data-title="暂停" data-direction="top"></a>
                      <a class="u-play-btn next tips"  data-title="下一曲" data-direction="top"></a>
                      <a class="u-play-btn mode mode-list current tips"  data-title="列表循环" data-direction="top"></a>
                      <a class="u-play-btn mode mode-random tips"  data-title="随机播放" data-direction="top"></a>
                      <a class="u-play-btn mode mode-single tips"  data-title="单曲循环" data-direction="top"></a>
                  </div>
              </div>
          </div>
          <div class="f-cb">&nbsp;</div>
          <div class="m-music-list-wrap"></div>
          <div class="cl"></div>
          <div class="m-music-lyric-wrap">
              <div class="inner-bg"></div>
              <div class="inner">
                  <ul class="js-music-lyric-content">
                      <li class="eof">暂无歌词...</li>
                  </ul>
              </div>
          </div>
          <div class="music-container-blur-bg"></div>
      </div>
  </div>
<!--移动端音乐样式-->
<a class="myMusic tips" title="让我们荡起双桨" data-title="点击隐藏和显示播放器" data-direction="top">
  <span class="circle play"></span>
</a>

页面调用

require(['lkmusic'],function (lkmusic){
                       调用音乐播放器函数
                         var lkmusicplayer = null;
                          new lkmusic.LMusic({
                              musicList : musicList,
                              autoPlay  : true,  //是否自动播放
                              defaultMode : 2,   //默认播放模式，随机
                              offlineMode:true,
                              callback   : function (obj) {  //返回当前播放歌曲信息
                                  lkmusicplayer = obj;
                                  //初始化插件
                                  $('.tips').tips();
                              }
                          });
});

效果预览