audiojs自定义样式

audiojs 自定义样式：

请先看看播放控件的代码结构，在结合以下进行操作。

通过提高优先级让其不执行audiojs中的样式
audiojs 的背景色，位置可以在这里控制
#wrapp .audiojs{
    position: absolute;
    top: 21px;
    left: 29px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    height:40px;
    background: none;
    -webkit-box-shadow:none !important;
}
点击播放暂停的区域的样式通过 .play-pause 控制
#wrapp .play-pause{
    border: none !important;
    width:30%;
    /*background:url('../../../../widget/ui/img/news/play.png') no-repeat ;*/
    background-size: 32px 32px;
    height:40px;

 }
播放的进度通过scrubber控制。
#wrapp .scrubber{
     width:50%;
 }
播放时间通过time控制
#wrapp .time{
    border: none !important;
    width:20%;
    display: none;
}
该音频的总时长
#wrapp .audiojs .scrubber{
    border: none !important;
    height: 5px;
    background-color: white;
    vertical-align: middle;
    margin: auto 0;
}
播放过的时常
#wrapp .audiojs .progress{
    border: none !important;
    height: 5px;
    background-color: #E5412D ;
    background-image: none !important;
/*    vertical-align: middle;*/
}

想自定义点击播放暂停切换的图标，必须要去audiojs源码中更改; 

里面有一块css的样式表, 你可以在改样式表中修改你要的样式

css: '\
  .audiojs audio { position: absolute; left: -1px; } \
  .audiojs { width: 100%; height: 50px; background: white; overflow: hidden; font-family: monospace; font-size: 12px; \
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); \
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); \
    -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); } \
  .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; } \
  .audiojs p {display: none; width: 100%; height: 100%; margin: 0px; cursor: pointer; } \
  .audiojs .play { display: block; } \
  .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; } \
  .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; \
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); \
    background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); } \
  .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 5px; background: #53BDBE; \
    /*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222))*/; \
    background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); } \
  .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } \
  .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; } \
  .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; } \
  .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; \
    text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } \
  .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } \
  \
  .audiojs .play { background: url("'+playIcon+'")  center no-repeat; background-size:32px } \
  .audiojs .loading { background: url("") -2px -31px no-repeat; } \
  .audiojs .error { background: url("") -2px -61px no-repeat; } \
  .audiojs .pause { background: url("'+pauseIcon+'") center no-repeat; background-size:32px ;} \
  \
  @media only screen and (-webkit-min-device-pixel-ratio: 2), \
    only screen and (min--moz-device-pixel-ratio: 2), \
    only screen and (min-moz-device-pixel-ratio: 2), \
    only screen and (-o-min-device-pixel-ratio: 2/1), \
    only screen and (min-device-pixel-ratio: 2) { \
      .audiojs .play, .audiojs .loading, .audiojs .error, .audiojs .pause { \
        background-image: url("$2"); \
        -webkit-background-size: 30px 120px; \
        -moz-background-size: 30px 120px; \
        -o-background-size: 30px 120px; \
        background-size: 30px 120px; \
      } \
  } \
  \
  .playing .play, .playing .loading, .playing .error { display: none; } \
  .playing .pause { display: block; } \
  \
  .loading .play, .loading .pause, .loading .error { /*display: none;*/ } \
  .loading .loading { display: block; } \
  \
  .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } \
  .error .error { display: block; } \
  .error .play-pause p { cursor: auto; } \
  .error .error-message { display: block; }',

 

如果你要改播放按钮 找到.audiojs .play  这里面的url中可以写你自己的要用的图标地址

.audiojs .play { background: url("'+playIcon+'")  center no-repeat; background-size:32px } \

 

如果你要改播放按钮 找到.audiojs .pause

.audiojs .pause { background: url("'+pauseIcon+'") center no-repeat; background-size:32px ;}

注意  有display:none 的一定要换成block 试试，不然我们会看不到图标

.audiojs .play { display: none; } \

 

转载于:https://my.oschina.net/u/3641564/blog/1503876