├── .gitattributes ├── .gitignore ├── LICENCE ├── README.md ├── css └── AetherPlayer.css ├── example └── index.html └── js ├── AetherPlayer.js ├── AetherPlayer_bootstrap.js └── playlist.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.md -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [【中文说明】](https://github.com/peinhu/AetherPlayer/wiki) 2 | 3 | [Aetherplayer for WordPress](https://github.com/peinhu/AetherPlayer-wordpress) 4 | # AetherPlayer 5 | ![aetherplayer](http://www.2ndrenais.com/aetherplayer1.png) 6 | 7 | **AetherPlayer** is a CD-like simple HTML5 audio player which is very suitable for blogs and personal websites. 8 | It's intelligent, responsive and easy to use. 9 | Setting up AetherPlayer can be as simple as adding two lines of code to your homepage. 10 | [Check out the DEMO](http://www.2ndrenais.com/aetherplayer/index.html) 11 | # Features 12 | * Autoloading : By referencing the bootstrap file of AetherPlayer to your HTML document, the rest dependent files will be loaded automatically. 13 | * Delayed load : No files will be included until the original page is completely loaded. 14 | * Custom configuration : It's very easy to change the position, playmode, debug parameters in configuration. 15 | * Preload images: The images of albums will be loaded by order when the player initialize even if they are yet to be displayed. 16 | * Responsive : The player is adaptive both on PC and mobile device. 17 | * Non-jQuery : Since the jQuery file is too overstaffed and may cause some compatibility issues, AetherPlayer use the native JavaScript to cancel the dependence on jQuery now. 18 | 19 | # Usage 20 | 0 Copy the whole program folder to your project, you can put it wherever you like. 21 | 22 | 1 Reference the location to `AetherPlayer_bootstrap.js` in the HTML document which you would like to call the AetherPlayer. AetherPlayer is smart enough to include the rest of the files automatically. 23 | 24 | e.g. `` 25 | 26 | 2 Edit the play list in `js/playlist.js`. 27 | 28 | e.g. `var aetherplayer_playList_file=[{'artist':'Adele','songName':'rolling in the deep','songURL':'http://www.xxx.com/path/to/song/rolling_in_the_deep.mp3','songCover':'http://www.xxx.com/path/to/album/rolling_in_the_deep.jpg'},];` 29 | 30 | 3 Enjoy the music:) 31 | 32 | Tips: you may change some default configurations in `js/AetherPlayer.js` if you will. 33 | # Licence 34 | AetherPlayer is available under the GPLv2 licence, see the LICENCE file for more information. 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css/AetherPlayer.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Payne 3 | * @email huyang110yahoo@gmail.com 4 | * @github https://github.com/peinhu 5 | * @site http://2ndrenais.com 6 | * @date 2015-08-04 7 | */ 8 | 9 | /*desktop only*/ 10 | @media (min-width:768px){ 11 | #aetherplayer .player{transition:All 0.6s ease-out;width:200px;height:200px;overflow:hidden;position:fixed;z-index:99;visibility:visible !important;} 12 | #aetherplayer .player-disk-circle-big{width:60px;height:60px;position:absolute;top:50%;left:50%;border-radius:30px;margin-top:-30px;margin-left:-30px; overflow:hidden;border:#eee solid 1px;box-sizing:border-box;background: linear-gradient(-35deg,#fff 30%,#e6e6e6 42%,#bbb 50%, #e6e6e6 58%,#fff 70%);} 13 | #aetherplayer .player-disk-circle-small{width:26px;height:26px;position:absolute;top:50%;left:50%;margin-left:-13px;margin-top:-13px;border-radius:13px;box-shadow: 0 0 0 1px #c2c2c2 inset;background:#fff;} 14 | #aetherplayer .player-disk{overflow:hidden;background:#fff;position:absolute;border:#fff solid 4px; -webkit-box-sizing:border-box;box-sizing:border-box;box-shadow: 0 0 1px #000;border-radius:100px;width:200px;height:200px;} 15 | #aetherplayer .i-circle{animation:circle 10s linear infinite;-webkit-animation:circle 10s linear infinite;animation-play-state:paused;-webkit-animation-play-state:paused;} 16 | @keyframes circle{from{ transform:rotate(0);}to{ transform:rotate(360deg);}} 17 | @-webkit-keyframes circle{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}} 18 | #aetherplayer .player-position-lefttop{left:-100px;right:auto;top:-100px;bottom:auto;} 19 | #aetherplayer .player-position-leftbottom{left:-100px;right:auto;top:auto;bottom:-100px;} 20 | #aetherplayer .player-position-righttop{left:auto;right:-100px;top:-100px;bottom:auto;} 21 | #aetherplayer .player-position-rightbottom{left:auto;right:-100px;top:auto;bottom:-100px;} 22 | #aetherplayer .player-position-lefttop:hover{left:0 !important;bottom:auto !important;right:auto !important;top:0 !important;} 23 | #aetherplayer .player-position-leftbottom:hover{left:0 !important;bottom:0 !important;right:auto !important;top:auto !important;} 24 | #aetherplayer .player-position-righttop:hover{left:auto !important;bottom:auto !important;right:0 !important;top:0 !important;} 25 | #aetherplayer .player-position-rightbottom:hover{left:auto !important;bottom:0 !important;right:0 !important;top:auto !important;} 26 | #aetherplayer .player-btn-backward{width:22px;height:22px;color:#fff;position:absolute;top:72%;left:25%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 27 | #aetherplayer .player-btn-play{width:22px;height:22px;color:#fff;position:absolute;top:83%;left:50%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 28 | #aetherplayer .player-btn-forward{width:22px;height:22px;color:#fff;position:absolute;top:72%;left:75%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 29 | #aetherplayer .player-btn-playmode{position:absolute;top:50%;left:83%;margin-top:-11px;margin-left:-11px;cursor:pointer;color:#fff;width:22px;height:22px;text-align:center;line-height:22px;} 30 | #aetherplayer .player-tiny{display:none;} 31 | #aetherplayer .player-mask{display:none;} 32 | } 33 | 34 | /*mobile only*/ 35 | @media (max-width:768px){ 36 | #aetherplayer .player{width:200px;height:200px;overflow:hidden;position:fixed;left:50%;top:50%;margin-top:-100px;margin-left:-100px;z-index:99;visibility:hidden;} 37 | #aetherplayer .player-tiny{position:fixed;right:10px;top:40px;width:34px;height:34px;background:rgba(0,0,0,0.2);border-radius:17px;z-index:99;text-align:center;line-height:32px;color:#fff;border:#fff solid 1px;box-sizing:border-box;} 38 | #aetherplayer .player-disk{overflow:hidden;background:#fff;position:absolute;border:#fff solid 4px; -webkit-box-sizing:border-box;box-sizing:border-box;box-shadow: 0 0 1px #000;width:200px;height:200px;} 39 | #aetherplayer .player-btn-backward{width:22px;height:22px;color:#fff;position:absolute;top:80%;left:25%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 40 | #aetherplayer .player-btn-play{width:22px;height:22px;color:#fff;position:absolute;top:80%;left:50%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 41 | #aetherplayer .player-btn-forward{width:22px;height:22px;color:#fff;position:absolute;top:80%;left:75%;margin-left:-11px;margin-top:-11px;text-align:center;line-height:22px;cursor:pointer;} 42 | #aetherplayer .player-btn-playmode{position:absolute;top:60%;left:75%;margin-top:-11px;margin-left:-11px;cursor:pointer;color:#fff;width:22px;height:22px;text-align:center;line-height:22px;} 43 | #aetherplayer .player-mask{height:100%;width:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);z-index:98;display:none;} 44 | @keyframes twinkling{0%{opacity:0.3; }50%{opacity:1; }100%{opacity:0.3; }} 45 | @-webkit-keyframes twinkling{0%{opacity:0.3; }50%{opacity:1; }100%{opacity:0.3; }} 46 | #aetherplayer #twinkling{animation:twinkling 3s infinite ease-in-out;-webkit-animation:twinkling 3s infinite ease-in-out;} 47 | } 48 | 49 | /*common*/ 50 | #aetherplayer .player-disk-image{width:192px;height:192px;display:none;} 51 | #aetherplayer .player-btn-shadow{text-shadow: 0px 0px 2px #000;} 52 | #aetherplayer .player-title{width:60%;font-size:14px;height:16px;line-height:16px;position:absolute;top:22%;left:20%;color:#fff;text-shadow: 0px 0px 2px #000;overflow:hidden;cursor:default;text-align:center;margin-top:-8px;} 53 | #aetherplayer .player-title-text{overflow: hidden;white-space: nowrap;} 54 | #aetherplayer .select-disable{user-select:none;-webkit-user-select:none;-moz-user-select: none;-khtml-user-select: none;} 55 | #aetherplayer .fadein{animation:fadein 0.8s 1 linear;-webkit-animation:fadein 0.8s 1 linear;} 56 | @keyframes fadein{0%{opacity:0; }100%{opacity:1; }} 57 | @-webkit-keyframes fadein{0%{opacity:0; }100%{opacity:1; }} -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AetherPlayer 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /js/AetherPlayer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Payne 3 | * @email huyang110yahoo@gmail.com 4 | * @github https://github.com/peinhu 5 | * @site http://2ndrenais.com 6 | * @date 2015-08-04 7 | */ 8 | 9 | (function() { 10 | 11 | 'use strict'; 12 | 13 | //Config your player here. 14 | var config = { 15 | dataStorage : 'file',//[file|database] The way to storage playlist. If you choose database, then you should declare and assign a JavaScript variable named aetherplayer_playList_database in script tag. 16 | position : 'leftbottom',//[lefttop|leftbottom|righttop|rightbottom] The position of audio player. 17 | fontFamily : 'microsoft yahei,arial,sans-serif',//[FONTFAMILY] The fonts of your text. 18 | autoPlay : false,//[true|false] Start playing music immediately when the data is ready. 19 | playMode : 'order',//[order|repeat|random] The play mode by default. 20 | debug : false,//[true|false] Show the debug information in the console. 21 | }; 22 | 23 | var audio,moveLength,_playstatus = 'pause',_playmode,_songindex = 0,preloadImg = new Array(),internal,debug,playList=[]; 24 | 25 | playerInit(); 26 | 27 | //initialization process of the player 28 | function playerInit(){ 29 | playerAdd(); 30 | audioEventBind(); 31 | buttonEventBind(); 32 | configLoad(); 33 | if(playList.length==0)return; 34 | albumPreload(); 35 | prepareToPlay(); 36 | } 37 | 38 | function audioEventBind(){ 39 | 40 | audio.addEventListener('playing',function(){ 41 | if(debug)debugOutput('audio - playing:'+playList[_songindex].songName); 42 | },true ); 43 | 44 | audio.addEventListener('pause',function(){ 45 | if(debug)debugOutput('audio - pause:'+playList[_songindex].songName); 46 | },true ); 47 | 48 | audio.addEventListener('ended',function(){ 49 | musicNext(); 50 | if(debug)debugOutput('audio - ended:'+playList[_songindex].songName); 51 | }); 52 | 53 | audio.addEventListener('error',function(){ 54 | setTimeout(function(){musicNext()},5000); 55 | if(debug)debugOutput('audio - error:'+playList[_songindex].songName); 56 | }); 57 | 58 | audio.addEventListener('loadeddata',function(){ 59 | if(debug)debugOutput('audio - loadeddata:'+playList[_songindex].songName); 60 | }); 61 | 62 | audio.addEventListener('stalled',function(){ 63 | if(debug)debugOutput('audio - stalled:'+playList[_songindex].songName); 64 | }); 65 | 66 | } 67 | 68 | function buttonEventBind(){ 69 | 70 | var eventType = "",isSupportTouch = "ontouchend" in document ? true : false; 71 | 72 | (isSupportTouch==true)?eventType = "touchend":eventType = "mousedown"; 73 | 74 | $('#aetherplayer #player-title').addEventListener('mouseover', 75 | function(){ 76 | internal = setInterval(function(){titleMove()},20); 77 | } 78 | ); 79 | 80 | $('#aetherplayer #player-title').addEventListener('mouseout', 81 | function(){ 82 | titleReset(); 83 | clearInterval(internal); 84 | } 85 | ) 86 | 87 | var playBtnFunc = function(){ 88 | if(_playstatus=='pause'){ 89 | musicPlay(); 90 | if(debug)debugOutput('button - play'); 91 | }else if(_playstatus=='playing'){ 92 | musicPause(); 93 | if(debug)debugOutput('button - pause'); 94 | } 95 | }; 96 | 97 | var prevBtnFunc = function(){ 98 | musicPrev(); 99 | if(debug)debugOutput('button - prev'); 100 | }; 101 | 102 | var nextBtnFunc = function(){ 103 | musicNext(); 104 | if(debug)debugOutput('button - next'); 105 | }; 106 | 107 | var playModeBtnFunc = function(){ 108 | playModeChange(); 109 | if(debug)debugOutput('button - mode:'+_playmode); 110 | }; 111 | 112 | var AlbumShowFunc = function(){ 113 | $('#aetherplayer .player').style.visibility = "visible"; 114 | $('#aetherplayer .player-mask').style.display = "block"; 115 | }; 116 | 117 | var AlbumHideFunc = function(e){ 118 | e.preventDefault(); 119 | $('#aetherplayer .player').style.visibility = "hidden"; 120 | $('#aetherplayer .player-mask').style.display = "none"; 121 | } 122 | 123 | $('#aetherplayer #player-btn-play').addEventListener(eventType,playBtnFunc); 124 | $('#aetherplayer #player-btn-backward').addEventListener(eventType,prevBtnFunc); 125 | $('#aetherplayer #player-btn-forward').addEventListener(eventType,nextBtnFunc); 126 | $('#aetherplayer #player-btn-playmode').addEventListener(eventType,playModeBtnFunc); 127 | $('#aetherplayer .player-tiny').addEventListener(eventType,AlbumShowFunc); 128 | $('#aetherplayer .player-mask').addEventListener(eventType,AlbumHideFunc); 129 | $('#aetherplayer .player-disk-image').addEventListener("animationend", function(){ 130 | this.className = this.className.replace('fadein', ''); 131 | }); 132 | $('#aetherplayer .player-disk-image').addEventListener("webkitAnimationEnd", function(){ 133 | this.className = this.className.replace('fadein', ''); 134 | }); 135 | } 136 | 137 | 138 | 139 | function $(node){ 140 | return document.querySelector(node); 141 | } 142 | 143 | function playerAdd(){ 144 | var html = '
' 145 | + '
' 146 | + '' 147 | + '
' 148 | + '
' 149 | + '
' 150 | + '' 151 | + '
' 152 | + '
' 153 | + '
' 154 | + '
' 155 | + '
' 156 | + '
' 157 | + '' 158 | + '
' 159 | + '
'; 160 | var newNode = document.createElement("div"); 161 | newNode.innerHTML = html; 162 | newNode.id = "aetherplayer"; 163 | document.body.appendChild(newNode); 164 | audio = $("#aetherplayer #songs"); 165 | } 166 | 167 | //play the song 168 | function musicPlay(){ 169 | _playstatus = 'playing'; 170 | $('#aetherplayer .fa-volume-up').id = 'twinkling'; 171 | cdPlay(); 172 | audio.play(); 173 | } 174 | 175 | //pause the song 176 | function musicPause(){ 177 | _playstatus = 'pause'; 178 | $('#aetherplayer .fa-volume-up').id = ''; 179 | cdPause(); 180 | audio.pause(); 181 | } 182 | 183 | //change to the next song 184 | function musicNext(){ 185 | switch(_playmode){ 186 | case 'order' : ++_songindex;if(_songindex>playList.length-1)_songindex = 0;break; 187 | case 'repeat' : break; 188 | case 'random': _songindex = randomIndexGet();break; 189 | default : break; 190 | } 191 | $('#aetherplayer .player-disk-image').className = "player-disk-image fadein"; 192 | prepareToPlay(); 193 | } 194 | 195 | //change to the previous song 196 | function musicPrev(){ 197 | switch(_playmode){ 198 | case 'order' : --_songindex;if(_songindex<0)_songindex = playList.length-1;break; 199 | case 'repeat' : break; 200 | case 'random' : _songindex = randomIndexGet();break; 201 | default : break; 202 | } 203 | $('#aetherplayer .player-disk-image').className = "player-disk-image fadein"; 204 | prepareToPlay(); 205 | } 206 | 207 | //do some preprocessing before playing a song 208 | function prepareToPlay(){ 209 | resourceLoad(); 210 | moveLengthGet(); 211 | audio.load(); 212 | if(_playstatus == 'pause')return; 213 | audio.play(); 214 | } 215 | 216 | //move the title text 217 | function titleMove(){ 218 | var nodeObj = $('#player-title-text'); 219 | if(moveLength<=0)return; 220 | var mLeft = 0-nodeObj.offsetLeft; 221 | if(mLeft>=moveLength)return; 222 | mLeft += 1; 223 | nodeObj.style.marginLeft = '-'+mLeft+'px'; 224 | } 225 | 226 | //get the move length of title text 227 | function moveLengthGet(){ 228 | var titlewidth = $('#aetherplayer #player-title').offsetWidth; 229 | var textwidth = $('#aetherplayer #player-title-text').offsetWidth; 230 | return moveLength = textwidth - titlewidth; 231 | } 232 | 233 | //preload the album picture by order and set cache 234 | function albumPreload(index){ 235 | var imgIndex = arguments[0] ? arguments[0] : 0; 236 | if(imgIndex>=playList.length)return; 237 | preloadImg[imgIndex] = new Image(); 238 | preloadImg[imgIndex].src = playList[imgIndex].songCover; 239 | preloadImg[imgIndex].onload = function() { 240 | if(imgIndex==0)$("#aetherplayer #player-disk-image").style.display = "block"; 241 | ++imgIndex; 242 | albumPreload(imgIndex); 243 | } 244 | } 245 | 246 | //load the src, album and title of the audio resource 247 | function resourceLoad(){ 248 | audio.src = playList[_songindex].songURL; 249 | $("#aetherplayer #player-disk-image").src = playList[_songindex].songCover; 250 | $('#aetherplayer #player-title-text').innerHTML = playList[_songindex].songName+" - "+playList[_songindex].artist; 251 | } 252 | 253 | //make the CD turn 254 | function cdPlay(){ 255 | $('#aetherplayer #player-btn-play').innerHTML = ''; 256 | $('#aetherplayer .i-circle').style.animationPlayState = 'running'; 257 | $('#aetherplayer .i-circle').style.webkitAnimationPlayState = 'running'; 258 | } 259 | 260 | //make the CD stop 261 | function cdPause(){ 262 | $('#aetherplayer #player-btn-play').innerHTML = ''; 263 | $('#aetherplayer .i-circle').style.animationPlayState = 'paused'; 264 | $('#aetherplayer .i-circle').style.webkitAnimationPlayState = 'paused'; 265 | } 266 | 267 | //load the configuration 268 | function configLoad(){ 269 | for(var conf in config){ 270 | eval(conf+"Config()"); 271 | } 272 | } 273 | 274 | //configure the autoplay 275 | function autoPlayConfig(){ 276 | if(config.autoPlay){ 277 | _playstatus = 'playing'; 278 | return; 279 | } 280 | _playstatus = 'pause'; 281 | } 282 | 283 | //configure the position of audio player 284 | function positionConfig(){ 285 | $('#aetherplayer #player').className += " player-position-"+config.position; 286 | } 287 | 288 | //configure the fontFamily 289 | function fontFamilyConfig(){ 290 | $('#aetherplayer #player').style.fontFamily = config.fontFamily; 291 | } 292 | 293 | //configure the play mode 294 | function playModeConfig(){ 295 | playModeApply(config.playMode); 296 | } 297 | 298 | //configure the debug status 299 | function debugConfig(){ 300 | debug = config.debug; 301 | if(debug)debugOutput('debugging'); 302 | } 303 | 304 | function debugOutput(info){ 305 | console.log("AetherPlayer : "+info); 306 | } 307 | 308 | //apply the play mode 309 | function playModeApply(playmode){ 310 | switch(playmode){ 311 | case 'order':_playmode = 'order';$('#aetherplayer #player-btn-playmode').innerHTML = '';$('#aetherplayer #player-btn-playmode').title = "Order";break; 312 | case 'repeat':_playmode = 'repeat';$('#aetherplayer #player-btn-playmode').innerHTML = '';$('#aetherplayer #player-btn-playmode').title = "Repeat";break; 313 | case 'random':_playmode = 'random';$('#aetherplayer #player-btn-playmode').innerHTML = '';$('#aetherplayer #player-btn-playmode').title = "Random";break; 314 | default:break; 315 | } 316 | } 317 | 318 | //change the play mode of audio player 319 | function playModeChange(){ 320 | var playmodeArray = new Array('order','repeat','random'),playmodeArray_index; 321 | for(var i=0;iplaymodeArray.length-1)playmodeArray_index = 0; 326 | playModeApply(playmodeArray[playmodeArray_index]); 327 | } 328 | 329 | //reset the position of title text 330 | function titleReset(){ 331 | $('#aetherplayer #player-title-text').style.marginLeft = '0px'; 332 | } 333 | 334 | //get the random index 335 | function randomIndexGet(){ 336 | var randomIndex = _songindex; 337 | while(randomIndex==_songindex){ //make sure to get the different index 338 | randomIndex = Math.floor(Math.random()*playList.length); 339 | } 340 | return randomIndex; 341 | } 342 | 343 | //configure the way to storage data 344 | function dataStorageConfig(){ 345 | switch(config.dataStorage){ 346 | case "file":playList = aetherplayer_playList_file;break; 347 | case "database":playList = aetherplayer_playList_database;break; 348 | default:break; 349 | } 350 | } 351 | 352 | 353 | })() 354 | 355 | 356 | 357 | 358 | 359 | -------------------------------------------------------------------------------- /js/AetherPlayer_bootstrap.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Bootstrap Anonymous Function 4 | * Detect relative path and load documents in a synchronous manner automatically. 5 | */ 6 | 7 | 8 | //load files which are depended on AetherPlayer 9 | var aetherPlayerBoot = (function(path_bootstrap){ 10 | 11 | var path_to_docs = path_bootstrap.substring(0,path_bootstrap.indexOf('/js/')); 12 | 13 | filesLoad([path_to_docs+'/css/AetherPlayer.css',path_to_docs+'/js/playlist.js',path_to_docs+'/js/AetherPlayer.js','https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css']); 14 | 15 | //load files by order in a synchronous manner 16 | function filesLoad(arr){ 17 | var type_arr = arr[0].split('.'); 18 | var type = type_arr[type_arr.length-1]; 19 | if(type=="css")var dom = cssDomCreate(arr[0]); 20 | else if(type=="js")var dom = jsDomCreate(arr[0]); 21 | if(arr.length==1)return; 22 | dom.onload = function(){ 23 | arr.splice(0,1); 24 | filesLoad(arr); 25 | } 26 | } 27 | 28 | //create JS dom in the body tag 29 | function jsDomCreate(url){ 30 | var script = document.createElement("script"); 31 | script.type = "text/javascript"; 32 | script.src = url; 33 | document.querySelector("body").appendChild(script); 34 | return script; 35 | } 36 | 37 | //create CSS dom in the head tag 38 | function cssDomCreate(url){ 39 | var link = document.createElement("link"); 40 | link.type = "text/css"; 41 | link.rel = "stylesheet"; 42 | link.href = url; 43 | document.querySelector("head").appendChild(link); 44 | return link; 45 | } 46 | 47 | }) 48 | 49 | var aetherplayer_path_bootstrap = document.scripts[document.scripts.length - 1].src;//get the absolute path of AetherPlayer_bootstrap.js 50 | 51 | //make sure that the original page is completely loaded 52 | document.onreadystatechange = function() { 53 | 54 | if (document.readyState == "complete") { 55 | 56 | aetherPlayerBoot(aetherplayer_path_bootstrap); 57 | 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /js/playlist.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Edit your playlist here. 3 | * Notice:This variable will take effect only if the dataStorage param is set to "file" in configuration. 4 | * e.g. var aetherplayer_playList_file = [{'artist':'','songName':'','songURL':'','songCover':''},] 5 | */ 6 | 7 | var aetherplayer_playList_file = []; --------------------------------------------------------------------------------