├── README.md ├── assets ├── css │ ├── font-awesome-4.3.0 │ │ ├── css │ │ │ ├── font-awesome.css │ │ │ └── font-awesome.min.css │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ ├── fontawesome-webfont.woff │ │ │ └── fontawesome-webfont.woff2 │ │ └── less │ │ │ ├── animated.less │ │ │ ├── bordered-pulled.less │ │ │ ├── core.less │ │ │ ├── fixed-width.less │ │ │ ├── font-awesome.less │ │ │ ├── icons.less │ │ │ ├── larger.less │ │ │ ├── list.less │ │ │ ├── mixins.less │ │ │ ├── path.less │ │ │ ├── rotated-flipped.less │ │ │ ├── stacked.less │ │ │ └── variables.less │ └── styles.css ├── img │ ├── default.png │ └── favicon.ico └── js │ ├── id3-minimized.js │ ├── jquery-1.11.2.min.js │ ├── script.js │ ├── wavesurfer.min.js │ └── webtorrent.min.js ├── index.html ├── js ├── APlayer.js ├── APlayer.min.css ├── APlayer.min.js ├── angular.min.js ├── controllers.js ├── default.jpg ├── font │ ├── aplayer-fontello.eot │ ├── aplayer-fontello.svg │ ├── aplayer-fontello.ttf │ └── aplayer-fontello.woff ├── jsmediatags.min.js └── webtorrent.min.js ├── simple.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # youshark -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-genderless:before,.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"} -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/css/font-awesome-4.3.0/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/css/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/animated.less: -------------------------------------------------------------------------------- 1 | // Animated Icons 2 | // -------------------------- 3 | 4 | .@{fa-css-prefix}-spin { 5 | -webkit-animation: fa-spin 2s infinite linear; 6 | animation: fa-spin 2s infinite linear; 7 | } 8 | 9 | .@{fa-css-prefix}-pulse { 10 | -webkit-animation: fa-spin 1s infinite steps(8); 11 | animation: fa-spin 1s infinite steps(8); 12 | } 13 | 14 | @-webkit-keyframes fa-spin { 15 | 0% { 16 | -webkit-transform: rotate(0deg); 17 | transform: rotate(0deg); 18 | } 19 | 100% { 20 | -webkit-transform: rotate(359deg); 21 | transform: rotate(359deg); 22 | } 23 | } 24 | 25 | @keyframes fa-spin { 26 | 0% { 27 | -webkit-transform: rotate(0deg); 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | -webkit-transform: rotate(359deg); 32 | transform: rotate(359deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/bordered-pulled.less: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em @fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .pull-right { float: right; } 11 | .pull-left { float: left; } 12 | 13 | .@{fa-css-prefix} { 14 | &.pull-left { margin-right: .3em; } 15 | &.pull-right { margin-left: .3em; } 16 | } 17 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/core.less: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox 12 | 13 | } 14 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/fixed-width.less: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .@{fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/font-awesome.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables.less"; 7 | @import "mixins.less"; 8 | @import "path.less"; 9 | @import "core.less"; 10 | @import "larger.less"; 11 | @import "fixed-width.less"; 12 | @import "list.less"; 13 | @import "bordered-pulled.less"; 14 | @import "animated.less"; 15 | @import "rotated-flipped.less"; 16 | @import "stacked.less"; 17 | @import "icons.less"; 18 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/larger.less: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .@{fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .@{fa-css-prefix}-2x { font-size: 2em; } 11 | .@{fa-css-prefix}-3x { font-size: 3em; } 12 | .@{fa-css-prefix}-4x { font-size: 4em; } 13 | .@{fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/list.less: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: @fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .@{fa-css-prefix}-li { 11 | position: absolute; 12 | left: -@fa-li-width; 13 | width: @fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.@{fa-css-prefix}-lg { 17 | left: (-@fa-li-width + (4em / 14)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------- 3 | 4 | .fa-icon() { 5 | display: inline-block; 6 | font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | transform: translate(0, 0); // ensures no half-pixel rendering in firefox 12 | 13 | } 14 | 15 | .fa-icon-rotate(@degrees, @rotation) { 16 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); 17 | -webkit-transform: rotate(@degrees); 18 | -ms-transform: rotate(@degrees); 19 | transform: rotate(@degrees); 20 | } 21 | 22 | .fa-icon-flip(@horiz, @vert, @rotation) { 23 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); 24 | -webkit-transform: scale(@horiz, @vert); 25 | -ms-transform: scale(@horiz, @vert); 26 | transform: scale(@horiz, @vert); 27 | } 28 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/path.less: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 7 | src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 8 | url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), 9 | url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 10 | url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 11 | url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/rotated-flipped.less: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } 7 | 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } 9 | .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .@{fa-css-prefix}-rotate-90, 15 | :root .@{fa-css-prefix}-rotate-180, 16 | :root .@{fa-css-prefix}-rotate-270, 17 | :root .@{fa-css-prefix}-flip-horizontal, 18 | :root .@{fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/stacked.less: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .@{fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; } 21 | -------------------------------------------------------------------------------- /assets/css/font-awesome-4.3.0/less/variables.less: -------------------------------------------------------------------------------- 1 | // Variables 2 | // -------------------------- 3 | 4 | @fa-font-path: "../fonts"; 5 | @fa-font-size-base: 14px; 6 | //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts"; // for referencing Bootstrap CDN font files directly 7 | @fa-css-prefix: fa; 8 | @fa-version: "4.3.0"; 9 | @fa-border-color: #eee; 10 | @fa-inverse: #fff; 11 | @fa-li-width: (30em / 14); 12 | 13 | @fa-var-adjust: "\f042"; 14 | @fa-var-adn: "\f170"; 15 | @fa-var-align-center: "\f037"; 16 | @fa-var-align-justify: "\f039"; 17 | @fa-var-align-left: "\f036"; 18 | @fa-var-align-right: "\f038"; 19 | @fa-var-ambulance: "\f0f9"; 20 | @fa-var-anchor: "\f13d"; 21 | @fa-var-android: "\f17b"; 22 | @fa-var-angellist: "\f209"; 23 | @fa-var-angle-double-down: "\f103"; 24 | @fa-var-angle-double-left: "\f100"; 25 | @fa-var-angle-double-right: "\f101"; 26 | @fa-var-angle-double-up: "\f102"; 27 | @fa-var-angle-down: "\f107"; 28 | @fa-var-angle-left: "\f104"; 29 | @fa-var-angle-right: "\f105"; 30 | @fa-var-angle-up: "\f106"; 31 | @fa-var-apple: "\f179"; 32 | @fa-var-archive: "\f187"; 33 | @fa-var-area-chart: "\f1fe"; 34 | @fa-var-arrow-circle-down: "\f0ab"; 35 | @fa-var-arrow-circle-left: "\f0a8"; 36 | @fa-var-arrow-circle-o-down: "\f01a"; 37 | @fa-var-arrow-circle-o-left: "\f190"; 38 | @fa-var-arrow-circle-o-right: "\f18e"; 39 | @fa-var-arrow-circle-o-up: "\f01b"; 40 | @fa-var-arrow-circle-right: "\f0a9"; 41 | @fa-var-arrow-circle-up: "\f0aa"; 42 | @fa-var-arrow-down: "\f063"; 43 | @fa-var-arrow-left: "\f060"; 44 | @fa-var-arrow-right: "\f061"; 45 | @fa-var-arrow-up: "\f062"; 46 | @fa-var-arrows: "\f047"; 47 | @fa-var-arrows-alt: "\f0b2"; 48 | @fa-var-arrows-h: "\f07e"; 49 | @fa-var-arrows-v: "\f07d"; 50 | @fa-var-asterisk: "\f069"; 51 | @fa-var-at: "\f1fa"; 52 | @fa-var-automobile: "\f1b9"; 53 | @fa-var-backward: "\f04a"; 54 | @fa-var-ban: "\f05e"; 55 | @fa-var-bank: "\f19c"; 56 | @fa-var-bar-chart: "\f080"; 57 | @fa-var-bar-chart-o: "\f080"; 58 | @fa-var-barcode: "\f02a"; 59 | @fa-var-bars: "\f0c9"; 60 | @fa-var-bed: "\f236"; 61 | @fa-var-beer: "\f0fc"; 62 | @fa-var-behance: "\f1b4"; 63 | @fa-var-behance-square: "\f1b5"; 64 | @fa-var-bell: "\f0f3"; 65 | @fa-var-bell-o: "\f0a2"; 66 | @fa-var-bell-slash: "\f1f6"; 67 | @fa-var-bell-slash-o: "\f1f7"; 68 | @fa-var-bicycle: "\f206"; 69 | @fa-var-binoculars: "\f1e5"; 70 | @fa-var-birthday-cake: "\f1fd"; 71 | @fa-var-bitbucket: "\f171"; 72 | @fa-var-bitbucket-square: "\f172"; 73 | @fa-var-bitcoin: "\f15a"; 74 | @fa-var-bold: "\f032"; 75 | @fa-var-bolt: "\f0e7"; 76 | @fa-var-bomb: "\f1e2"; 77 | @fa-var-book: "\f02d"; 78 | @fa-var-bookmark: "\f02e"; 79 | @fa-var-bookmark-o: "\f097"; 80 | @fa-var-briefcase: "\f0b1"; 81 | @fa-var-btc: "\f15a"; 82 | @fa-var-bug: "\f188"; 83 | @fa-var-building: "\f1ad"; 84 | @fa-var-building-o: "\f0f7"; 85 | @fa-var-bullhorn: "\f0a1"; 86 | @fa-var-bullseye: "\f140"; 87 | @fa-var-bus: "\f207"; 88 | @fa-var-buysellads: "\f20d"; 89 | @fa-var-cab: "\f1ba"; 90 | @fa-var-calculator: "\f1ec"; 91 | @fa-var-calendar: "\f073"; 92 | @fa-var-calendar-o: "\f133"; 93 | @fa-var-camera: "\f030"; 94 | @fa-var-camera-retro: "\f083"; 95 | @fa-var-car: "\f1b9"; 96 | @fa-var-caret-down: "\f0d7"; 97 | @fa-var-caret-left: "\f0d9"; 98 | @fa-var-caret-right: "\f0da"; 99 | @fa-var-caret-square-o-down: "\f150"; 100 | @fa-var-caret-square-o-left: "\f191"; 101 | @fa-var-caret-square-o-right: "\f152"; 102 | @fa-var-caret-square-o-up: "\f151"; 103 | @fa-var-caret-up: "\f0d8"; 104 | @fa-var-cart-arrow-down: "\f218"; 105 | @fa-var-cart-plus: "\f217"; 106 | @fa-var-cc: "\f20a"; 107 | @fa-var-cc-amex: "\f1f3"; 108 | @fa-var-cc-discover: "\f1f2"; 109 | @fa-var-cc-mastercard: "\f1f1"; 110 | @fa-var-cc-paypal: "\f1f4"; 111 | @fa-var-cc-stripe: "\f1f5"; 112 | @fa-var-cc-visa: "\f1f0"; 113 | @fa-var-certificate: "\f0a3"; 114 | @fa-var-chain: "\f0c1"; 115 | @fa-var-chain-broken: "\f127"; 116 | @fa-var-check: "\f00c"; 117 | @fa-var-check-circle: "\f058"; 118 | @fa-var-check-circle-o: "\f05d"; 119 | @fa-var-check-square: "\f14a"; 120 | @fa-var-check-square-o: "\f046"; 121 | @fa-var-chevron-circle-down: "\f13a"; 122 | @fa-var-chevron-circle-left: "\f137"; 123 | @fa-var-chevron-circle-right: "\f138"; 124 | @fa-var-chevron-circle-up: "\f139"; 125 | @fa-var-chevron-down: "\f078"; 126 | @fa-var-chevron-left: "\f053"; 127 | @fa-var-chevron-right: "\f054"; 128 | @fa-var-chevron-up: "\f077"; 129 | @fa-var-child: "\f1ae"; 130 | @fa-var-circle: "\f111"; 131 | @fa-var-circle-o: "\f10c"; 132 | @fa-var-circle-o-notch: "\f1ce"; 133 | @fa-var-circle-thin: "\f1db"; 134 | @fa-var-clipboard: "\f0ea"; 135 | @fa-var-clock-o: "\f017"; 136 | @fa-var-close: "\f00d"; 137 | @fa-var-cloud: "\f0c2"; 138 | @fa-var-cloud-download: "\f0ed"; 139 | @fa-var-cloud-upload: "\f0ee"; 140 | @fa-var-cny: "\f157"; 141 | @fa-var-code: "\f121"; 142 | @fa-var-code-fork: "\f126"; 143 | @fa-var-codepen: "\f1cb"; 144 | @fa-var-coffee: "\f0f4"; 145 | @fa-var-cog: "\f013"; 146 | @fa-var-cogs: "\f085"; 147 | @fa-var-columns: "\f0db"; 148 | @fa-var-comment: "\f075"; 149 | @fa-var-comment-o: "\f0e5"; 150 | @fa-var-comments: "\f086"; 151 | @fa-var-comments-o: "\f0e6"; 152 | @fa-var-compass: "\f14e"; 153 | @fa-var-compress: "\f066"; 154 | @fa-var-connectdevelop: "\f20e"; 155 | @fa-var-copy: "\f0c5"; 156 | @fa-var-copyright: "\f1f9"; 157 | @fa-var-credit-card: "\f09d"; 158 | @fa-var-crop: "\f125"; 159 | @fa-var-crosshairs: "\f05b"; 160 | @fa-var-css3: "\f13c"; 161 | @fa-var-cube: "\f1b2"; 162 | @fa-var-cubes: "\f1b3"; 163 | @fa-var-cut: "\f0c4"; 164 | @fa-var-cutlery: "\f0f5"; 165 | @fa-var-dashboard: "\f0e4"; 166 | @fa-var-dashcube: "\f210"; 167 | @fa-var-database: "\f1c0"; 168 | @fa-var-dedent: "\f03b"; 169 | @fa-var-delicious: "\f1a5"; 170 | @fa-var-desktop: "\f108"; 171 | @fa-var-deviantart: "\f1bd"; 172 | @fa-var-diamond: "\f219"; 173 | @fa-var-digg: "\f1a6"; 174 | @fa-var-dollar: "\f155"; 175 | @fa-var-dot-circle-o: "\f192"; 176 | @fa-var-download: "\f019"; 177 | @fa-var-dribbble: "\f17d"; 178 | @fa-var-dropbox: "\f16b"; 179 | @fa-var-drupal: "\f1a9"; 180 | @fa-var-edit: "\f044"; 181 | @fa-var-eject: "\f052"; 182 | @fa-var-ellipsis-h: "\f141"; 183 | @fa-var-ellipsis-v: "\f142"; 184 | @fa-var-empire: "\f1d1"; 185 | @fa-var-envelope: "\f0e0"; 186 | @fa-var-envelope-o: "\f003"; 187 | @fa-var-envelope-square: "\f199"; 188 | @fa-var-eraser: "\f12d"; 189 | @fa-var-eur: "\f153"; 190 | @fa-var-euro: "\f153"; 191 | @fa-var-exchange: "\f0ec"; 192 | @fa-var-exclamation: "\f12a"; 193 | @fa-var-exclamation-circle: "\f06a"; 194 | @fa-var-exclamation-triangle: "\f071"; 195 | @fa-var-expand: "\f065"; 196 | @fa-var-external-link: "\f08e"; 197 | @fa-var-external-link-square: "\f14c"; 198 | @fa-var-eye: "\f06e"; 199 | @fa-var-eye-slash: "\f070"; 200 | @fa-var-eyedropper: "\f1fb"; 201 | @fa-var-facebook: "\f09a"; 202 | @fa-var-facebook-f: "\f09a"; 203 | @fa-var-facebook-official: "\f230"; 204 | @fa-var-facebook-square: "\f082"; 205 | @fa-var-fast-backward: "\f049"; 206 | @fa-var-fast-forward: "\f050"; 207 | @fa-var-fax: "\f1ac"; 208 | @fa-var-female: "\f182"; 209 | @fa-var-fighter-jet: "\f0fb"; 210 | @fa-var-file: "\f15b"; 211 | @fa-var-file-archive-o: "\f1c6"; 212 | @fa-var-file-audio-o: "\f1c7"; 213 | @fa-var-file-code-o: "\f1c9"; 214 | @fa-var-file-excel-o: "\f1c3"; 215 | @fa-var-file-image-o: "\f1c5"; 216 | @fa-var-file-movie-o: "\f1c8"; 217 | @fa-var-file-o: "\f016"; 218 | @fa-var-file-pdf-o: "\f1c1"; 219 | @fa-var-file-photo-o: "\f1c5"; 220 | @fa-var-file-picture-o: "\f1c5"; 221 | @fa-var-file-powerpoint-o: "\f1c4"; 222 | @fa-var-file-sound-o: "\f1c7"; 223 | @fa-var-file-text: "\f15c"; 224 | @fa-var-file-text-o: "\f0f6"; 225 | @fa-var-file-video-o: "\f1c8"; 226 | @fa-var-file-word-o: "\f1c2"; 227 | @fa-var-file-zip-o: "\f1c6"; 228 | @fa-var-files-o: "\f0c5"; 229 | @fa-var-film: "\f008"; 230 | @fa-var-filter: "\f0b0"; 231 | @fa-var-fire: "\f06d"; 232 | @fa-var-fire-extinguisher: "\f134"; 233 | @fa-var-flag: "\f024"; 234 | @fa-var-flag-checkered: "\f11e"; 235 | @fa-var-flag-o: "\f11d"; 236 | @fa-var-flash: "\f0e7"; 237 | @fa-var-flask: "\f0c3"; 238 | @fa-var-flickr: "\f16e"; 239 | @fa-var-floppy-o: "\f0c7"; 240 | @fa-var-folder: "\f07b"; 241 | @fa-var-folder-o: "\f114"; 242 | @fa-var-folder-open: "\f07c"; 243 | @fa-var-folder-open-o: "\f115"; 244 | @fa-var-font: "\f031"; 245 | @fa-var-forumbee: "\f211"; 246 | @fa-var-forward: "\f04e"; 247 | @fa-var-foursquare: "\f180"; 248 | @fa-var-frown-o: "\f119"; 249 | @fa-var-futbol-o: "\f1e3"; 250 | @fa-var-gamepad: "\f11b"; 251 | @fa-var-gavel: "\f0e3"; 252 | @fa-var-gbp: "\f154"; 253 | @fa-var-ge: "\f1d1"; 254 | @fa-var-gear: "\f013"; 255 | @fa-var-gears: "\f085"; 256 | @fa-var-genderless: "\f1db"; 257 | @fa-var-gift: "\f06b"; 258 | @fa-var-git: "\f1d3"; 259 | @fa-var-git-square: "\f1d2"; 260 | @fa-var-github: "\f09b"; 261 | @fa-var-github-alt: "\f113"; 262 | @fa-var-github-square: "\f092"; 263 | @fa-var-gittip: "\f184"; 264 | @fa-var-glass: "\f000"; 265 | @fa-var-globe: "\f0ac"; 266 | @fa-var-google: "\f1a0"; 267 | @fa-var-google-plus: "\f0d5"; 268 | @fa-var-google-plus-square: "\f0d4"; 269 | @fa-var-google-wallet: "\f1ee"; 270 | @fa-var-graduation-cap: "\f19d"; 271 | @fa-var-gratipay: "\f184"; 272 | @fa-var-group: "\f0c0"; 273 | @fa-var-h-square: "\f0fd"; 274 | @fa-var-hacker-news: "\f1d4"; 275 | @fa-var-hand-o-down: "\f0a7"; 276 | @fa-var-hand-o-left: "\f0a5"; 277 | @fa-var-hand-o-right: "\f0a4"; 278 | @fa-var-hand-o-up: "\f0a6"; 279 | @fa-var-hdd-o: "\f0a0"; 280 | @fa-var-header: "\f1dc"; 281 | @fa-var-headphones: "\f025"; 282 | @fa-var-heart: "\f004"; 283 | @fa-var-heart-o: "\f08a"; 284 | @fa-var-heartbeat: "\f21e"; 285 | @fa-var-history: "\f1da"; 286 | @fa-var-home: "\f015"; 287 | @fa-var-hospital-o: "\f0f8"; 288 | @fa-var-hotel: "\f236"; 289 | @fa-var-html5: "\f13b"; 290 | @fa-var-ils: "\f20b"; 291 | @fa-var-image: "\f03e"; 292 | @fa-var-inbox: "\f01c"; 293 | @fa-var-indent: "\f03c"; 294 | @fa-var-info: "\f129"; 295 | @fa-var-info-circle: "\f05a"; 296 | @fa-var-inr: "\f156"; 297 | @fa-var-instagram: "\f16d"; 298 | @fa-var-institution: "\f19c"; 299 | @fa-var-ioxhost: "\f208"; 300 | @fa-var-italic: "\f033"; 301 | @fa-var-joomla: "\f1aa"; 302 | @fa-var-jpy: "\f157"; 303 | @fa-var-jsfiddle: "\f1cc"; 304 | @fa-var-key: "\f084"; 305 | @fa-var-keyboard-o: "\f11c"; 306 | @fa-var-krw: "\f159"; 307 | @fa-var-language: "\f1ab"; 308 | @fa-var-laptop: "\f109"; 309 | @fa-var-lastfm: "\f202"; 310 | @fa-var-lastfm-square: "\f203"; 311 | @fa-var-leaf: "\f06c"; 312 | @fa-var-leanpub: "\f212"; 313 | @fa-var-legal: "\f0e3"; 314 | @fa-var-lemon-o: "\f094"; 315 | @fa-var-level-down: "\f149"; 316 | @fa-var-level-up: "\f148"; 317 | @fa-var-life-bouy: "\f1cd"; 318 | @fa-var-life-buoy: "\f1cd"; 319 | @fa-var-life-ring: "\f1cd"; 320 | @fa-var-life-saver: "\f1cd"; 321 | @fa-var-lightbulb-o: "\f0eb"; 322 | @fa-var-line-chart: "\f201"; 323 | @fa-var-link: "\f0c1"; 324 | @fa-var-linkedin: "\f0e1"; 325 | @fa-var-linkedin-square: "\f08c"; 326 | @fa-var-linux: "\f17c"; 327 | @fa-var-list: "\f03a"; 328 | @fa-var-list-alt: "\f022"; 329 | @fa-var-list-ol: "\f0cb"; 330 | @fa-var-list-ul: "\f0ca"; 331 | @fa-var-location-arrow: "\f124"; 332 | @fa-var-lock: "\f023"; 333 | @fa-var-long-arrow-down: "\f175"; 334 | @fa-var-long-arrow-left: "\f177"; 335 | @fa-var-long-arrow-right: "\f178"; 336 | @fa-var-long-arrow-up: "\f176"; 337 | @fa-var-magic: "\f0d0"; 338 | @fa-var-magnet: "\f076"; 339 | @fa-var-mail-forward: "\f064"; 340 | @fa-var-mail-reply: "\f112"; 341 | @fa-var-mail-reply-all: "\f122"; 342 | @fa-var-male: "\f183"; 343 | @fa-var-map-marker: "\f041"; 344 | @fa-var-mars: "\f222"; 345 | @fa-var-mars-double: "\f227"; 346 | @fa-var-mars-stroke: "\f229"; 347 | @fa-var-mars-stroke-h: "\f22b"; 348 | @fa-var-mars-stroke-v: "\f22a"; 349 | @fa-var-maxcdn: "\f136"; 350 | @fa-var-meanpath: "\f20c"; 351 | @fa-var-medium: "\f23a"; 352 | @fa-var-medkit: "\f0fa"; 353 | @fa-var-meh-o: "\f11a"; 354 | @fa-var-mercury: "\f223"; 355 | @fa-var-microphone: "\f130"; 356 | @fa-var-microphone-slash: "\f131"; 357 | @fa-var-minus: "\f068"; 358 | @fa-var-minus-circle: "\f056"; 359 | @fa-var-minus-square: "\f146"; 360 | @fa-var-minus-square-o: "\f147"; 361 | @fa-var-mobile: "\f10b"; 362 | @fa-var-mobile-phone: "\f10b"; 363 | @fa-var-money: "\f0d6"; 364 | @fa-var-moon-o: "\f186"; 365 | @fa-var-mortar-board: "\f19d"; 366 | @fa-var-motorcycle: "\f21c"; 367 | @fa-var-music: "\f001"; 368 | @fa-var-navicon: "\f0c9"; 369 | @fa-var-neuter: "\f22c"; 370 | @fa-var-newspaper-o: "\f1ea"; 371 | @fa-var-openid: "\f19b"; 372 | @fa-var-outdent: "\f03b"; 373 | @fa-var-pagelines: "\f18c"; 374 | @fa-var-paint-brush: "\f1fc"; 375 | @fa-var-paper-plane: "\f1d8"; 376 | @fa-var-paper-plane-o: "\f1d9"; 377 | @fa-var-paperclip: "\f0c6"; 378 | @fa-var-paragraph: "\f1dd"; 379 | @fa-var-paste: "\f0ea"; 380 | @fa-var-pause: "\f04c"; 381 | @fa-var-paw: "\f1b0"; 382 | @fa-var-paypal: "\f1ed"; 383 | @fa-var-pencil: "\f040"; 384 | @fa-var-pencil-square: "\f14b"; 385 | @fa-var-pencil-square-o: "\f044"; 386 | @fa-var-phone: "\f095"; 387 | @fa-var-phone-square: "\f098"; 388 | @fa-var-photo: "\f03e"; 389 | @fa-var-picture-o: "\f03e"; 390 | @fa-var-pie-chart: "\f200"; 391 | @fa-var-pied-piper: "\f1a7"; 392 | @fa-var-pied-piper-alt: "\f1a8"; 393 | @fa-var-pinterest: "\f0d2"; 394 | @fa-var-pinterest-p: "\f231"; 395 | @fa-var-pinterest-square: "\f0d3"; 396 | @fa-var-plane: "\f072"; 397 | @fa-var-play: "\f04b"; 398 | @fa-var-play-circle: "\f144"; 399 | @fa-var-play-circle-o: "\f01d"; 400 | @fa-var-plug: "\f1e6"; 401 | @fa-var-plus: "\f067"; 402 | @fa-var-plus-circle: "\f055"; 403 | @fa-var-plus-square: "\f0fe"; 404 | @fa-var-plus-square-o: "\f196"; 405 | @fa-var-power-off: "\f011"; 406 | @fa-var-print: "\f02f"; 407 | @fa-var-puzzle-piece: "\f12e"; 408 | @fa-var-qq: "\f1d6"; 409 | @fa-var-qrcode: "\f029"; 410 | @fa-var-question: "\f128"; 411 | @fa-var-question-circle: "\f059"; 412 | @fa-var-quote-left: "\f10d"; 413 | @fa-var-quote-right: "\f10e"; 414 | @fa-var-ra: "\f1d0"; 415 | @fa-var-random: "\f074"; 416 | @fa-var-rebel: "\f1d0"; 417 | @fa-var-recycle: "\f1b8"; 418 | @fa-var-reddit: "\f1a1"; 419 | @fa-var-reddit-square: "\f1a2"; 420 | @fa-var-refresh: "\f021"; 421 | @fa-var-remove: "\f00d"; 422 | @fa-var-renren: "\f18b"; 423 | @fa-var-reorder: "\f0c9"; 424 | @fa-var-repeat: "\f01e"; 425 | @fa-var-reply: "\f112"; 426 | @fa-var-reply-all: "\f122"; 427 | @fa-var-retweet: "\f079"; 428 | @fa-var-rmb: "\f157"; 429 | @fa-var-road: "\f018"; 430 | @fa-var-rocket: "\f135"; 431 | @fa-var-rotate-left: "\f0e2"; 432 | @fa-var-rotate-right: "\f01e"; 433 | @fa-var-rouble: "\f158"; 434 | @fa-var-rss: "\f09e"; 435 | @fa-var-rss-square: "\f143"; 436 | @fa-var-rub: "\f158"; 437 | @fa-var-ruble: "\f158"; 438 | @fa-var-rupee: "\f156"; 439 | @fa-var-save: "\f0c7"; 440 | @fa-var-scissors: "\f0c4"; 441 | @fa-var-search: "\f002"; 442 | @fa-var-search-minus: "\f010"; 443 | @fa-var-search-plus: "\f00e"; 444 | @fa-var-sellsy: "\f213"; 445 | @fa-var-send: "\f1d8"; 446 | @fa-var-send-o: "\f1d9"; 447 | @fa-var-server: "\f233"; 448 | @fa-var-share: "\f064"; 449 | @fa-var-share-alt: "\f1e0"; 450 | @fa-var-share-alt-square: "\f1e1"; 451 | @fa-var-share-square: "\f14d"; 452 | @fa-var-share-square-o: "\f045"; 453 | @fa-var-shekel: "\f20b"; 454 | @fa-var-sheqel: "\f20b"; 455 | @fa-var-shield: "\f132"; 456 | @fa-var-ship: "\f21a"; 457 | @fa-var-shirtsinbulk: "\f214"; 458 | @fa-var-shopping-cart: "\f07a"; 459 | @fa-var-sign-in: "\f090"; 460 | @fa-var-sign-out: "\f08b"; 461 | @fa-var-signal: "\f012"; 462 | @fa-var-simplybuilt: "\f215"; 463 | @fa-var-sitemap: "\f0e8"; 464 | @fa-var-skyatlas: "\f216"; 465 | @fa-var-skype: "\f17e"; 466 | @fa-var-slack: "\f198"; 467 | @fa-var-sliders: "\f1de"; 468 | @fa-var-slideshare: "\f1e7"; 469 | @fa-var-smile-o: "\f118"; 470 | @fa-var-soccer-ball-o: "\f1e3"; 471 | @fa-var-sort: "\f0dc"; 472 | @fa-var-sort-alpha-asc: "\f15d"; 473 | @fa-var-sort-alpha-desc: "\f15e"; 474 | @fa-var-sort-amount-asc: "\f160"; 475 | @fa-var-sort-amount-desc: "\f161"; 476 | @fa-var-sort-asc: "\f0de"; 477 | @fa-var-sort-desc: "\f0dd"; 478 | @fa-var-sort-down: "\f0dd"; 479 | @fa-var-sort-numeric-asc: "\f162"; 480 | @fa-var-sort-numeric-desc: "\f163"; 481 | @fa-var-sort-up: "\f0de"; 482 | @fa-var-soundcloud: "\f1be"; 483 | @fa-var-space-shuttle: "\f197"; 484 | @fa-var-spinner: "\f110"; 485 | @fa-var-spoon: "\f1b1"; 486 | @fa-var-spotify: "\f1bc"; 487 | @fa-var-square: "\f0c8"; 488 | @fa-var-square-o: "\f096"; 489 | @fa-var-stack-exchange: "\f18d"; 490 | @fa-var-stack-overflow: "\f16c"; 491 | @fa-var-star: "\f005"; 492 | @fa-var-star-half: "\f089"; 493 | @fa-var-star-half-empty: "\f123"; 494 | @fa-var-star-half-full: "\f123"; 495 | @fa-var-star-half-o: "\f123"; 496 | @fa-var-star-o: "\f006"; 497 | @fa-var-steam: "\f1b6"; 498 | @fa-var-steam-square: "\f1b7"; 499 | @fa-var-step-backward: "\f048"; 500 | @fa-var-step-forward: "\f051"; 501 | @fa-var-stethoscope: "\f0f1"; 502 | @fa-var-stop: "\f04d"; 503 | @fa-var-street-view: "\f21d"; 504 | @fa-var-strikethrough: "\f0cc"; 505 | @fa-var-stumbleupon: "\f1a4"; 506 | @fa-var-stumbleupon-circle: "\f1a3"; 507 | @fa-var-subscript: "\f12c"; 508 | @fa-var-subway: "\f239"; 509 | @fa-var-suitcase: "\f0f2"; 510 | @fa-var-sun-o: "\f185"; 511 | @fa-var-superscript: "\f12b"; 512 | @fa-var-support: "\f1cd"; 513 | @fa-var-table: "\f0ce"; 514 | @fa-var-tablet: "\f10a"; 515 | @fa-var-tachometer: "\f0e4"; 516 | @fa-var-tag: "\f02b"; 517 | @fa-var-tags: "\f02c"; 518 | @fa-var-tasks: "\f0ae"; 519 | @fa-var-taxi: "\f1ba"; 520 | @fa-var-tencent-weibo: "\f1d5"; 521 | @fa-var-terminal: "\f120"; 522 | @fa-var-text-height: "\f034"; 523 | @fa-var-text-width: "\f035"; 524 | @fa-var-th: "\f00a"; 525 | @fa-var-th-large: "\f009"; 526 | @fa-var-th-list: "\f00b"; 527 | @fa-var-thumb-tack: "\f08d"; 528 | @fa-var-thumbs-down: "\f165"; 529 | @fa-var-thumbs-o-down: "\f088"; 530 | @fa-var-thumbs-o-up: "\f087"; 531 | @fa-var-thumbs-up: "\f164"; 532 | @fa-var-ticket: "\f145"; 533 | @fa-var-times: "\f00d"; 534 | @fa-var-times-circle: "\f057"; 535 | @fa-var-times-circle-o: "\f05c"; 536 | @fa-var-tint: "\f043"; 537 | @fa-var-toggle-down: "\f150"; 538 | @fa-var-toggle-left: "\f191"; 539 | @fa-var-toggle-off: "\f204"; 540 | @fa-var-toggle-on: "\f205"; 541 | @fa-var-toggle-right: "\f152"; 542 | @fa-var-toggle-up: "\f151"; 543 | @fa-var-train: "\f238"; 544 | @fa-var-transgender: "\f224"; 545 | @fa-var-transgender-alt: "\f225"; 546 | @fa-var-trash: "\f1f8"; 547 | @fa-var-trash-o: "\f014"; 548 | @fa-var-tree: "\f1bb"; 549 | @fa-var-trello: "\f181"; 550 | @fa-var-trophy: "\f091"; 551 | @fa-var-truck: "\f0d1"; 552 | @fa-var-try: "\f195"; 553 | @fa-var-tty: "\f1e4"; 554 | @fa-var-tumblr: "\f173"; 555 | @fa-var-tumblr-square: "\f174"; 556 | @fa-var-turkish-lira: "\f195"; 557 | @fa-var-twitch: "\f1e8"; 558 | @fa-var-twitter: "\f099"; 559 | @fa-var-twitter-square: "\f081"; 560 | @fa-var-umbrella: "\f0e9"; 561 | @fa-var-underline: "\f0cd"; 562 | @fa-var-undo: "\f0e2"; 563 | @fa-var-university: "\f19c"; 564 | @fa-var-unlink: "\f127"; 565 | @fa-var-unlock: "\f09c"; 566 | @fa-var-unlock-alt: "\f13e"; 567 | @fa-var-unsorted: "\f0dc"; 568 | @fa-var-upload: "\f093"; 569 | @fa-var-usd: "\f155"; 570 | @fa-var-user: "\f007"; 571 | @fa-var-user-md: "\f0f0"; 572 | @fa-var-user-plus: "\f234"; 573 | @fa-var-user-secret: "\f21b"; 574 | @fa-var-user-times: "\f235"; 575 | @fa-var-users: "\f0c0"; 576 | @fa-var-venus: "\f221"; 577 | @fa-var-venus-double: "\f226"; 578 | @fa-var-venus-mars: "\f228"; 579 | @fa-var-viacoin: "\f237"; 580 | @fa-var-video-camera: "\f03d"; 581 | @fa-var-vimeo-square: "\f194"; 582 | @fa-var-vine: "\f1ca"; 583 | @fa-var-vk: "\f189"; 584 | @fa-var-volume-down: "\f027"; 585 | @fa-var-volume-off: "\f026"; 586 | @fa-var-volume-up: "\f028"; 587 | @fa-var-warning: "\f071"; 588 | @fa-var-wechat: "\f1d7"; 589 | @fa-var-weibo: "\f18a"; 590 | @fa-var-weixin: "\f1d7"; 591 | @fa-var-whatsapp: "\f232"; 592 | @fa-var-wheelchair: "\f193"; 593 | @fa-var-wifi: "\f1eb"; 594 | @fa-var-windows: "\f17a"; 595 | @fa-var-won: "\f159"; 596 | @fa-var-wordpress: "\f19a"; 597 | @fa-var-wrench: "\f0ad"; 598 | @fa-var-xing: "\f168"; 599 | @fa-var-xing-square: "\f169"; 600 | @fa-var-yahoo: "\f19e"; 601 | @fa-var-yelp: "\f1e9"; 602 | @fa-var-yen: "\f157"; 603 | @fa-var-youtube: "\f167"; 604 | @fa-var-youtube-play: "\f16a"; 605 | @fa-var-youtube-square: "\f166"; 606 | 607 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Global reset */ 2 | 3 | body, html{ 4 | height: 100%; 5 | } 6 | 7 | *{ 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | -webkit-user-select:none; 12 | -ms-user-select:none; 13 | user-select:none; 14 | } 15 | 16 | /*-------------------- 17 | The file dropzone 18 | ----------------------*/ 19 | 20 | #drop-zone{ 21 | position: fixed; 22 | left: 0; 23 | top: 0; 24 | width: 100%; 25 | height: 100%; 26 | z-index: 100; 27 | 28 | background-color: rgba(11, 133, 161, 0.75); 29 | color: #fff; 30 | text-align: center; 31 | font: bold 36px sans-serif; 32 | line-height: 90vh; 33 | 34 | transition: 0.4s; 35 | } 36 | 37 | #drop-zone.hidden{ 38 | opacity: 0; 39 | pointer-events: none; 40 | transition: 0.6s; 41 | } 42 | 43 | 44 | /* App flex container */ 45 | 46 | #container{ 47 | height:90%; 48 | background-color: #fff; 49 | display: -webkit-flex; 50 | display: flex; 51 | -webkit-flex-direction: column; 52 | flex-direction: column; 53 | font: bold 15px sans-serif; 54 | overflow: hidden; 55 | } 56 | 57 | /*--------------------------- 58 | Cover Art Section 59 | ----------------------------*/ 60 | 61 | #cover-art{ 62 | display: -webkit-flex; 63 | display: flex; 64 | -webkit-flex: 1 auto; 65 | flex: 1 auto; 66 | position: relative; 67 | overflow: hidden; 68 | pointer-events: none; 69 | } 70 | 71 | #cover-art-big{ 72 | -webkit-flex: 1; 73 | flex: 1; 74 | background-color: #26292C; 75 | background-size: cover; 76 | -webkit-filter: blur(7px); 77 | margin: -12px ; 78 | } 79 | 80 | #cover-art-small{ 81 | position: absolute; 82 | width: 500px; 83 | height: 500px; 84 | top: 50%; 85 | left: 50%; 86 | margin: -250px auto auto -250px; 87 | border-radius: 2px; 88 | } 89 | 90 | 91 | /* Instructions */ 92 | .howTo{ 93 | margin-top: 10; 94 | text-align: center; 95 | 96 | } 97 | 98 | .instructions{ 99 | position: absolute; 100 | font: 16px sans-serif; 101 | color: #fff; 102 | text-align: center; 103 | top: 50%; 104 | left: 50%; 105 | margin-left: -140px; 106 | margin-top: 280px; 107 | } 108 | 109 | #container.disabled .instructions{ 110 | display: block; 111 | } 112 | 113 | 114 | #container.disabled #wave{ 115 | display: none; 116 | } 117 | 118 | /*--------------------------- 119 | Player Control Bar 120 | ----------------------------*/ 121 | 122 | #control-bar{ 123 | display: -webkit-flex; 124 | display: flex; 125 | color: #3D464A; 126 | text-align: left; 127 | 128 | position: relative; 129 | z-index: 10; 130 | 131 | } 132 | 133 | #container.disabled #control-bar{ 134 | pointer-events: none; 135 | } 136 | 137 | .player-control{ 138 | -webkit-flex: 2; 139 | flex:2; 140 | display: -webkit-flex; 141 | display: flex; 142 | } 143 | 144 | .player-control div{ 145 | -webkit-flex: 1; 146 | flex: 1; 147 | background-color: #fff; 148 | text-align: center; 149 | line-height: 60px; 150 | height: 100%; 151 | cursor: pointer; 152 | } 153 | 154 | #container.disabled .player-control div{ 155 | color: #758389; 156 | } 157 | 158 | #shuffle-button, 159 | #repeat-button{ 160 | line-height: 60px; 161 | color: #758389; 162 | position: relative; 163 | } 164 | 165 | #shuffle-button.active, 166 | #repeat-button.active{ 167 | line-height: 60px; 168 | color: #000; 169 | } 170 | 171 | #repeat-button i span{ 172 | display: none; 173 | position: absolute; 174 | font: bold 12px sans-serif; 175 | color: rgb(71, 91, 118); 176 | top: 6px; 177 | left: 13px; 178 | } 179 | 180 | /*--------------------------- 181 | Playlist 182 | ---------------------------*/ 183 | 184 | #playlist { 185 | position: relative; 186 | display: -webkit-flex; 187 | display: flex; 188 | -webkit-flex: 3; 189 | flex: 3; 190 | text-align: left; 191 | } 192 | 193 | /* Currently playing track details */ 194 | 195 | #track-details{ 196 | position: relative; 197 | -webkit-flex: 1; 198 | flex:1; 199 | display: -webkit-flex; 200 | display: flex; 201 | z-index: 20; 202 | background-color: #fff; 203 | padding: 0 30px 0 40px; 204 | cursor: pointer; 205 | 206 | white-space: nowrap; 207 | } 208 | 209 | 210 | #track-details > i{ 211 | line-height: 60px; 212 | margin-right: 15px; 213 | } 214 | 215 | #container.disabled #track-details{ 216 | color:#758389; 217 | } 218 | 219 | #container.disabled #track-details > i{ 220 | display: none; 221 | } 222 | 223 | #track-details #track-desc{ 224 | line-height: 60px; 225 | -webkit-flex: 6; 226 | flex: 6; 227 | overflow: hidden; 228 | text-overflow: ellipsis; 229 | pointer-events: none; 230 | padding-right: 15px; 231 | font-weight: normal; 232 | } 233 | 234 | #track-details #track-time{ 235 | line-height: 60px; 236 | -webkit-flex: 1; 237 | flex: 1; 238 | overflow: hidden; 239 | text-overflow: ellipsis; 240 | pointer-events: none; 241 | } 242 | 243 | /* Expanding Playlist Bar */ 244 | 245 | #expand-bar{ 246 | position: absolute; 247 | z-index: 10; 248 | left:0; 249 | bottom:0; 250 | width: 100%; 251 | background-color: #fff; 252 | color: #222; 253 | cursor: default; 254 | 255 | transition: height 0.4s, box-shadow 0.2s; 256 | 257 | height:100vh; 258 | 259 | box-shadow: -1px 0 2px 1px rgba(0, 0, 0, 0.15); 260 | } 261 | 262 | #expand-bar.hidden{ 263 | height:0; 264 | box-shadow: none; 265 | } 266 | 267 | #expand-bar form{ 268 | position: relative; 269 | padding: 18px; 270 | box-shadow: 0 1px 2px rgba(0,0,0,0.4); 271 | width:100%; 272 | background-color: #fff; 273 | z-index: 40; 274 | } 275 | 276 | 277 | #expand-bar form div{ 278 | position: absolute; 279 | left: 113px; 280 | right: 20px; 281 | top: 11px; 282 | } 283 | 284 | #expand-bar form input{ 285 | width: 100%; 286 | font-size: 14px; 287 | padding: 6px 8px; 288 | border: 1px solid #ccc; 289 | border-radius: 2px; 290 | box-shadow: 0 1px 1px #eee; 291 | } 292 | 293 | /* Playlist */ 294 | 295 | #list{ 296 | position: absolute; 297 | left:0; 298 | top:55px; 299 | bottom:60px; 300 | list-style: none; 301 | width: 100%; 302 | overflow-y: auto; 303 | overflow-x: hidden; 304 | } 305 | 306 | 307 | #list li:nth-child(even){ 308 | background-color: #F8F7F9; 309 | } 310 | 311 | .track{ 312 | padding: 18px; 313 | cursor: pointer; 314 | overflow: hidden; 315 | color: #3D464A; 316 | position: relative; 317 | } 318 | 319 | .track.active{ 320 | background-color: #DBE0E4!important; 321 | } 322 | 323 | .track p.title{ 324 | font-size: 18px; 325 | margin-top: 14px; 326 | margin-bottom: 4px; 327 | font-weight:bold; 328 | } 329 | 330 | .track p.artist{ 331 | font-weight: normal; 332 | } 333 | 334 | .track div:first-child{ 335 | position: relative; 336 | width: 70px; 337 | height: 70px; 338 | margin-right: 25px; 339 | float: left; 340 | } 341 | 342 | .track .overlay{ 343 | position: absolute; 344 | left:0; 345 | top:0; 346 | width:100%; 347 | height: 100%; 348 | background-color: rgba(0, 0, 0, 0.4); 349 | transition: 0.4s; 350 | opacity: 0; 351 | border-radius: 3px; 352 | } 353 | 354 | .track.active .overlay{ 355 | opacity: 1; 356 | } 357 | 358 | .track div img{ 359 | width: 100%; 360 | border-radius: 3px; 361 | } 362 | 363 | .track span i{ 364 | color: #fff; 365 | font-size: 22px; 366 | line-height: 70px; 367 | left: 28px; 368 | position: absolute; 369 | transition: 0.4s; 370 | opacity: 0; 371 | } 372 | 373 | .track .remove-track{ 374 | position: absolute; 375 | font-size: 22px; 376 | top: 12px; 377 | right: 18px; 378 | color: rgb(121, 121, 121); 379 | display: block; 380 | } 381 | 382 | .track.active span i{ 383 | opacity: 1; 384 | } 385 | 386 | /*--------------------------- 387 | Media queries 388 | ---------------------------*/ 389 | 390 | @media (max-width: 1200px){ 391 | 392 | #control-bar{ 393 | -webkit-flex-flow: column wrap; 394 | flex-flow: column wrap; 395 | } 396 | 397 | .player-control{ 398 | -webkit-order: 2; 399 | order: 2; 400 | } 401 | 402 | #playlist { 403 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 404 | } 405 | 406 | #expand-bar{ 407 | padding-top: 120px; 408 | bottom:60px; 409 | } 410 | 411 | #expand-bar.hidden{ 412 | padding-top: 0; 413 | } 414 | 415 | #list{ 416 | bottom:0; 417 | top:175px; 418 | } 419 | 420 | 421 | } -------------------------------------------------------------------------------- /assets/img/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/img/default.png -------------------------------------------------------------------------------- /assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/assets/img/favicon.ico -------------------------------------------------------------------------------- /assets/js/id3-minimized.js: -------------------------------------------------------------------------------- 1 | function y(h,g,b){var c=g||0,d=0;"string"==typeof h?(d=b||h.length,this.a=function(a){return h.charCodeAt(a+c)&255}):"unknown"==typeof h&&(d=b||IEBinary_getLength(h),this.a=function(a){return IEBinary_getByteAt(h,a+c)});this.l=function(a,f){for(var v=Array(f),b=0;ba&&(a+=65536);return a};this.i=function(a){var f=this.a(a),b=this.a(a+1),d= 2 | this.a(a+2);a=this.a(a+3);f=(((f<<8)+b<<8)+d<<8)+a;0>f&&(f+=4294967296);return f};this.o=function(a){var f=this.a(a),b=this.a(a+1);a=this.a(a+2);f=((f<<8)+b<<8)+a;0>f&&(f+=16777216);return f};this.c=function(a,f){for(var b=[],d=a,e=0;dg||224<=g?b[m]=String.fromCharCode(k):(g=(a[e+c]<<8)+a[e+d],e+=2,b[m]=String.fromCharCode(k,g))}a=new String(b.join(""));a.g=e;break;case "utf-8":l=0;e=Math.min(e||a.length,a.length);239==a[0]&&187==a[1]&&191==a[2]&&(l=3);c=[];for(d=0;lb?c[d]=String.fromCharCode(b):194<=b&&224>b?(m=a[l++],c[d]=String.fromCharCode(((b&31)<<6)+(m&63))):224<=b&&240> 4 | b?(m=a[l++],k=a[l++],c[d]=String.fromCharCode(((b&255)<<12)+((m&63)<<6)+(k&63))):240<=b&&245>b&&(m=a[l++],k=a[l++],g=a[l++],b=((b&7)<<18)+((m&63)<<12)+((k&63)<<6)+(g&63)-65536,c[d]=String.fromCharCode((b>>10)+55296,(b&1023)+56320));a=new String(c.join(""));a.g=l;break;default:e=[];c=c||a.length;for(l=0;lb&&(b=0);a>=blockTotal&&(a=blockTotal-1);return[b,a]}function h(f,g){for(;n[f[0]];)if(f[0]++,f[0]> 8 | f[1]){g&&g();return}for(;n[f[1]];)if(f[1]--,f[0]>f[1]){g&&g();return}var m=[f[0]*e,(f[1]+1)*e-1];c(a,function(a){parseInt(a.getResponseHeader("Content-Length"),10)==d&&(f[0]=0,f[1]=blockTotal-1,m[0]=0,m[1]=d-1);a={data:a.N||a.responseText,offset:m[0]};for(var b=f[0];b<=f[1];b++)n[b]=a;g&&g()},b,m,k,!!g)}var k,r=new y("",0,d),n=[];e=e||2048;f="undefined"===typeof f?0:f;blockTotal=~~((d-1)/e)+1;for(var q in r)r.hasOwnProperty(q)&&"function"===typeof r[q]&&(this[q]=r[q]);this.a=function(a){var b;h(g([a, 9 | a]));b=n[~~(a/e)];if("string"==typeof b.data)return b.data.charCodeAt(a-b.offset)&255;if("unknown"==typeof b.data)return IEBinary_getByteAt(b.data,a-b.offset)};this.f=function(a,b){h(g(a),b)}}(function(){a(h,function(a){a=parseInt(a.getResponseHeader("Content-Length"),10)||-1;g(new f(h,a))},b)})()};(function(h){h.FileAPIReader=function(g,b){return function(c,d){var a=b||new FileReader;a.onload=function(a){d(new y(a.target.result))};a.readAsBinaryString(g)}}})(this);(function(h){var g=h.p={},b={},c=[0,7];g.t=function(d){delete b[d]};g.s=function(){b={}};g.B=function(d,a,f){f=f||{};(f.dataReader||C)(d,function(g){g.f(c,function(){var c="ftypM4A"==g.c(4,7)?ID4:"ID3"==g.c(0,3)?ID3v2:ID3v1;c.m(g,function(){var e=f.tags,h=c.n(g,e),e=b[d]||{},m;for(m in h)h.hasOwnProperty(m)&&(e[m]=h[m]);b[d]=e;a&&a()})})},f.onError)};g.v=function(d){if(!b[d])return null;var a={},c;for(c in b[d])b[d].hasOwnProperty(c)&&(a[c]=b[d][c]);return a};g.A=function(d,a){return b[d]?b[d][a]: 10 | null};h.ID3=h.p;g.loadTags=g.B;g.getAllTags=g.v;g.getTag=g.A;g.clearTags=g.t;g.clearAll=g.s})(this);(function(h){var g=h.q={},b="Blues;Classic Rock;Country;Dance;Disco;Funk;Grunge;Hip-Hop;Jazz;Metal;New Age;Oldies;Other;Pop;R&B;Rap;Reggae;Rock;Techno;Industrial;Alternative;Ska;Death Metal;Pranks;Soundtrack;Euro-Techno;Ambient;Trip-Hop;Vocal;Jazz+Funk;Fusion;Trance;Classical;Instrumental;Acid;House;Game;Sound Clip;Gospel;Noise;AlternRock;Bass;Soul;Punk;Space;Meditative;Instrumental Pop;Instrumental Rock;Ethnic;Gothic;Darkwave;Techno-Industrial;Electronic;Pop-Folk;Eurodance;Dream;Southern Rock;Comedy;Cult;Gangsta;Top 40;Christian Rap;Pop/Funk;Jungle;Native American;Cabaret;New Wave;Psychadelic;Rave;Showtunes;Trailer;Lo-Fi;Tribal;Acid Punk;Acid Jazz;Polka;Retro;Musical;Rock & Roll;Hard Rock;Folk;Folk-Rock;National Folk;Swing;Fast Fusion;Bebob;Latin;Revival;Celtic;Bluegrass;Avantgarde;Gothic Rock;Progressive Rock;Psychedelic Rock;Symphonic Rock;Slow Rock;Big Band;Chorus;Easy Listening;Acoustic;Humour;Speech;Chanson;Opera;Chamber Music;Sonata;Symphony;Booty Bass;Primus;Porn Groove;Satire;Slow Jam;Club;Tango;Samba;Folklore;Ballad;Power Ballad;Rhythmic Soul;Freestyle;Duet;Punk Rock;Drum Solo;Acapella;Euro-House;Dance Hall".split(";"); 11 | g.m=function(b,d){var a=b.h();b.f([a-128-1,a],d)};g.n=function(c){var d=c.h()-128;if("TAG"==c.c(d,3)){var a=c.c(d+3,30).replace(/\0/g,""),f=c.c(d+33,30).replace(/\0/g,""),g=c.c(d+63,30).replace(/\0/g,""),l=c.c(d+93,4).replace(/\0/g,"");if(0==c.a(d+97+28))var e=c.c(d+97,28).replace(/\0/g,""),h=c.a(d+97+29);else e="",h=0;c=c.a(d+97+30);return{version:"1.1",title:a,artist:f,album:g,year:l,comment:e,track:h,genre:255>c?b[c]:""}}return{}};h.ID3v1=h.q})(this);(function(h){function g(a,b){var d=b.a(a),c=b.a(a+1),e=b.a(a+2);return b.a(a+3)&127|(e&127)<<7|(c&127)<<14|(d&127)<<21}var b=h.D={};b.b={};b.frames={BUF:"Recommended buffer size",CNT:"Play counter",COM:"Comments",CRA:"Audio encryption",CRM:"Encrypted meta frame",ETC:"Event timing codes",EQU:"Equalization",GEO:"General encapsulated object",IPL:"Involved people list",LNK:"Linked information",MCI:"Music CD Identifier",MLL:"MPEG location lookup table",PIC:"Attached picture",POP:"Popularimeter",REV:"Reverb", 12 | RVA:"Relative volume adjustment",SLT:"Synchronized lyric/text",STC:"Synced tempo codes",TAL:"Album/Movie/Show title",TBP:"BPM (Beats Per Minute)",TCM:"Composer",TCO:"Content type",TCR:"Copyright message",TDA:"Date",TDY:"Playlist delay",TEN:"Encoded by",TFT:"File type",TIM:"Time",TKE:"Initial key",TLA:"Language(s)",TLE:"Length",TMT:"Media type",TOA:"Original artist(s)/performer(s)",TOF:"Original filename",TOL:"Original Lyricist(s)/text writer(s)",TOR:"Original release year",TOT:"Original album/Movie/Show title", 13 | TP1:"Lead artist(s)/Lead performer(s)/Soloist(s)/Performing group",TP2:"Band/Orchestra/Accompaniment",TP3:"Conductor/Performer refinement",TP4:"Interpreted, remixed, or otherwise modified by",TPA:"Part of a set",TPB:"Publisher",TRC:"ISRC (International Standard Recording Code)",TRD:"Recording dates",TRK:"Track number/Position in set",TSI:"Size",TSS:"Software/hardware and settings used for encoding",TT1:"Content group description",TT2:"Title/Songname/Content description",TT3:"Subtitle/Description refinement", 14 | TXT:"Lyricist/text writer",TXX:"User defined text information frame",TYE:"Year",UFI:"Unique file identifier",ULT:"Unsychronized lyric/text transcription",WAF:"Official audio file webpage",WAR:"Official artist/performer webpage",WAS:"Official audio source webpage",WCM:"Commercial information",WCP:"Copyright/Legal information",WPB:"Publishers official webpage",WXX:"User defined URL link frame",AENC:"Audio encryption",APIC:"Attached picture",COMM:"Comments",COMR:"Commercial frame",ENCR:"Encryption method registration", 15 | EQUA:"Equalization",ETCO:"Event timing codes",GEOB:"General encapsulated object",GRID:"Group identification registration",IPLS:"Involved people list",LINK:"Linked information",MCDI:"Music CD identifier",MLLT:"MPEG location lookup table",OWNE:"Ownership frame",PRIV:"Private frame",PCNT:"Play counter",POPM:"Popularimeter",POSS:"Position synchronisation frame",RBUF:"Recommended buffer size",RVAD:"Relative volume adjustment",RVRB:"Reverb",SYLT:"Synchronized lyric/text",SYTC:"Synchronized tempo codes", 16 | TALB:"Album/Movie/Show title",TBPM:"BPM (beats per minute)",TCOM:"Composer",TCON:"Content type",TCOP:"Copyright message",TDAT:"Date",TDLY:"Playlist delay",TENC:"Encoded by",TEXT:"Lyricist/Text writer",TFLT:"File type",TIME:"Time",TIT1:"Content group description",TIT2:"Title/songname/content description",TIT3:"Subtitle/Description refinement",TKEY:"Initial key",TLAN:"Language(s)",TLEN:"Length",TMED:"Media type",TOAL:"Original album/movie/show title",TOFN:"Original filename",TOLY:"Original lyricist(s)/text writer(s)", 17 | TOPE:"Original artist(s)/performer(s)",TORY:"Original release year",TOWN:"File owner/licensee",TPE1:"Lead performer(s)/Soloist(s)",TPE2:"Band/orchestra/accompaniment",TPE3:"Conductor/performer refinement",TPE4:"Interpreted, remixed, or otherwise modified by",TPOS:"Part of a set",TPUB:"Publisher",TRCK:"Track number/Position in set",TRDA:"Recording dates",TRSN:"Internet radio station name",TRSO:"Internet radio station owner",TSIZ:"Size",TSRC:"ISRC (international standard recording code)",TSSE:"Software/Hardware and settings used for encoding", 18 | TYER:"Year",TXXX:"User defined text information frame",UFID:"Unique file identifier",USER:"Terms of use",USLT:"Unsychronized lyric/text transcription",WCOM:"Commercial information",WCOP:"Copyright/Legal information",WOAF:"Official audio file webpage",WOAR:"Official artist/performer webpage",WOAS:"Official audio source webpage",WORS:"Official internet radio station homepage",WPAY:"Payment",WPUB:"Publishers official webpage",WXXX:"User defined URL link frame"};var c={title:["TIT2","TT2"],artist:["TPE1", 19 | "TP1"],album:["TALB","TAL"],year:["TYER","TYE"],comment:["COMM","COM"],track:["TRCK","TRK"],genre:["TCON","TCO"],picture:["APIC","PIC"],lyrics:["USLT","ULT"]},d=["title","artist","album","track"];b.m=function(a,b){a.f([0,g(6,a)],b)};b.n=function(a,f){var h=0,l=a.a(h+3);if(42.4"};var e=a.a(h+4),t=a.d(h+5,7),m=a.d(h+5,6),u=a.d(h+5,5),k=g(h+6,a),h=h+10;if(m)var r=a.i(h),h=h+(r+4);var l={version:"2."+l+"."+e,major:l,revision:e,flags:{unsynchronisation:t,extended_header:m,experimental_indicator:u}, 20 | size:k},n;if(t)n={};else{for(var k=k-10,t=a,e=f,m={},u=l.major,r=[],q=0,p;p=(e||d)[q];q++)r=r.concat(c[p]||[p]);for(e=r;he.indexOf(n)||(2' + playlist[i].title + ' by ' + playlist[i].artist); 307 | 308 | // Show duration of track. 309 | $('#current').text('0:00'); 310 | $('#total').text(formatTime(duration)); 311 | 312 | // Show the progress of the track in time. 313 | clearInterval(timer); 314 | timer = setInterval(function() { 315 | $('#current').text(formatTime(wavesurfer.getCurrentTime())); 316 | }, 1000); 317 | 318 | // In the playlist array mark the track as currently playing 319 | allTracks.forEach(function (tr) { 320 | tr.playing = false; 321 | }); 322 | playlist[i].playing = true; 323 | 324 | 325 | if(temporarySearchPlaylist.length){ 326 | // If there is a search going on, trigger it again to highlight the right track 327 | renderTrackList(temporarySearchPlaylist); 328 | } 329 | else{ 330 | // If there isn't a search simply highlight the according element from the .track array 331 | $('.track').removeClass('active').eq(i).addClass('active'); 332 | } 333 | } 334 | 335 | }); 336 | 337 | // Event handler when a track finishes playing 338 | wavesurfer.on('finish', function () { 339 | // In case shuffle is on. 340 | if (shuffle){ 341 | if (repeat == 2) { 342 | if (playlist[i]) { 343 | playTrack(i); 344 | } 345 | } 346 | else if (playlist.length > 1) { 347 | var temp = i; 348 | while (i == temp) { 349 | i = Math.floor(Math.random() * playlist.length); 350 | } 351 | if(playlist[i]) { 352 | playTrack(i); 353 | } 354 | } 355 | } 356 | // In case shuffle is off. 357 | else { 358 | if (!repeat) { 359 | if (i >= playlist.length - 1) { 360 | wavesurfer.stop(); 361 | } 362 | else { 363 | i++; 364 | playTrack(i); 365 | } 366 | } 367 | else if (repeat == 1) { 368 | if (i >= playlist.length - 1) { 369 | i = 0; 370 | } 371 | else { 372 | i++; 373 | } 374 | playTrack(i); 375 | } 376 | else if (repeat == 2) { 377 | if (playlist[i]) { 378 | playTrack(i); 379 | } 380 | } 381 | } 382 | 383 | }); 384 | 385 | 386 | wavesurfer.on('seek', function () { 387 | $('#current').text(formatTime(wavesurfer.getCurrentTime())); 388 | }); 389 | 390 | 391 | /*--------------------- 392 | Player controls 393 | ----------------------*/ 394 | 395 | // Pressing the 'next' button 396 | // Plays next track in playlist, or if shuffle is on random track. 397 | $('#next-button').on('click', function () { 398 | 399 | if (!shuffle) { 400 | i++; 401 | if (i > playlist.length - 1) { 402 | i = 0; 403 | } 404 | } 405 | else { 406 | if (playlist.length > 1) { 407 | var temp = i; 408 | while (i == temp) { 409 | i = Math.floor(Math.random() * playlist.length); 410 | } 411 | } 412 | } 413 | 414 | if(playlist[i]) { 415 | playTrack(i); 416 | } 417 | 418 | }); 419 | 420 | // Pressing the 'previous' button. 421 | // If shuffle is off plays previous song from playlist 422 | // If shuffle is on takes song from lastPlayed to keep order. 423 | $('#previous-button').on('click', function () { 424 | 425 | if(!shuffle){ 426 | if(i==0){ 427 | i=playlist.length-1; 428 | } 429 | else{ 430 | i--; 431 | } 432 | } 433 | else{ 434 | lastPlayed.pop(); 435 | i = lastPlayed.pop(); 436 | } 437 | 438 | if(i==undefined || i<0){ 439 | i = 0; 440 | } 441 | 442 | playTrack(i); 443 | 444 | }); 445 | 446 | $('#play-button').on('click', function(){ 447 | wavesurfer.play(); 448 | }); 449 | 450 | $('#pause-button').on('click', function () { 451 | wavesurfer.playPause(); 452 | }); 453 | 454 | $('#stop-button').on('click', function(){ 455 | wavesurfer.stop(); 456 | }); 457 | 458 | // Turn shuffle on and off. 459 | $('#shuffle-button').on('click', function(){ 460 | var that = $(this); 461 | 462 | if(that.hasClass('active')){ 463 | that.removeClass('active'); 464 | that.attr('title', 'Shuffle Off'); 465 | shuffle = false; 466 | } 467 | else{ 468 | that.addClass('active'); 469 | that.attr('title', 'Shuffle On'); 470 | shuffle = true; 471 | } 472 | }); 473 | 474 | // repeat = 0 Repeat is off - when the playlist reaches it's end it will stop 475 | // repeat = 1 Repeat all - when the playlist reaches it's end it will start from begining 476 | // repeat = 2 Repeat Current - repeat track 477 | $('#repeat-button').on('click', function(){ 478 | 479 | var that = $(this); 480 | 481 | if(repeat==0){ 482 | that.addClass('active'); 483 | that.attr('title', 'Repeat All'); 484 | repeat = 1; 485 | } 486 | 487 | else if(repeat==1){ 488 | that.find('span').show(); 489 | that.attr('title', 'Repeat Current'); 490 | repeat = 2; 491 | } 492 | 493 | else if(repeat==2){ 494 | that.find('span').hide(); 495 | that.removeClass('active'); 496 | that.attr('title', 'Repeat Off'); 497 | repeat = 0; 498 | } 499 | 500 | }); 501 | 502 | 503 | /*---------------------- 504 | Playlist navigation 505 | ----------------------*/ 506 | 507 | // Opening and closing the playlist. 508 | $('#track-details').on('click', function () { 509 | var expandBar = $('#expand-bar'); 510 | 511 | if(expandBar.hasClass('hidden')){ 512 | expandBar.removeClass('hidden'); 513 | $(this).attr('title', 'Hide Playlist'); 514 | } 515 | else{ 516 | expandBar.addClass('hidden'); 517 | $(this).attr('title', 'Show Playlist'); 518 | } 519 | }); 520 | 521 | $('#playlist').on('click', function (e) { 522 | 523 | // Get the index of the clicked track. 524 | 525 | var target = $(e.target), 526 | index = target.closest('.track').data('index'); 527 | 528 | if(index!=undefined){ 529 | 530 | // Selecting Tracks 531 | if(!target.hasClass('remove-track')){ 532 | 533 | 534 | // If there was a search made, create a new playlist from the search results. 535 | if(temporarySearchPlaylist.length){ 536 | playlist = temporarySearchPlaylist.slice(0); 537 | temporarySearchPlaylist = []; 538 | lastPlayed = []; 539 | } 540 | 541 | // Play the newly selected track and set it as currently playing (i). 542 | i = index; 543 | 544 | playTrack(i); 545 | 546 | } 547 | // Deleting Tracks 548 | else{ 549 | 550 | var position, 551 | track; 552 | 553 | // If a track is removed while searching. 554 | if(temporarySearchPlaylist.length) { 555 | track = temporarySearchPlaylist[index]; 556 | } 557 | // If a track is removed from normal playback. 558 | else { 559 | track = playlist[index]; 560 | } 561 | 562 | // Remove from allTracks 563 | position = allTracks.indexOf(track); 564 | 565 | if(position != -1) { 566 | allTracks.splice(position, 1); 567 | } 568 | 569 | // Remove from playlist. 570 | position = playlist.indexOf(track); 571 | 572 | if(position != -1) { 573 | playlist.splice(position, 1); 574 | } 575 | 576 | // If we have deleted the currently playing track play next / first 577 | if (track.playing) { 578 | if (i >= playlist.length) { 579 | i = 0; 580 | } 581 | 582 | playTrack(i); 583 | } 584 | 585 | // Trigger search to render the new playlist. 586 | searchInput.trigger('input'); 587 | 588 | if(!playlist.length){ 589 | // Playlist is empty - try to generate new playlist from the allTracks array. 590 | if(allTracks.length){ 591 | playlist = allTracks.slice(0); 592 | renderTrackList(playlist); 593 | i = 0; 594 | playTrack(i); 595 | } 596 | // Playlist is empty, allTracks is empty - deactivate player. 597 | else{ 598 | wavesurfer.empty(); 599 | clearInterval(timer); 600 | $('#cover-art-big').css("background", ""); 601 | $('#cover-art-small').attr('src', 'assets/img/default.png'); 602 | $('#expand-bar').addClass('hidden'); 603 | $('#track-desc').html('There are no tracks loaded in the player.'); 604 | $('#current').text('-'); 605 | $('#total').text('-'); 606 | $('#container').addClass('disabled'); 607 | 608 | startPlayerWhenReady() 609 | } 610 | } 611 | 612 | } 613 | } 614 | 615 | }); 616 | 617 | // Close playlist when clicked on cover art. 618 | $('#container').on('click', function (e) { 619 | if(e.target==this){ 620 | $('#expand-bar').addClass('hidden'); 621 | } 622 | }); 623 | 624 | 625 | 626 | /*---------------------- 627 | Search functionality 628 | -----------------------*/ 629 | 630 | var clearSearchDelay; 631 | 632 | searchInput.on('keydown', function (e) { 633 | 634 | if(e.keyCode == 27){ 635 | $(this).val(''); 636 | $(this).trigger('input'); 637 | } 638 | else if(e.keyCode == 13) { 639 | 640 | e.preventDefault(); 641 | 642 | if ($(this).val().trim().length) { 643 | 644 | var searchString = $(this).val().trim(); 645 | searchTracks(searchString); 646 | clearTimeout(clearSearchDelay); 647 | 648 | } 649 | } 650 | 651 | }); 652 | 653 | searchInput.on('input', function(e){ 654 | e.preventDefault(); 655 | var searchStr = $(this).val().trim(); 656 | 657 | clearTimeout(clearSearchDelay); 658 | 659 | if(!searchStr.length) { 660 | searchInput.val(''); 661 | 662 | searchTracks(); 663 | } 664 | else { 665 | 666 | clearSearchDelay = setTimeout(function() { 667 | if (searchStr.length) { 668 | searchTracks(searchStr); 669 | } 670 | },700); 671 | } 672 | }); 673 | 674 | function searchTracks(query){ 675 | 676 | query = query || ""; 677 | query = query.toLowerCase(); 678 | 679 | temporarySearchPlaylist = allTracks.slice(0); 680 | 681 | if(query.length){ 682 | temporarySearchPlaylist = temporarySearchPlaylist.filter(function (tr) { 683 | if(tr.artist.toLowerCase().indexOf(query) != -1 || tr.title.toLowerCase().indexOf(query) != -1 || tr.album.toLowerCase().indexOf(query) != -1){ 684 | return tr; 685 | } 686 | }); 687 | } 688 | 689 | // Render the newly created search results list. 690 | renderTrackList(temporarySearchPlaylist); 691 | 692 | } 693 | 694 | 695 | /*------------------- 696 | Helper Functions 697 | --------------------*/ 698 | 699 | //Automatically start playlist on file load. 700 | function startPlayerWhenReady(){ 701 | 702 | 703 | var interval = setInterval(function () { 704 | if(playlist[0]){ 705 | playTrack(0); 706 | $('#container').removeClass('disabled'); 707 | clearInterval(interval); 708 | } 709 | },200); 710 | } 711 | 712 | 713 | // Creates html for a track in the playlist. 714 | function returnTrackHTML(song, index){ 715 | 716 | var html = '
  • ' + 723 | '
    ' + 724 | '' + 725 | '' + 726 | '
    ' + 727 | '
    ' + 728 | '

    ' + song.title + '

    ' + 729 | '

    ' + song.artist + '

    ' + 730 | '×' + 731 | '
    ' + 732 | '
    • '; 733 | 734 | return html; 735 | } 736 | 737 | 738 | // Write the contents of a playlist into the playlist tab in the html. 739 | function renderTrackList(list){ 740 | $('.track').remove(); 741 | 742 | var html = list.map(function (tr,index) { 743 | return returnTrackHTML(tr,index); 744 | }).join(''); 745 | 746 | $('#list').append($(html)); 747 | } 748 | 749 | 750 | // Format time in minutes:seconds 751 | function formatTime(time){ 752 | time = Math.round(time); 753 | 754 | var minutes = Math.floor(time / 60), 755 | seconds = time - minutes * 60; 756 | 757 | seconds = seconds < 10 ? '0' + seconds : seconds; 758 | 759 | return minutes + ":" + seconds; 760 | } 761 | 762 | 763 | // Wavesurfer responsiveness 764 | $(window).on('resize', function(){ 765 | if($('#wave').is(":visible")) { 766 | wavesurfer.drawer.containerWidth = wavesurfer.drawer.container.clientWidth; 767 | wavesurfer.drawBuffer(); 768 | } 769 | }); -------------------------------------------------------------------------------- /assets/js/wavesurfer.min.js: -------------------------------------------------------------------------------- 1 | /* wavesurfer.js v 1.0.16 @license CC-BY 3.0 */ 2 | "use strict";var WaveSurfer={defaultParams:{height:128,waveColor:"#999",progressColor:"#555",cursorColor:"#333",cursorWidth:1,skipLength:2,minPxPerSec:20,pixelRatio:window.devicePixelRatio,fillParent:!0,scrollParent:!1,hideScrollbar:!1,normalize:!1,audioContext:null,container:null,dragSelection:!0,loopSelection:!0,audioRate:1,interact:!0,renderer:"Canvas",backend:"WebAudio",mediaType:"audio"},init:function(t){if(this.params=WaveSurfer.util.extend({},this.defaultParams,t),this.container="string"==typeof t.container?document.querySelector(this.params.container):this.params.container,!this.container)throw new Error("Container element not found");if(this.mediaContainer="undefined"==typeof this.params.mediaContainer?this.container:"string"==typeof this.params.mediaContainer?document.querySelector(this.params.mediaContainer):this.params.mediaContainer,!this.mediaContainer)throw new Error("Media Container element not found");this.savedVolume=0,this.isMuted=!1,this.createDrawer(),this.createBackend()},createDrawer:function(){var t=this;this.drawer=Object.create(WaveSurfer.Drawer[this.params.renderer]),this.drawer.init(this.container,this.params),this.drawer.on("redraw",function(){t.drawBuffer(),t.drawer.progress(t.backend.getPlayedPercents())}),this.drawer.on("click",function(e,i){setTimeout(function(){t.seekTo(i)},0)}),this.drawer.on("scroll",function(e){t.fireEvent("scroll",e)})},createBackend:function(){var t=this;this.backend&&this.backend.destroy(),"WebAudio"!=this.params.backend||WaveSurfer.WebAudio.supportsWebAudio()||(this.params.backend="AudioElement"),this.backend=Object.create(WaveSurfer[this.params.backend]),this.backend.init(this.params),this.backend.on("finish",function(){t.fireEvent("finish")}),this.backend.on("audioprocess",function(e){t.fireEvent("audioprocess",e)})},restartAnimationLoop:function(){var t=this,e=window.requestAnimationFrame||window.webkitRequestAnimationFrame,i=function(){t.backend.isPaused()||(t.drawer.progress(t.backend.getPlayedPercents()),e(i))};i()},getDuration:function(){return this.backend.getDuration()},getCurrentTime:function(){return this.backend.getCurrentTime()},play:function(t,e){this.backend.play(t,e),this.restartAnimationLoop(),this.fireEvent("play")},pause:function(){this.backend.pause(),this.fireEvent("pause")},playPause:function(){this.backend.isPaused()?this.play():this.pause()},skipBackward:function(t){this.skip(-t||-this.params.skipLength)},skipForward:function(t){this.skip(t||this.params.skipLength)},skip:function(t){var e=this.getCurrentTime()||0,i=this.getDuration()||1;e=Math.max(0,Math.min(i,e+(t||0))),this.seekAndCenter(e/i)},seekAndCenter:function(t){this.seekTo(t),this.drawer.recenter(t)},seekTo:function(t){var e=this.backend.isPaused(),i=this.params.scrollParent;e&&(this.params.scrollParent=!1),this.backend.seekTo(t*this.getDuration()),this.drawer.progress(this.backend.getPlayedPercents()),e||(this.backend.pause(),this.backend.play()),this.params.scrollParent=i,this.fireEvent("seek",t)},stop:function(){this.pause(),this.seekTo(0),this.drawer.progress(0)},setVolume:function(t){this.backend.setVolume(t)},setPlaybackRate:function(t){this.backend.setPlaybackRate(t)},toggleMute:function(){this.isMuted?(this.backend.setVolume(this.savedVolume),this.isMuted=!1):(this.savedVolume=this.backend.getVolume(),this.backend.setVolume(0),this.isMuted=!0)},toggleScroll:function(){this.params.scrollParent=!this.params.scrollParent,this.drawBuffer()},toggleInteraction:function(){this.params.interact=!this.params.interact},drawBuffer:function(){var t=Math.round(this.getDuration()*this.params.minPxPerSec*this.params.pixelRatio),e=this.drawer.getWidth(),i=t;this.params.fillParent&&(!this.params.scrollParent||e>t)&&(i=e);var r=this.backend.getPeaks(i);this.drawer.drawPeaks(r,i),this.fireEvent("redraw",r,i)},loadArrayBuffer:function(t){var e=this;this.backend.decodeArrayBuffer(t,function(t){e.loadDecodedBuffer(t)},function(){e.fireEvent("error","Error decoding audiobuffer")})},loadDecodedBuffer:function(t){this.empty(),this.backend.load(t),this.drawBuffer(),this.fireEvent("ready")},loadBlob:function(t){var e=this,i=new FileReader;i.addEventListener("progress",function(t){e.onProgress(t)}),i.addEventListener("load",function(t){e.empty(),e.loadArrayBuffer(t.target.result)}),i.addEventListener("error",function(){e.fireEvent("error","Error reading file")}),i.readAsArrayBuffer(t)},load:function(t,e){switch(this.params.backend){case"WebAudio":return this.loadBuffer(t);case"AudioElement":case"MediaElement":return this.loadMediaElement(t,e)}},loadBuffer:function(t){return this.empty(),this.downloadArrayBuffer(t,this.loadArrayBuffer.bind(this))},loadMediaElement:function(t,e){this.empty(),this.backend.load(t,this.mediaContainer,e),this.backend.once("canplay",function(){this.drawBuffer(),this.fireEvent("ready")}.bind(this)),this.backend.once("error",function(t){this.fireEvent("error",t)}.bind(this)),!e&&this.backend.supportsWebAudio()&&this.downloadArrayBuffer(t,function(t){this.backend.decodeArrayBuffer(t,function(t){this.backend.buffer=t,this.drawBuffer()}.bind(this))}.bind(this))},downloadArrayBuffer:function(t,e){var i=this,r=WaveSurfer.util.ajax({url:t,responseType:"arraybuffer"});return r.on("progress",function(t){i.onProgress(t)}),r.on("success",e),r.on("error",function(t){i.fireEvent("error","XHR error: "+t.target.statusText)}),r},onProgress:function(t){if(t.lengthComputable)var e=t.loaded/t.total;else e=t.loaded/(t.loaded+1e6);this.fireEvent("loading",Math.round(100*e),t.target)},exportPCM:function(t,e,i){t=t||1024,e=e||1e4,i=i||!1;var r=this.backend.getPeaks(t,e),s=[].map.call(r,function(t){return Math.round(t*e)/e}),a=JSON.stringify(s);return i||window.open("data:application/json;charset=utf-8,"+encodeURIComponent(a)),a},empty:function(){this.backend.isPaused()||(this.stop(),this.backend.disconnectSource()),this.drawer.progress(0),this.drawer.setWidth(0),this.drawer.drawPeaks({length:this.drawer.getWidth()},0)},destroy:function(){this.fireEvent("destroy"),this.unAll(),this.backend.destroy(),this.drawer.destroy()}};WaveSurfer.Observer={on:function(t,e){this.handlers||(this.handlers={});var i=this.handlers[t];i||(i=this.handlers[t]=[]),i.push(e)},un:function(t,e){if(this.handlers){var i=this.handlers[t];if(i)if(e)for(var r=i.length-1;r>=0;r--)i[r]==e&&i.splice(r,1);else i.length=0}},unAll:function(){this.handlers=null},once:function(t,e){var i=this,r=function(){e.apply(this,arguments),setTimeout(function(){i.un(t,r)},0)};this.on(t,r)},fireEvent:function(t){if(this.handlers){var e=this.handlers[t],i=Array.prototype.slice.call(arguments,1);e&&e.forEach(function(t){t.apply(null,i)})}}},WaveSurfer.util={extend:function(t){var e=Array.prototype.slice.call(arguments,1);return e.forEach(function(e){Object.keys(e).forEach(function(i){t[i]=e[i]})}),t},getId:function(){return"wavesurfer_"+Math.random().toString(32).substring(2)},max:function(t,e){for(var i=-1/0,r=0,s=t.length;s>r;r++){var a=t[r];null!=e&&(a=Math.abs(a-e)),a>i&&(i=a)}return i},ajax:function(t){var e=Object.create(WaveSurfer.Observer),i=new XMLHttpRequest,r=!1;return i.open(t.method||"GET",t.url,!0),i.responseType=t.responseType,i.addEventListener("progress",function(t){e.fireEvent("progress",t),t.lengthComputable&&t.loaded==t.total&&(r=!0)}),i.addEventListener("load",function(t){r||e.fireEvent("progress",t),e.fireEvent("load",t),200==i.status||206==i.status?e.fireEvent("success",i.response,t):e.fireEvent("error",t)}),i.addEventListener("error",function(t){e.fireEvent("error",t)}),i.send(),e.xhr=i,e}},WaveSurfer.util.extend(WaveSurfer,WaveSurfer.Observer),WaveSurfer.WebAudio={scriptBufferSize:256,fftSize:128,PLAYING_STATE:0,PAUSED_STATE:1,FINISHED_STATE:2,supportsWebAudio:function(){return!(!window.AudioContext&&!window.webkitAudioContext)},getAudioContext:function(){return WaveSurfer.WebAudio.audioContext||(WaveSurfer.WebAudio.audioContext=new(window.AudioContext||window.webkitAudioContext)),WaveSurfer.WebAudio.audioContext},getOfflineAudioContext:function(t){return WaveSurfer.WebAudio.offlineAudioContext||(WaveSurfer.WebAudio.offlineAudioContext=new(window.OfflineAudioContext||window.webkitOfflineAudioContext)(1,2,t)),WaveSurfer.WebAudio.offlineAudioContext},init:function(t){this.params=t,this.ac=t.audioContext||this.getAudioContext(),this.lastPlay=this.ac.currentTime,this.startPosition=0,this.states=[Object.create(WaveSurfer.WebAudio.state.playing),Object.create(WaveSurfer.WebAudio.state.paused),Object.create(WaveSurfer.WebAudio.state.finished)],this.setState(this.PAUSED_STATE),this.createVolumeNode(),this.createScriptNode(),this.createAnalyserNode(),this.setPlaybackRate(this.params.audioRate)},disconnectFilters:function(){this.filters&&(this.filters.forEach(function(t){t&&t.disconnect()}),this.filters=null)},setState:function(t){this.state!==this.states[t]&&(this.state=this.states[t],this.state.init.call(this))},setFilter:function(){this.setFilters([].slice.call(arguments))},setFilters:function(t){this.disconnectFilters(),t&&t.length?(this.filters=t,t.reduce(function(t,e){return t.connect(e),e},this.analyser).connect(this.gainNode)):this.analyser.connect(this.gainNode)},createScriptNode:function(){var t=this,e=this.scriptBufferSize;this.scriptNode=this.ac.createScriptProcessor?this.ac.createScriptProcessor(e):this.ac.createJavaScriptNode(e),this.scriptNode.connect(this.ac.destination),this.scriptNode.onaudioprocess=function(){var e=t.getCurrentTime();t.state===t.states[t.PLAYING_STATE]&&t.fireEvent("audioprocess",e),t.buffer&&e>t.getDuration()&&t.setState(t.FINISHED_STATE)}},createAnalyserNode:function(){this.analyser=this.ac.createAnalyser(),this.analyser.fftSize=this.fftSize,this.analyserData=new Uint8Array(this.analyser.frequencyBinCount),this.analyser.connect(this.gainNode)},createVolumeNode:function(){this.gainNode=this.ac.createGain?this.ac.createGain():this.ac.createGainNode(),this.gainNode.connect(this.ac.destination)},setVolume:function(t){this.gainNode.gain.value=t},getVolume:function(){return this.gainNode.gain.value},decodeArrayBuffer:function(t,e,i){this.offlineAc||(this.offlineAc=this.getOfflineAudioContext(this.ac?this.ac.sampleRate:44100)),this.offlineAc.decodeAudioData(t,function(t){e(t)}.bind(this),i)},getPeaks:function(t){for(var e=this.buffer,i=e.length/t,r=~~(i/10)||1,s=e.numberOfChannels,a=new Float32Array(t),n=0;s>n;n++)for(var o=e.getChannelData(n),h=0;t>h;h++){for(var u=~~(h*i),c=~~(u+i),d=0,l=u;c>l;l+=r){var f=o[l];f>d?d=f:-f>d&&(d=-f)}(0==n||d>a[h])&&(a[h]=d)}return a},getPlayedPercents:function(){return this.state.getPlayedPercents.call(this)},disconnectSource:function(){this.source&&this.source.disconnect()},waveform:function(){return this.analyser.getByteTimeDomainData(this.analyserData),this.analyserData},destroy:function(){this.isPaused()||this.pause(),this.unAll(),this.buffer=null,this.disconnectFilters(),this.disconnectSource(),this.gainNode.disconnect(),this.scriptNode.disconnect(),this.analyser.disconnect()},load:function(t){this.startPosition=0,this.lastPlay=this.ac.currentTime,this.buffer=t,this.createSource()},createSource:function(){this.disconnectSource(),this.source=this.ac.createBufferSource(),this.source.start=this.source.start||this.source.noteGrainOn,this.source.stop=this.source.stop||this.source.noteOff,this.source.playbackRate.value=this.playbackRate,this.source.buffer=this.buffer,this.source.connect(this.analyser)},isPaused:function(){return this.state!==this.states[this.PLAYING_STATE]},getDuration:function(){return void 0===this.buffer?0:this.buffer.duration},seekTo:function(t,e){return null==t&&(t=this.getCurrentTime(),t>=this.getDuration()&&(t=0)),null==e&&(e=this.getDuration()),this.startPosition=t,this.lastPlay=this.ac.currentTime,this.state===this.states[this.FINISHED_STATE]&&this.setState(this.PAUSED_STATE),{start:t,end:e}},getPlayedTime:function(){return(this.ac.currentTime-this.lastPlay)*this.playbackRate},play:function(t,e){this.createSource();var i=this.seekTo(t,e);t=i.start,e=i.end,this.source.start(0,t,e-t),this.setState(this.PLAYING_STATE)},pause:function(){this.startPosition+=this.getPlayedTime(),this.source&&this.source.stop(0),this.setState(this.PAUSED_STATE)},getCurrentTime:function(){return this.state.getCurrentTime.call(this)},setPlaybackRate:function(t){t=t||1,this.isPaused()?this.playbackRate=t:(this.pause(),this.playbackRate=t,this.play())}},WaveSurfer.WebAudio.state={},WaveSurfer.WebAudio.state.playing={init:function(){},getPlayedPercents:function(){var t=this.getDuration();return this.getCurrentTime()/t||0},getCurrentTime:function(){return this.startPosition+this.getPlayedTime()}},WaveSurfer.WebAudio.state.paused={init:function(){},getPlayedPercents:function(){var t=this.getDuration();return this.getCurrentTime()/t||0},getCurrentTime:function(){return this.startPosition}},WaveSurfer.WebAudio.state.finished={init:function(){this.fireEvent("finish")},getPlayedPercents:function(){return 1},getCurrentTime:function(){return this.getDuration()}},WaveSurfer.util.extend(WaveSurfer.WebAudio,WaveSurfer.Observer),WaveSurfer.MediaElement=Object.create(WaveSurfer.WebAudio),WaveSurfer.util.extend(WaveSurfer.MediaElement,{init:function(t){this.params=t,this.media={currentTime:0,duration:0,paused:!0,playbackRate:1,play:function(){},pause:function(){}},this.mediaType=t.mediaType.toLowerCase(),this.ac=t.audioContext||this.getAudioContext(),this.elementPosition=t.elementPosition},load:function(t,e,i){var r=this,s=document.createElement(this.mediaType);s.controls=!1,s.autoplay=!1,s.preload="auto",s.src=t,s.addEventListener("error",function(){r.fireEvent("error","Error loading media element")}),s.addEventListener("canplay",function(){r.fireEvent("canplay")}),s.addEventListener("ended",function(){r.fireEvent("finish")}),s.addEventListener("timeupdate",function(){r.fireEvent("audioprocess",r.getCurrentTime())});var a=e.querySelector(this.mediaType);a&&e.removeChild(a),e.appendChild(s),this.media=s,this.peaks=i,this.setPlaybackRate(this.playbackRate)},isPaused:function(){return this.media.paused},getDuration:function(){var t=this.media.duration;return t>=1/0&&(t=this.media.seekable.end()),t},getCurrentTime:function(){return this.media.currentTime},getPlayedPercents:function(){return this.getCurrentTime()/this.getDuration()||0},setPlaybackRate:function(t){this.playbackRate=t||1,this.media.playbackRate=this.playbackRate},seekTo:function(t){null!=t&&(this.media.currentTime=t)},play:function(t){this.seekTo(t),this.media.play()},pause:function(){this.media.pause()},getPeaks:function(t){return this.buffer?WaveSurfer.WebAudio.getPeaks.call(this,t):this.peaks||[]},getVolume:function(){return this.media.volume},setVolume:function(t){this.media.volume=t},destroy:function(){this.pause(),this.unAll(),this.media.parentNode&&this.media.parentNode.removeChild(this.media),this.media=null}}),WaveSurfer.AudioElement=WaveSurfer.MediaElement,WaveSurfer.Drawer={init:function(t,e){this.container=t,this.params=e,this.width=0,this.height=e.height*this.params.pixelRatio,this.lastPos=0,this.createWrapper(),this.createElements()},createWrapper:function(){this.wrapper=this.container.appendChild(document.createElement("wave")),this.style(this.wrapper,{display:"block",position:"relative",userSelect:"none",webkitUserSelect:"none",height:this.params.height+"px"}),(this.params.fillParent||this.params.scrollParent)&&this.style(this.wrapper,{width:"100%",overflowX:this.params.hideScrollbar?"hidden":"auto",overflowY:"hidden"}),this.setupWrapperEvents()},handleEvent:function(t){t.preventDefault();var e=this.wrapper.getBoundingClientRect();return(t.clientX-e.left+this.wrapper.scrollLeft)/this.wrapper.scrollWidth||0},setupWrapperEvents:function(){var t=this;this.wrapper.addEventListener("click",function(e){var i=t.wrapper.offsetHeight-t.wrapper.clientHeight;if(0!=i){var r=t.wrapper.getBoundingClientRect();if(e.clientY>=r.bottom-i)return}t.params.interact&&t.fireEvent("click",e,t.handleEvent(e))}),this.wrapper.addEventListener("scroll",function(e){t.fireEvent("scroll",e)})},drawPeaks:function(t,e){if(this.resetScroll(),this.setWidth(e),this.params.normalize)var i=WaveSurfer.util.max(t);else i=1;this.drawWave(t,i)},style:function(t,e){return Object.keys(e).forEach(function(i){t.style[i]!=e[i]&&(t.style[i]=e[i])}),t},resetScroll:function(){null!==this.wrapper&&(this.wrapper.scrollLeft=0)},recenter:function(t){var e=this.wrapper.scrollWidth*t;this.recenterOnPosition(e,!0)},recenterOnPosition:function(t,e){var i=this.wrapper.scrollLeft,r=~~(this.wrapper.clientWidth/2),s=t-r,a=s-i,n=this.wrapper.scrollWidth-this.wrapper.clientWidth;if(0!=n){if(!e&&a>=-r&&r>a){var o=5;a=Math.max(-o,Math.min(o,a)),s=i+a}s=Math.max(0,Math.min(n,s)),s!=i&&(this.wrapper.scrollLeft=s)}},getWidth:function(){return Math.round(this.container.clientWidth*this.params.pixelRatio)},setWidth:function(t){t!=this.width&&(this.width=t,this.params.fillParent||this.params.scrollParent?this.style(this.wrapper,{width:""}):this.style(this.wrapper,{width:~~(this.width/this.params.pixelRatio)+"px"}),this.updateWidth())},progress:function(t){var e=1/this.params.pixelRatio,i=Math.round(t*this.width)*e;if(i=e){if(this.lastPos=i,this.params.scrollParent){var r=~~(this.wrapper.scrollWidth*t);this.recenterOnPosition(r)}this.updateProgress(t)}},destroy:function(){this.unAll(),this.container.removeChild(this.wrapper),this.wrapper=null},createElements:function(){},updateWidth:function(){},drawWave:function(){},clearWave:function(){},updateProgress:function(){}},WaveSurfer.util.extend(WaveSurfer.Drawer,WaveSurfer.Observer),WaveSurfer.Drawer.Canvas=Object.create(WaveSurfer.Drawer),WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas,{createElements:function(){var t=this.wrapper.appendChild(this.style(document.createElement("canvas"),{position:"absolute",zIndex:1}));if(this.waveCc=t.getContext("2d"),this.progressWave=this.wrapper.appendChild(this.style(document.createElement("wave"),{position:"absolute",zIndex:2,overflow:"hidden",width:"0",height:this.params.height+"px",borderRightStyle:"solid",borderRightWidth:this.params.cursorWidth+"px",borderRightColor:this.params.cursorColor})),this.params.waveColor!=this.params.progressColor){var e=this.progressWave.appendChild(document.createElement("canvas"));this.progressCc=e.getContext("2d")}},updateWidth:function(){var t=Math.round(this.width/this.params.pixelRatio);this.waveCc.canvas.width=this.width,this.waveCc.canvas.height=this.height,this.style(this.waveCc.canvas,{width:t+"px"}),this.progressCc&&(this.progressCc.canvas.width=this.width,this.progressCc.canvas.height=this.height,this.style(this.progressCc.canvas,{width:t+"px"})),this.clearWave()},clearWave:function(){this.waveCc.clearRect(0,0,this.width,this.height),this.progressCc&&this.progressCc.clearRect(0,0,this.width,this.height)},drawWave:function(t,e){var i=.5/this.params.pixelRatio,r=this.height/2,s=r/e,a=t.length,n=1;this.params.fillParent&&this.width!=a&&(n=this.width/a),this.waveCc.fillStyle=this.params.waveColor,this.progressCc&&(this.progressCc.fillStyle=this.params.progressColor),[this.waveCc,this.progressCc].forEach(function(e){if(e){e.beginPath(),e.moveTo(i,r);for(var o=0;a>o;o++){var h=Math.round(t[o]*s);e.lineTo(o*n+i,r+h)}e.lineTo(this.width+i,r),e.moveTo(i,r);for(var o=0;a>o;o++){var h=Math.round(t[o]*s);e.lineTo(o*n+i,r-h)}e.lineTo(this.width+i,r),e.fill(),e.fillRect(0,r-i,this.width,i)}},this)},updateProgress:function(t){var e=Math.round(this.width*t)/this.params.pixelRatio;this.style(this.progressWave,{width:e+"px"})}}); 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Music Player 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 | Paste hash here 16 |
    17 | 18 |
    19 | 20 |
    21 |
    22 | cover-art-small 23 |
    24 | 25 |
    26 | 27 |
    28 | 29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 | 37 |
    38 | 39 |
    40 | 41 |

    There are no tracks loaded in the player.

    42 |

    43 | - / - 44 |

    45 |
    46 | 47 | 54 | 55 |
    56 | 57 |
    58 | 59 | 60 | 61 |
    62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/APlayer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * APlayer constructor function 3 | * 4 | * @param {Object} option - See README 5 | * @constructor 6 | */ 7 | (function () { 8 | function APlayer(option) { 9 | 10 | //this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); 11 | this.isMobile = false; 12 | // compatibility: some mobile browsers don't suppose autoplay 13 | if (this.isMobile) { 14 | option.autoplay = false; 15 | } 16 | 17 | // default options 18 | var defaultOption = { 19 | element: document.getElementsByClassName('aplayer')[0], 20 | narrow: false, 21 | autoplay: false, 22 | showlrc: false, 23 | theme: '#b7daff' 24 | }; 25 | for (var defaultKey in defaultOption) { 26 | if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { 27 | option[defaultKey] = defaultOption[defaultKey]; 28 | } 29 | } 30 | 31 | // multiple music 32 | this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1; 33 | 34 | this.option = option; 35 | this.audios = []; 36 | this.loop = true; 37 | } 38 | 39 | APlayer.prototype.initTracks = function (tracks) { 40 | this.audios = []; 41 | this.playIndex = 0; 42 | this.option.music = tracks; 43 | } 44 | /** 45 | * AutoLink initialization function 46 | */ 47 | APlayer.prototype.init = function () { 48 | this.element = this.option.element; 49 | this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music; 50 | 51 | var i; 52 | // paroldr lrc 53 | if (this.option.showlrc) { 54 | var lrcs = []; 55 | for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) { 56 | lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML); 57 | } 58 | this.lrcs = this.parseLrc(lrcs); 59 | } 60 | 61 | // fill in HTML 62 | var eleHTML = '' 63 | + '
    ' 64 | + '
    ' 65 | + '' 66 | + '
    ' 67 | + '
    ' 68 | + '
    ' 69 | + '
    ' 70 | + '' 71 | + '' 72 | + '
    ' 73 | + '
    ' 74 | + '
    ' 75 | + '
    ' 76 | + '
    ' 77 | + '
    ' 78 | + '
    ' 79 | + '
    ' 80 | + '
    ' 81 | + '' 82 | + '
    ' 83 | + '
    ' 84 | + '
    ' 85 | + '
    ' 86 | + ' - 00:00 / 00:00' 87 | + '
    ' 88 | + '' 89 | + '
    ' 90 | + '
    ' 91 | + '
    ' 92 | + '
    ' 93 | + '
    ' 94 | + '
    ' 95 | + '' 96 | + (this.playIndex > -1 ? '' : '') 97 | + '
    ' 98 | + '
    ' 99 | + '
    '; 100 | if (this.playIndex > -1) { 101 | eleHTML += '' 102 | + '
    ' 103 | + '
      '; 104 | for (i = 0; i < this.option.music.length; i++) { 105 | eleHTML += '' 106 | + '
    1. ' 107 | + '' 108 | + '' + (i + 1) + '' 109 | + '' + this.option.music[i].title + '' 110 | + '' + this.option.music[i].author + '' 111 | + '
      2. ' 112 | } 113 | eleHTML += '' 114 | + '
    ' 115 | + '
    ' 116 | } 117 | this.element.innerHTML = eleHTML; 118 | 119 | // switch to narrow style 120 | if (this.option.narrow) { 121 | this.element.classList.add('aplayer-narrow'); 122 | } 123 | 124 | var _self = this; 125 | 126 | // play and pause button 127 | this.button = this.element.getElementsByClassName('aplayer-button')[0]; 128 | this.button.addEventListener('click', function () { 129 | if (this.classList.contains('aplayer-play')) { 130 | _self.play.call(_self); 131 | } 132 | else if (this.classList.contains('aplayer-pause')) { 133 | _self.pause.call(_self); 134 | } 135 | }); 136 | 137 | // click music list: change music 138 | if (this.playIndex > -1) { 139 | for (i = 0; i < this.option.music.length; i++) { 140 | this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () { 141 | var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1; 142 | if (musicIndex !== _self.playIndex) { 143 | _self.setMusic(musicIndex); 144 | } 145 | _self.play(); 146 | }); 147 | } 148 | } 149 | 150 | // control play progress 151 | this.playedBar = this.element.getElementsByClassName('aplayer-played')[0]; 152 | this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0]; 153 | this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0]; 154 | this.bar = this.element.getElementsByClassName('aplayer-bar')[0]; 155 | var barWidth; 156 | this.bar.addEventListener('click', function (event) { 157 | var e = event || window.event; 158 | barWidth = _self.bar.clientWidth; 159 | var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; 160 | _self.updateBar.call(_self, 'played', percentage, 'width'); 161 | _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); 162 | _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; 163 | }); 164 | 165 | this.thumb.addEventListener('mouseover', function () { 166 | this.style.background = _self.option.theme; 167 | }); 168 | this.thumb.addEventListener('mouseout', function () { 169 | this.style.background = '#fff'; 170 | }); 171 | 172 | this.thumb.addEventListener('mousedown', function () { 173 | barWidth = _self.bar.clientWidth; 174 | clearInterval(_self.playedTime); 175 | document.addEventListener('mousemove', thumbMove); 176 | document.addEventListener('mouseup', thumbUp); 177 | }); 178 | 179 | function thumbMove(event) { 180 | var e = event || window.event; 181 | var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; 182 | percentage = percentage > 0 ? percentage : 0; 183 | percentage = percentage < 1 ? percentage : 1; 184 | _self.updateBar.call(_self, 'played', percentage, 'width'); 185 | if (_self.option.showlrc) { 186 | _self.updateLrc.call(_self, parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration); 187 | } 188 | _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); 189 | } 190 | 191 | function thumbUp() { 192 | document.removeEventListener('mouseup', thumbUp); 193 | document.removeEventListener('mousemove', thumbMove); 194 | _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; 195 | _self.play(); 196 | } 197 | 198 | // control volume 199 | this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0]; 200 | var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0]; 201 | var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0]; 202 | var barHeight = 35; 203 | this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) { 204 | var e = event || window.event; 205 | var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight; 206 | percentage = percentage > 0 ? percentage : 0; 207 | percentage = percentage < 1 ? percentage : 1; 208 | _self.updateBar.call(_self, 'volume', percentage, 'height'); 209 | _self.audio.volume = percentage; 210 | if (_self.audio.muted) { 211 | _self.audio.muted = false; 212 | } 213 | if (percentage === 1) { 214 | volumeicon.className = 'demo-icon aplayer-icon-volume-up'; 215 | } 216 | else { 217 | volumeicon.className = 'demo-icon aplayer-icon-volume-down'; 218 | } 219 | }); 220 | volumeicon.addEventListener('click', function () { 221 | if (_self.audio.muted) { 222 | _self.audio.muted = false; 223 | volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down'; 224 | _self.updateBar.call(_self, 'volume', _self.audio.volume, 'height'); 225 | } 226 | else { 227 | _self.audio.muted = true; 228 | volumeicon.className = 'demo-icon aplayer-icon-volume-off'; 229 | _self.updateBar.call(_self, 'volume', 0, 'height'); 230 | } 231 | }); 232 | 233 | // get element's view position 234 | function getElementViewLeft(element) { 235 | var actualLeft = element.offsetLeft; 236 | var current = element.offsetParent; 237 | var elementScrollLeft; 238 | while (current !== null) { 239 | actualLeft += current.offsetLeft; 240 | current = current.offsetParent; 241 | } 242 | elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; 243 | return actualLeft - elementScrollLeft; 244 | } 245 | 246 | function getElementViewTop(element) { 247 | var actualTop = element.offsetTop; 248 | var current = element.offsetParent; 249 | var elementScrollTop; 250 | while (current !== null) { 251 | actualTop += current.offsetTop; 252 | current = current.offsetParent; 253 | } 254 | elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop; 255 | return actualTop - elementScrollTop; 256 | } 257 | 258 | // loop control 259 | this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () { 260 | if (_self.loop) { 261 | this.classList.add('aplayer-noloop'); 262 | _self.loop = false; 263 | _self.audio.loop = _self.playIndex > -1 ? false : _self.loop; 264 | } 265 | else { 266 | this.classList.remove('aplayer-noloop'); 267 | _self.loop = true; 268 | _self.audio.loop = _self.playIndex > -1 ? false : _self.loop; 269 | } 270 | }); 271 | 272 | // toggle menu control 273 | if (this.playIndex > -1) { 274 | this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () { 275 | var list = _self.element.getElementsByClassName('aplayer-list')[0]; 276 | if (!list.classList.contains('aplayer-list-hide')) { 277 | list.classList.add('aplayer-list-hide'); 278 | } 279 | else { 280 | list.classList.remove('aplayer-list-hide'); 281 | } 282 | }); 283 | } 284 | 285 | this.setMusic(0); 286 | }; 287 | 288 | 289 | APlayer.prototype.setMusic = function (index) { 290 | // get this.music 291 | if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') { 292 | this.playIndex = arguments[0]; 293 | } 294 | var _self = this; 295 | var indexMusic = this.playIndex; 296 | var music = this.music; 297 | music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music; 298 | 299 | 300 | music.file.getBlobURL(function (err, bUrl) { 301 | music.url = bUrl; 302 | _self.setMusicOrig(index); 303 | 304 | // if ( this.option.music[indexMusic+1] !== undefined ) { 305 | // index doesn't point to an undefined item. 306 | // } 307 | 308 | }); 309 | 310 | }; 311 | /** 312 | * Set music 313 | */ 314 | APlayer.prototype.setMusicOrig = function (index) { 315 | // get this.music 316 | if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') { 317 | this.playIndex = arguments[0]; 318 | } 319 | var indexMusic = this.playIndex; 320 | this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music; 321 | 322 | // set html 323 | if (this.music.pic) { 324 | this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')'; 325 | } 326 | this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title; 327 | this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + this.music.author; 328 | if (this.playIndex > -1) { 329 | if (this.element.getElementsByClassName('aplayer-list-light')[0]) { 330 | this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light'); 331 | } 332 | this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light'); 333 | } 334 | 335 | // set the previous audio object 336 | if (this.audio) { 337 | this.pause(); 338 | this.audio.currentTime = 0; 339 | } 340 | 341 | // get this audio object 342 | if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) { 343 | this.audio = document.createElement("audio"); 344 | this.audio.src = this.music.url; 345 | this.audio.preload = this.isMobile ? 'none' : 'metadata'; 346 | 347 | // show audio time 348 | var _self = this; 349 | this.audio.addEventListener('durationchange', function () { 350 | if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first 351 | _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); 352 | } 353 | }); 354 | 355 | // show audio loaded bar 356 | _self.audio.addEventListener('progress', function () { 357 | var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0; 358 | _self.updateBar.call(_self, 'loaded', percentage, 'width'); 359 | }); 360 | 361 | // audio download error 362 | this.audio.addEventListener('error', function () { 363 | _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥'; 364 | }); 365 | 366 | // multiple music play 367 | if (this.playIndex > -1) { 368 | this.audio.addEventListener('ended', function () { 369 | if (_self.playIndex < _self.option.music.length - 1) { 370 | _self.setMusic(++_self.playIndex); 371 | } 372 | else if (_self.loop) { 373 | _self.setMusic(0); 374 | } 375 | else if (!_self.loop) { 376 | _self.pause(); 377 | } 378 | }); 379 | } 380 | else { 381 | this.audio.addEventListener('ended', function () { 382 | if (!_self.loop) { 383 | _self.pause(); 384 | } 385 | }); 386 | } 387 | 388 | // control volume 389 | this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; 390 | 391 | // loop 392 | this.audio.loop = this.playIndex > -1 ? false : this.loop; 393 | 394 | if (this.playIndex > -1) { 395 | this.audios[indexMusic] = this.audio; 396 | } 397 | } 398 | else { 399 | this.audio = this.audios[indexMusic]; 400 | this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; 401 | this.audio.currentTime = 0; 402 | } 403 | 404 | // fill in lrc 405 | if (this.option.showlrc) { 406 | this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0]; 407 | this.element.classList.add('aplayer-withlrc'); 408 | var lrcHTML = ''; 409 | this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; 410 | for (var i = 0; i < this.lrc.length; i++) { 411 | lrcHTML += '

    ' + this.lrc[i][1] + '

    '; 412 | } 413 | this.lrcContents.innerHTML = lrcHTML; 414 | if (!this.lrcIndex) { 415 | this.lrcIndex = 0; 416 | } 417 | this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); 418 | this.lrcContents.style.transform = 'translateY(0px)'; 419 | this.lrcContents.style.webkitTransform = 'translateY(0px)'; 420 | } 421 | 422 | // set duration time 423 | if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first 424 | this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00'; 425 | } 426 | 427 | // autoplay 428 | if (this.option.autoplay && !this.isMobile) { 429 | this.play(); 430 | } 431 | this.option.autoplay = true; // autoplay next music 432 | 433 | if (this.isMobile) { 434 | this.pause(); 435 | } 436 | }; 437 | 438 | /** 439 | * Play music 440 | */ 441 | APlayer.prototype.play = function () { 442 | var _self = this; 443 | this.button.classList.remove('aplayer-play'); 444 | this.button.classList.add('aplayer-pause'); 445 | this.button.innerHTML = ''; 446 | setTimeout(function () { 447 | _self.button.innerHTML = ''; 448 | }, 100); 449 | this.audio.play(); 450 | if (this.playedTime) { 451 | clearInterval(this.playedTime); 452 | } 453 | this.playedTime = setInterval(function () { 454 | _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); 455 | if (_self.option.showlrc) { 456 | _self.updateLrc.call(_self); 457 | } 458 | _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); 459 | }, 100); 460 | }; 461 | 462 | /** 463 | * Pause music 464 | */ 465 | APlayer.prototype.pause = function () { 466 | var _self = this; 467 | this.button.classList.remove('aplayer-pause'); 468 | this.button.classList.add('aplayer-play'); 469 | this.button.innerHTML = ''; 470 | setTimeout(function () { 471 | _self.button.innerHTML = ''; 472 | }, 100); 473 | this.audio.pause(); 474 | clearInterval(this.playedTime); 475 | }; 476 | 477 | /** 478 | * Update progress bar, including loading progress bar and play progress bar 479 | * 480 | * @param {String} type - Point out which bar it is, should be played loaded or volume 481 | * @param {Number} percentage 482 | * @param {String} direction - Point out the direction of this bar, Should be height or width 483 | */ 484 | APlayer.prototype.updateBar = function (type, percentage, direction) { 485 | percentage = percentage > 0 ? percentage : 0; 486 | percentage = percentage < 1 ? percentage : 1; 487 | this[type + 'Bar'].style[direction] = percentage * 100 + '%'; 488 | }; 489 | 490 | /** 491 | * Update lrc 492 | * 493 | * @param {Number} currentTime 494 | */ 495 | APlayer.prototype.updateLrc = function (currentTime) { 496 | if (typeof(arguments[0]) === 'undefined') { 497 | currentTime = this.audio.currentTime; 498 | } 499 | if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { 500 | for (var i = 0; i < this.lrc.length; i++) { 501 | if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) { 502 | this.lrcIndex = i; 503 | this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)'; 504 | this.lrcContents.style.webkitTransform = 'translateY(' + -this.lrcIndex * 20 + 'px)'; 505 | this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current'); 506 | this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current'); 507 | } 508 | } 509 | } 510 | }; 511 | 512 | /** 513 | * Parse second to 00:00 format 514 | * 515 | * @param {Number} second 516 | * @return {String} 00:00 format 517 | */ 518 | APlayer.prototype.secondToTime = function (second) { 519 | var add0 = function (num) { 520 | return num < 10 ? '0' + num : '' + num; 521 | }; 522 | var min = parseInt(second / 60); 523 | var sec = parseInt(second - min * 60); 524 | return add0(min) + ':' + add0(sec); 525 | }; 526 | 527 | /** 528 | * Parse lrc, suppose multiple time tag 529 | * 530 | * @param {Array} arr - Format: 531 | * [mm:ss.xx]lyric 532 | * [mm:ss.xxx]lyric 533 | * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric 534 | * 535 | * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...] 536 | */ 537 | APlayer.prototype.parseLrc = function (arr) { 538 | var lrcs = []; 539 | for (var k = 0; k < arr.length; k++) { 540 | var lyric = arr[k].split('\n'); 541 | var lrc = []; 542 | var lyricLen = lyric.length; 543 | for (var i = 0; i < lyricLen; i++) { 544 | // match lrc time 545 | var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); 546 | // match lrc text 547 | var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); 548 | 549 | if (lrcTimes != null) { 550 | // handle multiple time tag 551 | var timeLen = lrcTimes.length; 552 | for (var j = 0; j < timeLen; j++) { 553 | var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); 554 | var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); 555 | lrc.push([lrcTime, lrcText]); 556 | } 557 | } 558 | } 559 | // sort by time 560 | lrc.sort(function (a, b) { 561 | return a[0] - b[0]; 562 | }); 563 | lrcs.push(lrc); 564 | } 565 | return lrcs; 566 | }; 567 | 568 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { 569 | module.exports = APlayer 570 | } 571 | else { 572 | window.APlayer = APlayer; 573 | } 574 | })(); -------------------------------------------------------------------------------- /js/APlayer.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:initial}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-loop:before{content:'\e803'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(default.jpg);background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;bottom:50%;right:50%;margin:0 -15px -15px 0}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 140px 0 5px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-icon-loop{margin:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop{color:#ddd}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop:hover{color:#bbb}.aplayer .aplayer-info .aplayer-controller .aplayer-time i:hover{color:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:2}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0)}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;width:100%;content:' '}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff,hsla(0,0%,100%,0));background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px!important;height:20px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.aplayer .aplayer-list{max-height:300px;overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-list.aplayer-list-hide{max-height:0}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer} -------------------------------------------------------------------------------- /js/APlayer.min.js: -------------------------------------------------------------------------------- 1 | !function(){function e(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}e.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(o.bar))/r;s=s>0?s:0,s=1>s?s:1,o.updateBar.call(o,"played",s,"width"),o.option.showlrc&&o.updateLrc.call(o,parseFloat(o.playedBar.style.width)/100*o.audio.duration),o.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=o.secondToTime(s*o.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),o.audio.currentTime=parseFloat(o.playedBar.style.width)/100*o.audio.duration,o.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music;var i;if(this.option.showlrc){var l=[];for(i=0;i
    - 00:00 / 00:00
    '+(this.playIndex>-1?'':"")+"
    ";if(this.playIndex>-1){for(n+='
      ',i=0;i'+(i+1)+''+this.option.music[i].title+''+this.option.music[i].author+"";n+="
    "}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var o=this;if(this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(){this.classList.contains("aplayer-play")?o.play.call(o):this.classList.contains("aplayer-pause")&&o.pause.call(o)}),this.playIndex>-1)for(i=0;i0?a:0,a=1>a?a:1,o.updateBar.call(o,"volume",a,"height"),o.audio.volume=a,o.audio.muted&&(o.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){o.audio.muted?(o.audio.muted=!1,p.className=1===o.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",o.updateBar.call(o,"volume",o.audio.volume,"height")):(o.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",o.updateBar.call(o,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){o.loop?(this.classList.add("aplayer-noloop"),o.loop=!1,o.audio.loop=o.playIndex>-1?!1:o.loop):(this.classList.remove("aplayer-noloop"),o.loop=!0,o.audio.loop=o.playIndex>-1?!1:o.loop)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=o.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},e.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(this.element.getElementsByClassName("aplayer-list-light")[0]&&this.element.getElementsByClassName("aplayer-list-light")[0].classList.remove("aplayer-list-light"),this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata";var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1?this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var i=0;i"+this.lrc[i][1]+"

    ";this.lrcContents.innerHTML=s,this.lrcIndex||(this.lrcIndex=0),this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),this.lrcContents.style.transform="translateY(0px)",this.lrcContents.style.webkitTransform="translateY(0px)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},e.prototype.play=function(){var e=this;this.button.classList.remove("aplayer-play"),this.button.classList.add("aplayer-pause"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML=''},100),this.audio.play(),this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},e.prototype.pause=function(){var e=this;this.button.classList.remove("aplayer-pause"),this.button.classList.add("aplayer-play"),this.button.innerHTML="",setTimeout(function(){e.button.innerHTML=''},100),this.audio.pause(),clearInterval(this.playedTime)},e.prototype.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},e.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},e.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var o=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=o)for(var d=o.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(o[p]),u=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([u,r])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.APlayer=e}(); -------------------------------------------------------------------------------- /js/controllers.js: -------------------------------------------------------------------------------- 1 | var myApp = angular.module('myApp', []); 2 | 3 | myApp.controller('mainController', function($scope, $http) { 4 | $scope.greeting = 'Hola!'; 5 | var jsmediatags = window.jsmediatags; 6 | var client = new WebTorrent(); 7 | var API_URL = 'http://localhost:3000/tracks'; 8 | 9 | $scope.peers = 0; 10 | //$scope.hash = '23d4937148cb5d229290424cc824832ab20a398d'; 11 | 12 | 13 | var opts = 14 | { 15 | announce: [ 'ws://10.4.10.48:8000'], 16 | dht:false 17 | } 18 | 19 | //opts = {}; 20 | 21 | var playerElement = document.getElementById('player1'); 22 | var aPlayer = new APlayer({ 23 | element: playerElement, 24 | narrow: false, 25 | autoplay: true, 26 | showlrc: false, 27 | theme: '#e6d0b2' 28 | }); 29 | 30 | 31 | function getTags(aFile) { 32 | jsmediatags.read(aFile, { 33 | onSuccess: function(tag) { 34 | client.seed(aFile,opts, function(torrent) { 35 | var data = { 36 | "title": tag.tags.title, 37 | "hash": torrent.infoHash 38 | }; 39 | console.log(torrent.infoHash); 40 | console.log(data); 41 | $http.post(API_URL, data).then(function successCallback(response) { 42 | $scope.listTracks(); 43 | }); 44 | 45 | }); 46 | }, 47 | 48 | onError: function(error) { 49 | console.log(error); 50 | } 51 | }); 52 | }; 53 | 54 | $scope.seed = function() { 55 | var x = document.getElementById("myFile"); 56 | getTags(x.files[0]); 57 | }; 58 | 59 | $scope.play = function(track) { 60 | client.add(track.hash,opts, function(torrent) { 61 | var file = torrent.files[0]; 62 | console.log(file); 63 | document.getElementById("audioId").innerHTML = ''; 64 | 65 | file.appendTo('#audioId', function(err, elem) { 66 | 67 | }); 68 | 69 | }); 70 | 71 | } 72 | 73 | 74 | 75 | $scope.listTracks = function() { 76 | $http({ 77 | method: 'GET', 78 | url: API_URL 79 | }).then(function successCallback(response) { 80 | $scope.tracklist = response.data; 81 | // this callback will be called asynchronously 82 | // when the response is available 83 | }, function errorCallback(response) { 84 | // called asynchronously if an error occurs 85 | // or server returns response with an error status. 86 | }); 87 | 88 | } 89 | 90 | $scope.playTorrent = function(torrent) { 91 | var files = torrent.files; 92 | 93 | var tracks = []; 94 | 95 | files.forEach(function(file) { 96 | var aTrack = {}; 97 | aTrack.file = file; 98 | aTrack.title = file.name; 99 | aTrack.author = ''; 100 | if (file.name.indexOf("jpg") > -1) { 101 | coverFile = file; 102 | } else { 103 | tracks.push(aTrack); 104 | } 105 | }); 106 | 107 | $scope.loadPlayer(tracks); 108 | 109 | } 110 | 111 | $scope.loadTorrent = function(hash) { 112 | console.log('loadTorrent ' + hash); 113 | console.log('opts '+opts.announce); 114 | 115 | client.add(hash,opts, function(torrent) { 116 | console.log('loaded torrent'); 117 | 118 | $scope.peers = torrent.swarm.wires.length; 119 | $scope.$apply(); 120 | torrent.files.forEach(file => file.deselect()); 121 | torrent._selections = []; 122 | 123 | $scope.playTorrent(torrent); 124 | }); 125 | } 126 | 127 | $scope.loadPlayer = function(tracks) { 128 | aPlayer.initTracks(tracks); 129 | aPlayer.init(); 130 | 131 | } 132 | 133 | $scope.simpletest = function(hash) { 134 | 135 | var torrentId = 'magnet:?xt=urn:btih:' + hash; 136 | 137 | client.add(torrentId, function(torrent) { 138 | torrent.files.forEach(file => file.deselect()); 139 | torrent._selections = []; 140 | 141 | var file = torrent.files[0]; 142 | file.appendTo('body'); 143 | }); 144 | } 145 | 146 | $scope.loadHash = function() { 147 | $scope.loadTorrent($scope.hash); 148 | }; 149 | 150 | $scope.playCurrentTorrent = function() { 151 | 152 | $scope.playTorrent($scope.torrent); 153 | }; 154 | 155 | 156 | }); -------------------------------------------------------------------------------- /js/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/js/default.jpg -------------------------------------------------------------------------------- /js/font/aplayer-fontello.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/js/font/aplayer-fontello.eot -------------------------------------------------------------------------------- /js/font/aplayer-fontello.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Copyright (C) 2016 by original authors @ fontello.com 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /js/font/aplayer-fontello.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/js/font/aplayer-fontello.ttf -------------------------------------------------------------------------------- /js/font/aplayer-fontello.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enorrmann/youshark/23d5bfbe3570b1aeca26529993e6021cf0033f9f/js/font/aplayer-fontello.woff -------------------------------------------------------------------------------- /js/jsmediatags.min.js: -------------------------------------------------------------------------------- 1 | (function(v){"object"===typeof exports&&"undefined"!==typeof module?module.exports=v():"function"===typeof define&&define.amd?define([],v):("undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:this).jsmediatags=v()})(function(){return function f(m,k,l){function h(a,b){if(!k[a]){if(!m[a]){var e="function"==typeof require&&require;if(!b&&e)return e(a,!0);if(d)return d(a,!0);e=Error("Cannot find module '"+a+"'");throw e.code="MODULE_NOT_FOUND",e;}e=k[a]= 2 | {exports:{}};m[a][0].call(e.exports,function(b){var e=m[a][1][b];return h(e?e:b)},e,e.exports,f,m,k,l)}return k[a].exports}for(var d="function"==typeof require&&require,a=0;ae.offset&&(e=e.data.slice(0,d-e.offset),p.data=this._concatData(e,a));c&&(e=p.data.slice(0,g.offset-p.offset),p.data=this._concatData(e,g.data));this._fileData.splice(b.startIx,b.endIx-b.startIx+1,p)}}},{key:"_concatData",value:function(d,a){if("undefined"!==typeof ArrayBuffer&&ArrayBuffer.isView(d)){var c= 8 | new d.constructor(d.length+a.length);c.set(d,0);c.set(a,d.length);return c}return d.concat(a)}},{key:"_getChunkRange",value:function(d,a){for(var c=-1,b=-1,e=0,g=0;g=p-1){c=g;break}}if(-1===c)return{startIx:-1,endIx:-1,insertIx:e};for(g=c;g=p-1&&(b=g),a<=q+1);g++);-1===b&&(b=c);return{startIx:c, 9 | endIx:b}}},{key:"hasDataRange",value:function(d,a){for(var c=0;c=b.offset&&a=b&&d<=e){a=this._fileData[c];break}}if(a)return a.data[d-a.offset];throw Error("Offset "+d+" hasn't been loaded yet.");}}]);return f}();m.exports=f},{"./FlowTypes":5}], 10 | 5:[function(f,m,k){f("./MediaFileReader")},{"./MediaFileReader":10}],6:[function(f,m,k){function l(a,c){if("function"!==typeof c&&null!==c)throw new TypeError("Super expression must either be null or a function, not "+typeof c);a.prototype=Object.create(c&&c.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}});c&&(Object.setPrototypeOf?Object.setPrototypeOf(a,c):a.__proto__=c)}var h=function(){function a(a,b){for(var e=0;eg?d[g]:""}};t&&(c.tags.track=t);return c}}],[{key:"getTagIdentifierByteRange",value:function(){return{offset:-128,length:128}}},{key:"canReadTagFormat",value:function(b){return"TAG"===String.fromCharCode.apply(String,b.slice(0,3))}}]);return c}(k);var d="Blues;Classic Rock;Country;Dance;Disco;Funk;Grunge;Hip-Hop;Jazz;Metal;New Age;Oldies;Other;Pop;R&B;Rap;Reggae;Rock;Techno;Industrial;Alternative;Ska;Death Metal;Pranks;Soundtrack;Euro-Techno;Ambient;Trip-Hop;Vocal;Jazz+Funk;Fusion;Trance;Classical;Instrumental;Acid;House;Game;Sound Clip;Gospel;Noise;AlternRock;Bass;Soul;Punk;Space;Meditative;Instrumental Pop;Instrumental Rock;Ethnic;Gothic;Darkwave;Techno-Industrial;Electronic;Pop-Folk;Eurodance;Dream;Southern Rock;Comedy;Cult;Gangsta;Top 40;Christian Rap;Pop/Funk;Jungle;Native American;Cabaret;New Wave;Psychadelic;Rave;Showtunes;Trailer;Lo-Fi;Tribal;Acid Punk;Acid Jazz;Polka;Retro;Musical;Rock & Roll;Hard Rock;Folk;Folk-Rock;National Folk;Swing;Fast Fusion;Bebob;Latin;Revival;Celtic;Bluegrass;Avantgarde;Gothic Rock;Progressive Rock;Psychedelic Rock;Symphonic Rock;Slow Rock;Big Band;Chorus;Easy Listening;Acoustic;Humour;Speech;Chanson;Opera;Chamber Music;Sonata;Symphony;Booty Bass;Primus;Porn Groove;Satire;Slow Jam;Club;Tango;Samba;Folklore;Ballad;Power Ballad;Rhythmic Soul;Freestyle;Duet;Punk Rock;Drum Solo;Acapella;Euro-House;Dance Hall".split(";"); 14 | m.exports=f},{"./FlowTypes":5,"./MediaFileReader":10,"./MediaTagReader":11}],7:[function(f,m,k){function l(a){var c;switch(a){case 0:c="iso-8859-1";break;case 1:c="utf-16";break;case 2:c="utf-16be";break;case 3:c="utf-8"}return c}f("./FlowTypes");f("./MediaFileReader");var h={APIC:function(a,c,b,e,g){g=g||"3";e=a;var p=l(b.getByteAt(a));switch(g){case "2":var q=b.getStringAt(a+1,3);a+=4;break;case "3":case "4":q=b.getStringWithCharsetAt(a+1,c-(a-e)),a+=1+q.bytesReadCount}g=b.getByteAt(a,1);g=d[g]; 15 | p=b.getStringWithCharsetAt(a+1,c-(a-e),p);a+=1+p.bytesReadCount;return{format:q.toString(),type:g,description:p.toString(),data:b.getBytesAt(a,e+c-a)}},COMM:function(a,c,b,e,g){var p=a,d=l(b.getByteAt(a));e=b.getStringAt(a+1,3);g=b.getStringWithCharsetAt(a+4,c-4,d);a+=4+g.bytesReadCount;a=b.getStringWithCharsetAt(a,p+c-a,d);return{language:e,short_description:g.toString(),text:a.toString()}}};h.COM=h.COMM;h.PIC=function(a,c,b,e,g){return h.APIC(a,c,b,e,"2")};h.PCNT=function(a,c,b,e,g){return b.getLongAt(a, 16 | !1)};h.CNT=h.PCNT;h["T*"]=function(a,c,b,e,g){e=l(b.getByteAt(a));return b.getStringWithCharsetAt(a+1,c-1,e).toString()};h.TCON=function(a,c,b,e){return h["T*"].apply(this,arguments).replace(/^\(\d+\)/,"")};h.TCO=h.TCON;h.USLT=function(a,c,b,e,g){var p=a,d=l(b.getByteAt(a));e=b.getStringAt(a+1,3);g=b.getStringWithCharsetAt(a+4,c-4,d);a+=4+g.bytesReadCount;a=b.getStringWithCharsetAt(a,p+c-a,d);return{language:e,descriptor:g.toString(),lyrics:a.toString()}};h.ULT=h.USLT;var d="Other;32x32 pixels 'file icon' (PNG only);Other file icon;Cover (front);Cover (back);Leaflet page;Media (e.g. label side of CD);Lead artist/lead performer/soloist;Artist/performer;Conductor;Band/Orchestra;Composer;Lyricist/text writer;Recording Location;During recording;During performance;Movie/video screen capture;A bright coloured fish;Illustration;Band/artist logotype;Publisher/Studio logotype".split(";"); 17 | m.exports={getFrameReaderFunction:function(a){return a in h?h[a]:"T"===a[0]?h["T*"]:null}}},{"./FlowTypes":5,"./MediaFileReader":10}],8:[function(f,m,k){function l(b,a){if("function"!==typeof a&&null!==a)throw new TypeError("Super expression must either be null or a function, not "+typeof a);b.prototype=Object.create(a&&a.prototype,{constructor:{value:b,enumerable:!1,writable:!0,configurable:!0}});a&&(Object.setPrototypeOf?Object.setPrototypeOf(b,a):b.__proto__=a)}var h=function(){function b(b,a){for(var c= 18 | 0;c2.4",tags:{}};var u=b.getByteAt(e+4),f=b.isBitSetAt(e+5,7),t=b.isBitSetAt(e+5,6),n=b.isBitSetAt(e+5,5),h=b.getSynchsafeInteger32At(e+6),e=e+10;if(t)var m=b.getLongAt(e,!0),e=e+(m+4); 20 | var d={type:"ID3",version:"2."+d+"."+u,major:d,revision:u,flags:{unsynchronisation:f,extended_header:t,experimental_indicator:n,footer_present:!1},size:h,tags:{}},e=f?{}:this._readFrames(e,h-10,b,d,a),l;for(l in c)c.hasOwnProperty(l)&&(f=this._getFrameData(e,c[l]))&&(d.tags[l]=f);for(var k in e)e.hasOwnProperty(k)&&(d.tags[k]=e[k]);return d}},{key:"_readFrames",value:function(b,a,e,c,f){var r={};for(f&&(f=this._expandShortcutTags(f));b=b.getSize())c.onSuccess();else{var d=this,f=b.getLongAt(a,!0);if(0==f||isNaN(f))c.onSuccess();else{var h=b.getStringAt(a+4,4);if(this._isContainerAtom(h)){"meta"==h&&(a+=4);var n=(e?e+".":"")+h;"moov.udta.meta.ilst"===n?b.loadRange([a,a+f],c):b.loadRange([a+8,a+8+8],{onSuccess:function(){d._loadAtom(b,a+8,n,c)},onError:c.onError})}else b.loadRange([a+f,a+f+8],{onSuccess:function(){d._loadAtom(b, 36 | a+f,e,c)},onError:c.onError})}}}},{key:"_isContainerAtom",value:function(b){return 0<=["moov","udta","meta","ilst"].indexOf(b)}},{key:"_canReadAtom",value:function(b){return"----"!==b}},{key:"_parseData",value:function(b,a){var e={};a=this._expandShortcutTags(a);this._readAtom(e,b,0,b.getSize(),a);for(var d in c)if(c.hasOwnProperty(d)){var f=e[c[d]];f&&(e[d]="track"===d?f.data.track:f.data)}return{type:"MP4",ftyp:b.getStringAt(8,4),version:b.getLongAt(12,!0),tags:e}}},{key:"_readAtom",value:function(b, 37 | a,e,c,d,f,h){h=void 0===h?"":h+" ";for(var n=e;nb&& 44 | (b+=65536);return b}},{key:"getSShortAt",value:function(a,c){var b=this.getShortAt(a,c);return 32767b&&(b+=4294967296);return b}},{key:"getSLongAt",value:function(a,c){var b=this.getLongAt(a,c);return 2147483647b&&(b+=16777216);return b}},{key:"getStringAt",value:function(a,c){for(var b=[],e=a,d=0;ek||224<=k?a[f]=String.fromCharCode(l): 51 | (k=(d[b+e]<<8)+d[b+g],b+=2,a[f]=String.fromCharCode(l,k))}return new h(a.join(""),b)},readUTF8String:function(d,a){var c=0;a=Math.min(a||d.length,d.length);239==d[0]&&187==d[1]&&191==d[2]&&(c=3);for(var b=[],e=0;cg)b[e]=String.fromCharCode(g);else if(194<=g&&224>g){var f=d[c++];b[e]=String.fromCharCode(((g&31)<<6)+(f&63))}else if(224<=g&&240>g){var f=d[c++],k=d[c++];b[e]=String.fromCharCode(((g&255)<<12)+((f&63)<<6)+(k&63))}else if(240<=g&&245>g){var f= 52 | d[c++],k=d[c++],l=d[c++],g=((g&7)<<18)+((f&63)<<12)+((k&63)<<6)+(l&63)-65536;b[e]=String.fromCharCode((g>>10)+55296,(g&1023)+56320)}}return new h(b.join(""),c)},readNullTerminatedString:function(d,a){var c=[];a=a||d.length;for(var b=0;bc._config.disallowedXhrHeaders.indexOf(a.toLowerCase())&&b.setRequestHeader(a,d)}},{key:"_hasResponseHeader",value:function(b,a){var c=b.getAllResponseHeaders(); 60 | if(!c)return!1;for(var c=c.split("\r\n"),d=[],f=0;fh.offset&&h.offset<-e/2?c.push(g[f]):d.push(g[f])}var k=!1,f={onSuccess:function(){if(k){for(var c=0;c 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 22 | 23 | 24 | 25 | 26 |
    27 | Peers : {{peers}}
    28 | paciencia ... 29 | 30 | 31 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* CSS is how you can add style to your website, such as colors, fonts, and positioning of your 2 | HTML content. To learn how to do something, just try searching Google for questions like 3 | "how to change link color." */ 4 | 5 | body { 6 | background-color: white; 7 | color: black; 8 | font-family: Verdana; 9 | } --------------------------------------------------------------------------------