最近配置网站的时候,做了一个 Aplayer 的个性控制器(本站右端),在此基础上就把它做成了一个引用简单的对象,自定义配置更方便了。
:此 1.0.0 版本与 Aplayer 的 1.6.0 版本相匹配。
Demo


# 安装 (Install)

NPM:

$ npm install aplayer-controler --save

# 使用说明 (Usage)

# Important

请保证工程环境中有 jqueryvelocity 存在!
Make sure that jquery and velocity are existed in your project environment!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>

# HTML

<div id="myapcid"></div>
<script src="scr/Aplayer-Controler.min.js"></script>

Javascript

var myap = new APlayer({......});  //Aplayer Part
var myapc=new APlayer_Controler({  //Controler Part
      APC_dom:'#myapcid',												
      aplayer:myap,														
      attach_right:true,												
      position:{top:'300px',bottom:''},
      fixed:true,														
      btn_width:100,													
      btn_height:120,													
      img_src:[],														
      img_style:{repeat:'no-repeat',position:'center',size:'contain'},
      ctrls_color:'rgba(173,255,47,0.7)',			
      ctrls_hover_color:'rgba(255,140,0,0.8)',		
      tips_on:true,														
      tips_width:140,													
      tips_height:25,													
      tips_color:'rgba(255,255,255,0.5)',
      tips_content:{													
          on_loading:{top:'音乐加载中',bottom:'不如来卖萌'},			
          on_welcome:{top:'音乐加载完成',bottom:'请继续看我卖萌'},		
          on_timeout:{top:'播放器暂无响应',bottom:'那就看我卖萌'},		
          on_error:{top:'音乐播放出错',bottom:'那就看我卖萌'},			
          on_listend:{top:'歌单已到底部',bottom:'接着看我卖萌'},		
          on_nohistory:{top:'没有历史纪录',bottom:'快去听歌吧!'},		
          on_historyend:{top:'历史纪录已到头',bottom:'快去听新歌吧!'}
      },
      timeout:30,
      showOnPhone:false,
      songrecord_log:false
  };

# Details

  • APC_dom : 必须,所绑定的 APlayer_Controler,可以为 “.className”, “#idName”, 或者 $(), getElementById 绑定;
  • aplayer : 必须,所绑定的 APlayer 对象;
  • attach_right :APlayer_Controler 附着在左边或者右边,默认为右边 (true);
  • position : 必须,APlayer_Controler 的位置,无默认值;
  • fixed :APlayer_Controler 是否锁定在页面内,默认为开 (true);
  • btn_width : 按钮宽度,默认为 100px;
  • btn_height : 按钮高度,默认值为 120px;
  • img_src : 按钮背景图链接数组,无默认值;
  • img_style : 按钮背景图样式,分别对应 background-repeat, background-position, background-size, 默认值见 Javascript;
  • ctrls_color : 控制按键背景色,默认值为 “rgba (173,255,47,0.7)”;
  • ctrls_hover_color : 控制按键鼠标停留时的背景色,默认值为 “rgba (255,140,0,0.8)”;
  • tips_on : 提示信息开关,默认为开 (true);
  • tips_width : 提示信息宽度,默认为 140px;
  • tips_height : 提示信息高度,默认为 25px;
  • tips_color : 提示信息背景色,默认值为 “rgba (255,255,255,0.5)”;
  • tips_content : 提示信息,分为上下两个,默认值见 Javascript;
  • timeout : 设置播放器 canplay 事件无响应的最长时间,该时间内按钮区域无效,超时后有效。若为 0 则关闭无响应提示,且按钮一直有效,默认值 30s;
  • showOnPhone : 手机端显示开关,默认 (false) 为不显示;
  • songrecord_log : 控制台是否输出历史记录,默认 (false) 为关。

# 最后

附上仓库链接
最后如果有什么问题、bug、建议的话欢迎 issue,也非常欢迎大佬们指点!