Mashiro-Sorata / APlayer-Controler

A Cute AP-Controler

Aplayer Controler

Powered By Mashiro_Sorata

---

Content

1. Introduction
2. Install
3. Quick Start
4. Details
5. Read more
6. License

---

Introduction

DEMO

The Aplayer Controler is a tool to make users control the Aplayer more easily.
Enjoying with its lovely customizable interface.

Install

$ npm install aplayer-controler --save

Quick Start

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

  var myap = new APlayer({......});
  var myapc=new APlayer_Controler({
    	 APC_dom:$('#myapcid'),
	 aplayer:myap,
    	 position:{top:'300px'},
	 img_src:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg',
	      	  'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg',
		  'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif']
  });

Details

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:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg',
               'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg',
               'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif'],															
      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
};

• APC_dom: Required, controler's id or className--"#id", ".class", $();
• aplayer: Required, aplayer object;
• attach_right: Optional, whether controler on the right, default: true;
• position: Required, controler's position;
• fixed: Optional, whether controler fixed on the page, default: true;
• btn_width: Optional, button's width, default: 100;
• btn_height: Optional, button's height, default: 120;
• img_src: Optional, button's background-image "url-array", default: [];
• img_style: Optional, style of button's background-images, default: in Javascript;;
• ctrls_color: Optional, controlers' color, default: "rgba(173,255,47,0.7)";
• ctrls_hover_color: Optional, controlers' color when the mouse hover, default: "rgba(255,140,0,0.8)";
• tips_on: Optional, the message's switch, default: true;
• tips_width: Optional, the message's width, default: 140;
• tips_height: Optional, the message's height, default: 25;
• tips_color: Optional, the message's background-color,default: "rgba(255,255,255,0.5)";
• tips_content: Optional, the message's content, default: in Javascript;
• timeout: Optional, the longest time to wait player's "canplay" event when tips_on is true. And The button is disabled during this time. In addition, the on_loading of tips_content will close when timeout is "0", and the button is valid all the time. default: 30;
• showOnPhone: Optional, whether the "Aplayer-Controler" is dispalyed on the phone, default: false;
• songrecord_log: Optional, whether the song history shows in the console, default: false.

Read more

Read More Here

License

MIT License