├── .dockerignore ├── .eslintignore ├── .eslintrc ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── Testing └── System and Unit Test Report.pdf ├── app.js ├── controllers └── appController.js ├── docker-compose.yml ├── docs ├── Release Plan_v.2.pdf ├── Release Plan_v.3.pdf ├── Release_Plan.pdf ├── Sprint1 │ ├── Sprint 1 Report.pdf │ └── Sprint1_Plan.pdf ├── Sprint2 │ ├── Sprint 2 Plan.pdf │ └── Sprint 2 Report.pdf ├── Sprint3 │ ├── Sprint 3 Plan v.2.pdf │ ├── Sprint 3 Plan.docx │ └── Sprint 3 Report.pdf └── Working_Prototype.pdf ├── index.html ├── models └── user.js ├── package-lock.json ├── package.json ├── public ├── css │ ├── font-awesome.css │ ├── font-awesome.min.css │ ├── signin.css │ └── signup.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── impulse │ └── impulse2.wav └── sample_tracks │ ├── dinosaur.mp3 │ ├── exhale.mp3 │ ├── hanulbaragi.mp3 │ ├── itsgonnarain.mp3 │ ├── shapeofyou.mp3 │ └── starcraft.mp3 ├── src ├── audiosource.js ├── index.js ├── library.js ├── sampletracks.js ├── signin.js ├── signup.js ├── toolbox.js └── tracks.js ├── test └── testapp.js ├── views ├── signin.html └── signup.html └── webpack.config.js /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | docs 4 | .idea 5 | uploads 6 | .DS_Store 7 | .gitignore 8 | README.md 9 | jenkins-test-results.xml 10 | *.iml 11 | eslint_result.xml 12 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | 6 | # User-specific stuff: 7 | .idea/**/workspace.xml 8 | .idea/**/tasks.xml 9 | .idea/dictionaries 10 | 11 | # Sensitive or high-churn files: 12 | .idea/**/dataSources/ 13 | .idea/**/dataSources.ids 14 | .idea/**/dataSources.xml 15 | .idea/**/dataSources.local.xml 16 | .idea/**/sqlDataSources.xml 17 | .idea/**/dynamic.xml 18 | .idea/**/uiDesigner.xml 19 | 20 | # Gradle: 21 | .idea/**/gradle.xml 22 | .idea/**/libraries 23 | 24 | # Mongo Explorer plugin: 25 | .idea/**/mongoSettings.xml 26 | 27 | ## File-based project format: 28 | *.iws 29 | 30 | ## Plugin-specific files: 31 | 32 | # IntelliJ 33 | /out/ 34 | 35 | # mpeltonen/sbt-idea plugin 36 | .idea_modules/ 37 | 38 | # JIRA plugin 39 | atlassian-ide-plugin.xml 40 | 41 | # Crashlytics plugin (for Android Studio and IntelliJ) 42 | com_crashlytics_export_strings.xml 43 | crashlytics.properties 44 | crashlytics-build.properties 45 | fabric.properties 46 | ### Vim template 47 | # swap 48 | [._]*.s[a-v][a-z] 49 | [._]*.sw[a-p] 50 | [._]s[a-v][a-z] 51 | [._]sw[a-p] 52 | # session 53 | Session.vim 54 | # temporary 55 | .netrwhist 56 | *~ 57 | # auto-generated tag files 58 | tags 59 | ### macOS template 60 | *.DS_Store 61 | .AppleDouble 62 | .LSOverride 63 | 64 | # Icon must end with two \r 65 | Icon 66 | 67 | 68 | # Thumbnails 69 | ._* 70 | 71 | # Files that might appear in the root of a volume 72 | .DocumentRevisions-V100 73 | .fseventsd 74 | .Spotlight-V100 75 | .TemporaryItems 76 | .Trashes 77 | .VolumeIcon.icns 78 | .com.apple.timemachine.donotpresent 79 | 80 | # Directories potentially created on remote AFP share 81 | .AppleDB 82 | .AppleDesktop 83 | Network Trash Folder 84 | Temporary Items 85 | .apdisk 86 | 87 | node_modules 88 | dist 89 | docs 90 | public 91 | views 92 | 93 | .xml 94 | uploads -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "mocha": true, 6 | "es6": true 7 | }, 8 | "extends": "airbnb-base", 9 | "rules" :{ 10 | "no-plusplus": 0, // it is an antipattern, but allow only for for-loops 11 | "no-param-reassign": 0, 12 | "no-alert": 0, 13 | "no-console": 0, // alerts and consoles allowe during dev. 14 | "import/no-extraneous-dependencies": 0, // webpack handles dependencies 15 | "import/extensions": 0, 16 | "import/no-unresolved": 0 17 | } 18 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (http://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # Typescript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | ### Vim template 63 | # swap 64 | [._]*.s[a-v][a-z] 65 | [._]*.sw[a-p] 66 | [._]s[a-v][a-z] 67 | [._]sw[a-p] 68 | # session 69 | Session.vim 70 | # temporary 71 | .netrwhist 72 | *~ 73 | # auto-generated tag files 74 | tags 75 | ### macOS template 76 | *.DS_Store 77 | .AppleDouble 78 | .LSOverride 79 | 80 | # Icon must end with two \r 81 | Icon 82 | 83 | 84 | # Thumbnails 85 | ._* 86 | 87 | # Files that might appear in the root of a volume 88 | .DocumentRevisions-V100 89 | .fseventsd 90 | .Spotlight-V100 91 | .TemporaryItems 92 | .Trashes 93 | .VolumeIcon.icns 94 | .com.apple.timemachine.donotpresent 95 | 96 | # Directories potentially created on remote AFP share 97 | .AppleDB 98 | .AppleDesktop 99 | Network Trash Folder 100 | Temporary Items 101 | .apdisk 102 | 103 | # Project specific files 104 | dist 105 | .idea 106 | *.iml 107 | *bundle.js 108 | uploads/ 109 | jenkins-test-results.xml 110 | eslint_result.xml -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:8.2.1 2 | 3 | # basic system update 4 | RUN apt-get update && apt-get install -y \ 5 | && rm -rf /var/lib/apt/lists/* 6 | 7 | # create a workspace 8 | RUN mkdir -p /tmp/webaudio 9 | WORKDIR /tmp/webaudio 10 | 11 | # install dependencies 12 | COPY package.json /tmp/webaudio 13 | RUN npm install 14 | 15 | # copy project files into the container 16 | COPY . /tmp/webaudio 17 | 18 | # build 19 | RUN npm run build 20 | RUN echo build done 21 | 22 | # expose 3000 as normal - expose 80 for docker run command for deployment 23 | EXPOSE 3000 24 | ENTRYPOINT ["npm", "run", "start"] 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Audio Editor 2 | 3 | [Demo](http://13.56.79.76) 4 | 5 | This is a web audio editor project where user can edit custom audio files online. 6 | The user is able to cut, paste, leave, and copy 7 | segments of audio data. Also, the user can apply fade-in, fade-out, highpass filter, lowpass filter, 8 | and reverberation to the tracks. The audio effects are implemented using [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). 9 | The user can also maintain settings through signing up, and upload audio files 10 | to the server for later use. 11 | 12 | 13 | ## Prerequisites 14 | 15 | * [mongodb](https://docs.mongodb.com/manual/installation/) 16 | * node.js & npm 17 | 18 | ## Setup and running 19 | 20 | ### Development Server Setup 21 | 22 | `mongod --port 38128` 23 | 24 | `npm install && npm run dev` 25 | 26 | ### Start Production Server Only 27 | 28 | `npm run build && npm run start` 29 | 30 | By default the production server listens to port `3000`. 31 | 32 | However, you can modify the listening port through port forwarding while `docker run`, 33 | with `-p` option. See `Start Production Cluster`. 34 | 35 | ### Start Production Cluster 36 | 37 | `docker pull kaehops/webaudioeditor` 38 | 39 | `docker pull mongo:3.4` 40 | 41 | `docker-compose up -d` 42 | 43 | This command will read `docker-compose.yml` file for configuration. 44 | 45 | ## User Guide 46 | 47 | Get started by using sample tracks to play with editor functionalities. Clicking an item in `Load Sample Track` will add a sample track to your project. 48 | 49 | To upload your own audiofile, click `Add Track` and use `File` button. 50 | This editor supports `mp3`, `wave`, `ogg` files. Other encoding formats are not tested and 51 | performance not guaranteed. 52 | 53 | You can `play`, `pause`, `stop` the track separately or for all tracks. 54 | 55 | Audio editing features include: 56 | 57 | * **Cut**: cuts the selected portion of the waveform. The cut out portion is copied, so 58 | pasting is available afterwards. 59 | * **Copy**: copy the selected wave segment 60 | * **Paste**: paste the copied audio to the desired place. 61 | * **Leave**: leaves only the selected waveform and erase all else 62 | 63 | * **Low Pass Filter (LP)**: cuts the higher frequencies from 2000Hz with 12dB/octave roll down. 64 | * **High Pass Filter (HP)**: cuts the lower frequencies below 1500Hz with 12dB/octave roll down. 65 | * **Reverb (rev)**: adds a reverberation effect to the selected track. It uses an impulse response file taken from St. Patrick's Church, Patrington. 66 | * **Fade-in** 67 | * **Fade-out** 68 | 69 | Also, you can view the waveform of the track in `Zoom Mode`, where you click on the waveform and 70 | drag up and down. 71 | Selecting a portion of wave for editing is possible in `Selection Mode`, where you can 72 | `cut`, `paste`, and `leave`. 73 | 74 | ## Development 75 | 76 | ### Stylecheck 77 | 78 | `npm run list` 79 | 80 | Or, if `npm run lint-file` is run, the checkstyle results are saved in a file `eslint_result.xml` 81 | 82 | The style extends AirBnb style, with minor modifications. See `.eslintrc` for style settings. 83 | 84 | 85 | ### CI 86 | 87 | Uses [Jenkins CI server](http://54.183.221.182:8080), and initiates a build for every 88 | webhook triggered by github push. 89 | 90 | The integration tests for: 91 | * All unit tests to pass 92 | * Building a docker container from `Dockerfile` 93 | * Pushing the built docker container to [Docker hub](https://hub.docker.com/r/kaehops/webaudioeditor/) 94 | * Passing checkstyle 95 | 96 | ### Dependencies / Technologies used 97 | 98 | **Server Framework** 99 | * [node.js](https://nodejs.org/en/) 100 | * [express](http://expressjs.com) for REST api's 101 | * [webpack2](https://webpack.js.org) for bundling 102 | * [Babel](http://babeljs.io) for ECMAScript version management and transpiling 103 | 104 | **Waveform Visualization** 105 | * [waves-ui](https://github.com/wavesjs/waves-ui) 106 | 107 | **DB** 108 | * [Mongodb](https://www.mongodb.com) for user authentication and library management 109 | 110 | **CSS** 111 | * [Bootstrap 4 (alpha)](https://v4-alpha.getbootstrap.com) 112 | 113 | **Integration** 114 | * [AWS EC2](https://aws.amazon.com) for ubuntu webserver container 115 | * [Docker](https://www.docker.com) for microservice builds and deployment 116 | * [Jenkins](https://jenkins.io) for continuous integration master 117 | 118 | **Testing** 119 | * [Mocha](https://mochajs.org) 120 | * [Sinon](http://sinonjs.org) 121 | * [Chai](http://chaijs.com) 122 | 123 | **ECMAScript Stylecheck** 124 | * [eslint](http://eslint.org) 125 | -------------------------------------------------------------------------------- /Testing/System and Unit Test Report.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/Testing/System and Unit Test Report.pdf -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | 4 | const express = require('express'); 5 | const bodyParser = require('body-parser'); 6 | const cookieParser = require('cookie-parser'); 7 | const webpack = require('webpack'); 8 | const session = require('express-session'); 9 | const mongoose = require('mongoose'); 10 | const WebpackDevServer = require('webpack-dev-server'); 11 | 12 | const webpackConfig = require('./webpack.config'); 13 | const controller = require('./controllers/appController'); 14 | 15 | const app = express(); 16 | 17 | // create the uploads folder to save user-uploaded audio 18 | if (!fs.existsSync(path.resolve(__dirname, './uploads'))) { 19 | fs.mkdirSync(path.resolve(__dirname, './uploads')); 20 | } 21 | 22 | // DATABASE SETUP 23 | // determine host depending on environment 24 | let DB_HOST = 'localhost'; 25 | let MONGOPORT = 38128; 26 | let MONGO_COLLECTION = 'webaudio'; 27 | 28 | if (process.env.NODE_ENV === 'production') { 29 | DB_HOST = 'mongo'; 30 | MONGOPORT = 27017; 31 | } 32 | 33 | if (process.env.NODE_ENV === 'test') { 34 | MONGO_COLLECTION = 'webuaudio-test'; 35 | } 36 | 37 | const MONGO_URI = `mongodb://${DB_HOST}:${MONGOPORT}/${MONGO_COLLECTION}`; 38 | 39 | // connect to database 40 | mongoose.connect(MONGO_URI); 41 | const db = mongoose.connection; 42 | db.once('open', () => { console.log('Database connected.'); }); 43 | db.on('error', console.log.bind(console, 'connection error:')); 44 | 45 | // body parsers & cookie parser middlewares 46 | app.use(bodyParser.json()); 47 | app.use(bodyParser.urlencoded({ extended: false })); 48 | app.use(cookieParser()); 49 | 50 | // TODO: on session tutorial https://velopert.com/406 51 | app.use(session({ 52 | secret: 'webaudio-secret$$', 53 | resave: true, 54 | saveUninitialized: true, 55 | cookie: { 56 | httpOnly: false, 57 | secure: false, 58 | }, 59 | })); 60 | 61 | // indicate static file serve directories 62 | app.use(express.static(path.join(__dirname, 'public'))); 63 | app.use('/dist', express.static(path.join(__dirname, 'dist'))); 64 | 65 | // set view engine to pure html 66 | app.set('view engine', 'html'); 67 | app.set('views', './views'); 68 | 69 | // send index.html at default GET 70 | app.get('/', controller.getRoot); 71 | 72 | // sign-in page 73 | app.get('/signin', controller.signIn); 74 | 75 | // sign-up page 76 | app.get('/signup', controller.signUp); 77 | 78 | // sign-in request 79 | app.post('/post/signin', controller.postSignIn); 80 | 81 | // signup request 82 | app.post('/post/signup', controller.postSignUp); 83 | 84 | // logout request 85 | app.get('/logout', controller.logOut); 86 | 87 | // request sample track 88 | app.get('/audio/:trackname', controller.audioReqByTrackName); 89 | 90 | // receive file upload 91 | app.post('/upload', controller.upload); 92 | 93 | // request library information 94 | app.get('/library/:username', controller.libraryInfo); 95 | 96 | // return the audio upon user request on library-stored audio 97 | app.get('/useraudio/:username/:url', controller.getAudioByUrl); 98 | 99 | // send the impulse response file to the client 100 | app.get('/impulse', controller.impulse); 101 | 102 | // not found message 404 103 | app.use(controller.notFound); 104 | 105 | // run the server on development mode 106 | if (process.env.NODE_ENV === 'development') { 107 | const devPort = process.env.DEVPORT || 8080; 108 | 109 | const compiler = webpack(webpackConfig); 110 | const devServer = new WebpackDevServer(compiler, webpackConfig.devServer); 111 | 112 | // start listening 113 | devServer.listen(devPort, () => { 114 | console.log(`Dev Server listening on : ${devPort}`); 115 | }); 116 | } 117 | 118 | // start listening 119 | const port = process.env.PORT || 3000; 120 | const server = app.listen(port, () => { 121 | console.log(`Server listening on: ${port}`); 122 | }); 123 | 124 | // export the server for testing 125 | module.exports = server; 126 | -------------------------------------------------------------------------------- /controllers/appController.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const formidable = require('formidable'); 4 | 5 | const User = require('../models/user'); 6 | 7 | const ROOTPATH = path.resolve(__dirname, '../'); 8 | const VIEWPATH = path.resolve(ROOTPATH, './views'); 9 | 10 | // GET call on root '/' 11 | function getRoot(req, res) { 12 | const sess = req.session; 13 | res 14 | .cookie('name', sess.name, { maxAge: 360000 }) 15 | .cookie('username', sess.username, { maxAge: 360000 }) 16 | .status(200) 17 | .sendFile(path.resolve(ROOTPATH, 'index.html')); 18 | } 19 | 20 | // signin page 21 | function signIn(req, res) { 22 | res.status(200).sendFile(path.resolve(VIEWPATH, 'signin.html')); 23 | } 24 | 25 | // signup page 26 | function signUp(req, res) { 27 | res.status(200).sendFile(path.resolve(VIEWPATH, 'signup.html')); 28 | } 29 | 30 | // signup authentication 31 | function postSignIn(req, res) { 32 | function checkCredentials(err, userDoc) { 33 | if (userDoc) { 34 | if (userDoc.password === req.body.password) { // check for password 35 | if (userDoc.name) { 36 | // make sure 'credentials: include' for fetch api! 37 | req.session.name = userDoc.name; 38 | } else { 39 | req.session.name = userDoc.username; 40 | } 41 | req.session.username = userDoc.username; 42 | req.session.save(); 43 | const username = userDoc.username || userDoc.name; 44 | res.status(200).send({ username }); 45 | } else { 46 | res.status(420).send('Incorrect password.'); 47 | } 48 | } else { 49 | res.status(420).send('Username does not exist.'); 50 | } 51 | } 52 | 53 | User.findOneByUsername(req.body.username, checkCredentials); 54 | } 55 | 56 | // signup database save 57 | function postSignUp(req, res) { 58 | const username = req.body.username; 59 | const password = req.body.password; 60 | const name = req.body.name; 61 | 62 | // try to save user information, unless the username already exists 63 | const user = new User({ 64 | username, 65 | password, 66 | name, 67 | }); 68 | 69 | user.save((err, userDoc) => { 70 | if (err) { 71 | res.status(420).send('User name already exists!'); 72 | } else { 73 | res.status(200).send(userDoc.username); 74 | } 75 | }); 76 | } 77 | 78 | // logout 79 | function logOut(req, res) { 80 | const sess = req.session; 81 | // if there is a user logged in, destroy the session 82 | if (sess.username) { 83 | sess.destroy((err) => { 84 | if (err) console.error(err); 85 | }); 86 | } 87 | 88 | res.redirect('/'); 89 | } 90 | 91 | // request audio file by track name 92 | function audioReqByTrackName(req, res) { 93 | const trackName = req.params.trackname; 94 | const starcraftTrack = path.resolve(__dirname, `../public/sample_tracks/${trackName}.mp3`); 95 | const readStream = fs.createReadStream(starcraftTrack); 96 | readStream.pipe(res); 97 | 98 | readStream.on('end', () => { 99 | res.end(); 100 | console.log(`Reading file completed : ${starcraftTrack}`); 101 | }); 102 | } 103 | 104 | // send the impulse response file 105 | function impulse(req, res) { 106 | const impulseFile = path.resolve(__dirname, '../public/impulse/impulse2.wav'); 107 | const readStream = fs.createReadStream(impulseFile); 108 | readStream.pipe(res); 109 | 110 | readStream.on('end', () => { 111 | res.end(); 112 | console.log('Sending impulse file.'); 113 | }); 114 | } 115 | 116 | // upload a user-uploaded file 117 | function upload(req, res) { 118 | // needs a session being maintained (logged in) 119 | if (!req.session.name) { 120 | res.status(420).send('Session information unavailable!'); 121 | return; 122 | } 123 | 124 | const form = new formidable.IncomingForm(); 125 | form.uploadDir = path.resolve(__dirname, '../uploads'); 126 | form.type = true; // keep the extension for the file being saved 127 | 128 | form.addListener('end', () => { 129 | console.log(`File upload completed: ${req.session.id}`); 130 | res.end(); 131 | }); 132 | 133 | // done reading file 134 | form.addListener('file', () => { 135 | res.status(200); 136 | }); 137 | 138 | // set error 139 | form.addListener('error', (err) => { 140 | console.error(err); 141 | res.status(420); 142 | }); 143 | 144 | // parse information about the file that has been received 145 | form.parse(req, (err, fields, files) => { 146 | if (err) { 147 | console.error(err); 148 | return; 149 | } 150 | 151 | // save the file information in the database 152 | const info = { 153 | username: fields.username, 154 | audioInfo: { 155 | audiotitle: files.file.name, 156 | url: files.file.path, 157 | }, 158 | }; 159 | 160 | // add the uploaded audio's information to the user's library 161 | User.addAudioInfoToLibrary(info, (error) => { 162 | if (error) { 163 | console.error(error); 164 | } 165 | }); 166 | }); 167 | } 168 | 169 | // retrieve library information 170 | function libraryInfo(req, res) { 171 | const username = req.params.username; 172 | if (username === 'undefined') { 173 | res.status(420).send('Must be logged in!'); 174 | return; 175 | } 176 | 177 | // find the user information and its library 178 | User.findOneByUsername(username, (err, userDoc) => { 179 | if (err) res.status(420).end(); 180 | 181 | if (userDoc) { 182 | res.json(userDoc.library); // send the json data 183 | } else { 184 | res.status(420).send('No user information found.'); 185 | } 186 | }); 187 | } 188 | 189 | // the user retrieves the audio file to the client 190 | // the user can later download it or create a track with it 191 | function getAudioByUrl(req, res) { 192 | const username = req.params.username; 193 | const url = req.params.url; 194 | if (username === 'null') { 195 | res.status(420).send('The user is not logged in! (how does this happen?)'); 196 | return; 197 | } 198 | 199 | const readStream = fs.createReadStream(url); 200 | readStream.pipe(res); 201 | 202 | readStream.on('end', () => { 203 | console.log(`Sending library file completed : ${url}`); 204 | }); 205 | } 206 | 207 | // 404 208 | function notFound(req, res, next) { 209 | const err = new Error('Not Found'); 210 | err.status = 404; 211 | next(err); 212 | } 213 | 214 | // export 215 | module.exports = { 216 | getRoot, 217 | signIn, 218 | signUp, 219 | postSignIn, 220 | postSignUp, 221 | logOut, 222 | notFound, 223 | audioReqByTrackName, 224 | upload, 225 | libraryInfo, 226 | getAudioByUrl, 227 | impulse, 228 | }; 229 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "2" 2 | services: 3 | web: 4 | build: . 5 | image: kaehops/webaudioeditor 6 | ports: 7 | - "80:3000" 8 | links: 9 | - mongo 10 | container_name: webaudio 11 | mongo: 12 | image: mongo 13 | ports: 14 | - "38128:27017" 15 | container_name: mongo 16 | -------------------------------------------------------------------------------- /docs/Release Plan_v.2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Release Plan_v.2.pdf -------------------------------------------------------------------------------- /docs/Release Plan_v.3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Release Plan_v.3.pdf -------------------------------------------------------------------------------- /docs/Release_Plan.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Release_Plan.pdf -------------------------------------------------------------------------------- /docs/Sprint1/Sprint 1 Report.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint1/Sprint 1 Report.pdf -------------------------------------------------------------------------------- /docs/Sprint1/Sprint1_Plan.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint1/Sprint1_Plan.pdf -------------------------------------------------------------------------------- /docs/Sprint2/Sprint 2 Plan.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint2/Sprint 2 Plan.pdf -------------------------------------------------------------------------------- /docs/Sprint2/Sprint 2 Report.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint2/Sprint 2 Report.pdf -------------------------------------------------------------------------------- /docs/Sprint3/Sprint 3 Plan v.2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint3/Sprint 3 Plan v.2.pdf -------------------------------------------------------------------------------- /docs/Sprint3/Sprint 3 Plan.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint3/Sprint 3 Plan.docx -------------------------------------------------------------------------------- /docs/Sprint3/Sprint 3 Report.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Sprint3/Sprint 3 Report.pdf -------------------------------------------------------------------------------- /docs/Working_Prototype.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/docs/Working_Prototype.pdf -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Aduio Editor 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 35 | 36 | 37 | 38 |
39 | 40 |
41 | 42 | 43 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /models/user.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | // create a schema for the user 4 | const Schema = mongoose.Schema; 5 | const userSchema = new Schema({ 6 | username: { type: String, required: true, index: { unique: true } }, 7 | name: { type: String }, 8 | password: { type: String, required: true }, 9 | library: [{ 10 | audiotitle: String, 11 | url: String, 12 | }], 13 | }); 14 | 15 | // find the user information by the username 16 | userSchema.statics.findOneByUsername = function findonebyusername(username, cb) { 17 | return this.findOne({ username }, cb); 18 | }; 19 | 20 | // add audio information on user's upload to the user's library 21 | userSchema.statics.addAudioInfoToLibrary = function addaudioinfotolib(info, cb) { 22 | return this.findOneAndUpdate( 23 | { username: info.username }, 24 | { $push: { library: info.audioInfo } }, 25 | cb); 26 | }; 27 | 28 | module.exports = mongoose.model('user', userSchema); // collection name === 'users' 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UCSC-SE", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "clean": "rm -rf ./dist", 8 | "build": "npm run clean && webpack --color", 9 | "dev": "NODE_ENV=development node app.js", 10 | "start": "NODE_ENV=production node app.js", 11 | "test": "mocha --timeout 10000", 12 | "test-jenkins": "MOCHA_FILE=./jenkins-test-results.xml mocha test/** --reporter mocha-junit-reporter", 13 | "lint": "eslint -c .eslintrc .", 14 | "lint-file": "eslint -c .eslintrc -f checkstyle > eslint_result.xml" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/sunjae1294/UCSC-SE.git" 19 | }, 20 | "keywords": [], 21 | "author": "Team 5", 22 | "license": "ISC", 23 | "bugs": { 24 | "url": "https://github.com/sunjae1294/UCSC-SE/issues" 25 | }, 26 | "homepage": "https://github.com/sunjae1294/UCSC-SE#readme", 27 | "devDependencies": { 28 | "chai": "^4.1.0", 29 | "chai-http": "^3.0.0", 30 | "eslint": "^4.3.0", 31 | "eslint-config-airbnb-base": "^11.3.0", 32 | "eslint-loader": "^1.9.0", 33 | "eslint-plugin-import": "^2.7.0", 34 | "mocha": "^3.4.2", 35 | "mocha-junit-reporter": "^1.13.0", 36 | "really-need": "^1.9.2", 37 | "sinon": "^2.3.8", 38 | "sinon-mongoose": "^2.0.2", 39 | "supertest": "^3.0.0" 40 | }, 41 | "dependencies": { 42 | "babel-core": "^6.25.0", 43 | "babel-loader": "^7.1.1", 44 | "babel-preset-es2015": "^6.24.1", 45 | "body-parser": "^1.17.2", 46 | "bootstrap-slider": "^9.8.1", 47 | "cookie": "^0.3.1", 48 | "cookie-parser": "^1.4.3", 49 | "express": "^4.15.3", 50 | "express-session": "^1.15.3", 51 | "file-loader": "^0.11.2", 52 | "formidable": "^1.1.1", 53 | "html-loader": "^0.4.5", 54 | "mongoose": "^4.11.3", 55 | "waves-loaders": "github:ircam-rnd/loaders", 56 | "waves-ui": "github:wavesjs/ui", 57 | "webpack": "^3.1.0", 58 | "webpack-dev-server": "^2.5.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /public/css/font-awesome.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); 10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | .fa { 15 | display: inline-block; 16 | font: normal normal normal 14px/1 FontAwesome; 17 | font-size: inherit; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | /* makes the font 33% larger relative to the icon container */ 23 | .fa-lg { 24 | font-size: 1.33333333em; 25 | line-height: 0.75em; 26 | vertical-align: -15%; 27 | } 28 | .fa-2x { 29 | font-size: 2em; 30 | } 31 | .fa-3x { 32 | font-size: 3em; 33 | } 34 | .fa-4x { 35 | font-size: 4em; 36 | } 37 | .fa-5x { 38 | font-size: 5em; 39 | } 40 | .fa-fw { 41 | width: 1.28571429em; 42 | text-align: center; 43 | } 44 | .fa-ul { 45 | padding-left: 0; 46 | margin-left: 2.14285714em; 47 | list-style-type: none; 48 | } 49 | .fa-ul > li { 50 | position: relative; 51 | } 52 | .fa-li { 53 | position: absolute; 54 | left: -2.14285714em; 55 | width: 2.14285714em; 56 | top: 0.14285714em; 57 | text-align: center; 58 | } 59 | .fa-li.fa-lg { 60 | left: -1.85714286em; 61 | } 62 | .fa-border { 63 | padding: .2em .25em .15em; 64 | border: solid 0.08em #eeeeee; 65 | border-radius: .1em; 66 | } 67 | .fa-pull-left { 68 | float: left; 69 | } 70 | .fa-pull-right { 71 | float: right; 72 | } 73 | .fa.fa-pull-left { 74 | margin-right: .3em; 75 | } 76 | .fa.fa-pull-right { 77 | margin-left: .3em; 78 | } 79 | /* Deprecated as of 4.4.0 */ 80 | .pull-right { 81 | float: right; 82 | } 83 | .pull-left { 84 | float: left; 85 | } 86 | .fa.pull-left { 87 | margin-right: .3em; 88 | } 89 | .fa.pull-right { 90 | margin-left: .3em; 91 | } 92 | .fa-spin { 93 | -webkit-animation: fa-spin 2s infinite linear; 94 | animation: fa-spin 2s infinite linear; 95 | } 96 | .fa-pulse { 97 | -webkit-animation: fa-spin 1s infinite steps(8); 98 | animation: fa-spin 1s infinite steps(8); 99 | } 100 | @-webkit-keyframes fa-spin { 101 | 0% { 102 | -webkit-transform: rotate(0deg); 103 | transform: rotate(0deg); 104 | } 105 | 100% { 106 | -webkit-transform: rotate(359deg); 107 | transform: rotate(359deg); 108 | } 109 | } 110 | @keyframes fa-spin { 111 | 0% { 112 | -webkit-transform: rotate(0deg); 113 | transform: rotate(0deg); 114 | } 115 | 100% { 116 | -webkit-transform: rotate(359deg); 117 | transform: rotate(359deg); 118 | } 119 | } 120 | .fa-rotate-90 { 121 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; 122 | -webkit-transform: rotate(90deg); 123 | -ms-transform: rotate(90deg); 124 | transform: rotate(90deg); 125 | } 126 | .fa-rotate-180 { 127 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; 128 | -webkit-transform: rotate(180deg); 129 | -ms-transform: rotate(180deg); 130 | transform: rotate(180deg); 131 | } 132 | .fa-rotate-270 { 133 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 134 | -webkit-transform: rotate(270deg); 135 | -ms-transform: rotate(270deg); 136 | transform: rotate(270deg); 137 | } 138 | .fa-flip-horizontal { 139 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; 140 | -webkit-transform: scale(-1, 1); 141 | -ms-transform: scale(-1, 1); 142 | transform: scale(-1, 1); 143 | } 144 | .fa-flip-vertical { 145 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; 146 | -webkit-transform: scale(1, -1); 147 | -ms-transform: scale(1, -1); 148 | transform: scale(1, -1); 149 | } 150 | :root .fa-rotate-90, 151 | :root .fa-rotate-180, 152 | :root .fa-rotate-270, 153 | :root .fa-flip-horizontal, 154 | :root .fa-flip-vertical { 155 | filter: none; 156 | } 157 | .fa-stack { 158 | position: relative; 159 | display: inline-block; 160 | width: 2em; 161 | height: 2em; 162 | line-height: 2em; 163 | vertical-align: middle; 164 | } 165 | .fa-stack-1x, 166 | .fa-stack-2x { 167 | position: absolute; 168 | left: 0; 169 | width: 100%; 170 | text-align: center; 171 | } 172 | .fa-stack-1x { 173 | line-height: inherit; 174 | } 175 | .fa-stack-2x { 176 | font-size: 2em; 177 | } 178 | .fa-inverse { 179 | color: #ffffff; 180 | } 181 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 182 | readers do not read off random characters that represent icons */ 183 | .fa-glass:before { 184 | content: "\f000"; 185 | } 186 | .fa-music:before { 187 | content: "\f001"; 188 | } 189 | .fa-search:before { 190 | content: "\f002"; 191 | } 192 | .fa-envelope-o:before { 193 | content: "\f003"; 194 | } 195 | .fa-heart:before { 196 | content: "\f004"; 197 | } 198 | .fa-star:before { 199 | content: "\f005"; 200 | } 201 | .fa-star-o:before { 202 | content: "\f006"; 203 | } 204 | .fa-user:before { 205 | content: "\f007"; 206 | } 207 | .fa-film:before { 208 | content: "\f008"; 209 | } 210 | .fa-th-large:before { 211 | content: "\f009"; 212 | } 213 | .fa-th:before { 214 | content: "\f00a"; 215 | } 216 | .fa-th-list:before { 217 | content: "\f00b"; 218 | } 219 | .fa-check:before { 220 | content: "\f00c"; 221 | } 222 | .fa-remove:before, 223 | .fa-close:before, 224 | .fa-times:before { 225 | content: "\f00d"; 226 | } 227 | .fa-search-plus:before { 228 | content: "\f00e"; 229 | } 230 | .fa-search-minus:before { 231 | content: "\f010"; 232 | } 233 | .fa-power-off:before { 234 | content: "\f011"; 235 | } 236 | .fa-signal:before { 237 | content: "\f012"; 238 | } 239 | .fa-gear:before, 240 | .fa-cog:before { 241 | content: "\f013"; 242 | } 243 | .fa-trash-o:before { 244 | content: "\f014"; 245 | } 246 | .fa-home:before { 247 | content: "\f015"; 248 | } 249 | .fa-file-o:before { 250 | content: "\f016"; 251 | } 252 | .fa-clock-o:before { 253 | content: "\f017"; 254 | } 255 | .fa-road:before { 256 | content: "\f018"; 257 | } 258 | .fa-download:before { 259 | content: "\f019"; 260 | } 261 | .fa-arrow-circle-o-down:before { 262 | content: "\f01a"; 263 | } 264 | .fa-arrow-circle-o-up:before { 265 | content: "\f01b"; 266 | } 267 | .fa-inbox:before { 268 | content: "\f01c"; 269 | } 270 | .fa-play-circle-o:before { 271 | content: "\f01d"; 272 | } 273 | .fa-rotate-right:before, 274 | .fa-repeat:before { 275 | content: "\f01e"; 276 | } 277 | .fa-refresh:before { 278 | content: "\f021"; 279 | } 280 | .fa-list-alt:before { 281 | content: "\f022"; 282 | } 283 | .fa-lock:before { 284 | content: "\f023"; 285 | } 286 | .fa-flag:before { 287 | content: "\f024"; 288 | } 289 | .fa-headphones:before { 290 | content: "\f025"; 291 | } 292 | .fa-volume-off:before { 293 | content: "\f026"; 294 | } 295 | .fa-volume-down:before { 296 | content: "\f027"; 297 | } 298 | .fa-volume-up:before { 299 | content: "\f028"; 300 | } 301 | .fa-qrcode:before { 302 | content: "\f029"; 303 | } 304 | .fa-barcode:before { 305 | content: "\f02a"; 306 | } 307 | .fa-tag:before { 308 | content: "\f02b"; 309 | } 310 | .fa-tags:before { 311 | content: "\f02c"; 312 | } 313 | .fa-book:before { 314 | content: "\f02d"; 315 | } 316 | .fa-bookmark:before { 317 | content: "\f02e"; 318 | } 319 | .fa-print:before { 320 | content: "\f02f"; 321 | } 322 | .fa-camera:before { 323 | content: "\f030"; 324 | } 325 | .fa-font:before { 326 | content: "\f031"; 327 | } 328 | .fa-bold:before { 329 | content: "\f032"; 330 | } 331 | .fa-italic:before { 332 | content: "\f033"; 333 | } 334 | .fa-text-height:before { 335 | content: "\f034"; 336 | } 337 | .fa-text-width:before { 338 | content: "\f035"; 339 | } 340 | .fa-align-left:before { 341 | content: "\f036"; 342 | } 343 | .fa-align-center:before { 344 | content: "\f037"; 345 | } 346 | .fa-align-right:before { 347 | content: "\f038"; 348 | } 349 | .fa-align-justify:before { 350 | content: "\f039"; 351 | } 352 | .fa-list:before { 353 | content: "\f03a"; 354 | } 355 | .fa-dedent:before, 356 | .fa-outdent:before { 357 | content: "\f03b"; 358 | } 359 | .fa-indent:before { 360 | content: "\f03c"; 361 | } 362 | .fa-video-camera:before { 363 | content: "\f03d"; 364 | } 365 | .fa-photo:before, 366 | .fa-image:before, 367 | .fa-picture-o:before { 368 | content: "\f03e"; 369 | } 370 | .fa-pencil:before { 371 | content: "\f040"; 372 | } 373 | .fa-map-marker:before { 374 | content: "\f041"; 375 | } 376 | .fa-adjust:before { 377 | content: "\f042"; 378 | } 379 | .fa-tint:before { 380 | content: "\f043"; 381 | } 382 | .fa-edit:before, 383 | .fa-pencil-square-o:before { 384 | content: "\f044"; 385 | } 386 | .fa-share-square-o:before { 387 | content: "\f045"; 388 | } 389 | .fa-check-square-o:before { 390 | content: "\f046"; 391 | } 392 | .fa-arrows:before { 393 | content: "\f047"; 394 | } 395 | .fa-step-backward:before { 396 | content: "\f048"; 397 | } 398 | .fa-fast-backward:before { 399 | content: "\f049"; 400 | } 401 | .fa-backward:before { 402 | content: "\f04a"; 403 | } 404 | .fa-play:before { 405 | content: "\f04b"; 406 | } 407 | .fa-pause:before { 408 | content: "\f04c"; 409 | } 410 | .fa-stop:before { 411 | content: "\f04d"; 412 | } 413 | .fa-forward:before { 414 | content: "\f04e"; 415 | } 416 | .fa-fast-forward:before { 417 | content: "\f050"; 418 | } 419 | .fa-step-forward:before { 420 | content: "\f051"; 421 | } 422 | .fa-eject:before { 423 | content: "\f052"; 424 | } 425 | .fa-chevron-left:before { 426 | content: "\f053"; 427 | } 428 | .fa-chevron-right:before { 429 | content: "\f054"; 430 | } 431 | .fa-plus-circle:before { 432 | content: "\f055"; 433 | } 434 | .fa-minus-circle:before { 435 | content: "\f056"; 436 | } 437 | .fa-times-circle:before { 438 | content: "\f057"; 439 | } 440 | .fa-check-circle:before { 441 | content: "\f058"; 442 | } 443 | .fa-question-circle:before { 444 | content: "\f059"; 445 | } 446 | .fa-info-circle:before { 447 | content: "\f05a"; 448 | } 449 | .fa-crosshairs:before { 450 | content: "\f05b"; 451 | } 452 | .fa-times-circle-o:before { 453 | content: "\f05c"; 454 | } 455 | .fa-check-circle-o:before { 456 | content: "\f05d"; 457 | } 458 | .fa-ban:before { 459 | content: "\f05e"; 460 | } 461 | .fa-arrow-left:before { 462 | content: "\f060"; 463 | } 464 | .fa-arrow-right:before { 465 | content: "\f061"; 466 | } 467 | .fa-arrow-up:before { 468 | content: "\f062"; 469 | } 470 | .fa-arrow-down:before { 471 | content: "\f063"; 472 | } 473 | .fa-mail-forward:before, 474 | .fa-share:before { 475 | content: "\f064"; 476 | } 477 | .fa-expand:before { 478 | content: "\f065"; 479 | } 480 | .fa-compress:before { 481 | content: "\f066"; 482 | } 483 | .fa-plus:before { 484 | content: "\f067"; 485 | } 486 | .fa-minus:before { 487 | content: "\f068"; 488 | } 489 | .fa-asterisk:before { 490 | content: "\f069"; 491 | } 492 | .fa-exclamation-circle:before { 493 | content: "\f06a"; 494 | } 495 | .fa-gift:before { 496 | content: "\f06b"; 497 | } 498 | .fa-leaf:before { 499 | content: "\f06c"; 500 | } 501 | .fa-fire:before { 502 | content: "\f06d"; 503 | } 504 | .fa-eye:before { 505 | content: "\f06e"; 506 | } 507 | .fa-eye-slash:before { 508 | content: "\f070"; 509 | } 510 | .fa-warning:before, 511 | .fa-exclamation-triangle:before { 512 | content: "\f071"; 513 | } 514 | .fa-plane:before { 515 | content: "\f072"; 516 | } 517 | .fa-calendar:before { 518 | content: "\f073"; 519 | } 520 | .fa-random:before { 521 | content: "\f074"; 522 | } 523 | .fa-comment:before { 524 | content: "\f075"; 525 | } 526 | .fa-magnet:before { 527 | content: "\f076"; 528 | } 529 | .fa-chevron-up:before { 530 | content: "\f077"; 531 | } 532 | .fa-chevron-down:before { 533 | content: "\f078"; 534 | } 535 | .fa-retweet:before { 536 | content: "\f079"; 537 | } 538 | .fa-shopping-cart:before { 539 | content: "\f07a"; 540 | } 541 | .fa-folder:before { 542 | content: "\f07b"; 543 | } 544 | .fa-folder-open:before { 545 | content: "\f07c"; 546 | } 547 | .fa-arrows-v:before { 548 | content: "\f07d"; 549 | } 550 | .fa-arrows-h:before { 551 | content: "\f07e"; 552 | } 553 | .fa-bar-chart-o:before, 554 | .fa-bar-chart:before { 555 | content: "\f080"; 556 | } 557 | .fa-twitter-square:before { 558 | content: "\f081"; 559 | } 560 | .fa-facebook-square:before { 561 | content: "\f082"; 562 | } 563 | .fa-camera-retro:before { 564 | content: "\f083"; 565 | } 566 | .fa-key:before { 567 | content: "\f084"; 568 | } 569 | .fa-gears:before, 570 | .fa-cogs:before { 571 | content: "\f085"; 572 | } 573 | .fa-comments:before { 574 | content: "\f086"; 575 | } 576 | .fa-thumbs-o-up:before { 577 | content: "\f087"; 578 | } 579 | .fa-thumbs-o-down:before { 580 | content: "\f088"; 581 | } 582 | .fa-star-half:before { 583 | content: "\f089"; 584 | } 585 | .fa-heart-o:before { 586 | content: "\f08a"; 587 | } 588 | .fa-sign-out:before { 589 | content: "\f08b"; 590 | } 591 | .fa-linkedin-square:before { 592 | content: "\f08c"; 593 | } 594 | .fa-thumb-tack:before { 595 | content: "\f08d"; 596 | } 597 | .fa-external-link:before { 598 | content: "\f08e"; 599 | } 600 | .fa-sign-in:before { 601 | content: "\f090"; 602 | } 603 | .fa-trophy:before { 604 | content: "\f091"; 605 | } 606 | .fa-github-square:before { 607 | content: "\f092"; 608 | } 609 | .fa-upload:before { 610 | content: "\f093"; 611 | } 612 | .fa-lemon-o:before { 613 | content: "\f094"; 614 | } 615 | .fa-phone:before { 616 | content: "\f095"; 617 | } 618 | .fa-square-o:before { 619 | content: "\f096"; 620 | } 621 | .fa-bookmark-o:before { 622 | content: "\f097"; 623 | } 624 | .fa-phone-square:before { 625 | content: "\f098"; 626 | } 627 | .fa-twitter:before { 628 | content: "\f099"; 629 | } 630 | .fa-facebook-f:before, 631 | .fa-facebook:before { 632 | content: "\f09a"; 633 | } 634 | .fa-github:before { 635 | content: "\f09b"; 636 | } 637 | .fa-unlock:before { 638 | content: "\f09c"; 639 | } 640 | .fa-credit-card:before { 641 | content: "\f09d"; 642 | } 643 | .fa-feed:before, 644 | .fa-rss:before { 645 | content: "\f09e"; 646 | } 647 | .fa-hdd-o:before { 648 | content: "\f0a0"; 649 | } 650 | .fa-bullhorn:before { 651 | content: "\f0a1"; 652 | } 653 | .fa-bell:before { 654 | content: "\f0f3"; 655 | } 656 | .fa-certificate:before { 657 | content: "\f0a3"; 658 | } 659 | .fa-hand-o-right:before { 660 | content: "\f0a4"; 661 | } 662 | .fa-hand-o-left:before { 663 | content: "\f0a5"; 664 | } 665 | .fa-hand-o-up:before { 666 | content: "\f0a6"; 667 | } 668 | .fa-hand-o-down:before { 669 | content: "\f0a7"; 670 | } 671 | .fa-arrow-circle-left:before { 672 | content: "\f0a8"; 673 | } 674 | .fa-arrow-circle-right:before { 675 | content: "\f0a9"; 676 | } 677 | .fa-arrow-circle-up:before { 678 | content: "\f0aa"; 679 | } 680 | .fa-arrow-circle-down:before { 681 | content: "\f0ab"; 682 | } 683 | .fa-globe:before { 684 | content: "\f0ac"; 685 | } 686 | .fa-wrench:before { 687 | content: "\f0ad"; 688 | } 689 | .fa-tasks:before { 690 | content: "\f0ae"; 691 | } 692 | .fa-filter:before { 693 | content: "\f0b0"; 694 | } 695 | .fa-briefcase:before { 696 | content: "\f0b1"; 697 | } 698 | .fa-arrows-alt:before { 699 | content: "\f0b2"; 700 | } 701 | .fa-group:before, 702 | .fa-users:before { 703 | content: "\f0c0"; 704 | } 705 | .fa-chain:before, 706 | .fa-link:before { 707 | content: "\f0c1"; 708 | } 709 | .fa-cloud:before { 710 | content: "\f0c2"; 711 | } 712 | .fa-flask:before { 713 | content: "\f0c3"; 714 | } 715 | .fa-cut:before, 716 | .fa-scissors:before { 717 | content: "\f0c4"; 718 | } 719 | .fa-copy:before, 720 | .fa-files-o:before { 721 | content: "\f0c5"; 722 | } 723 | .fa-paperclip:before { 724 | content: "\f0c6"; 725 | } 726 | .fa-save:before, 727 | .fa-floppy-o:before { 728 | content: "\f0c7"; 729 | } 730 | .fa-square:before { 731 | content: "\f0c8"; 732 | } 733 | .fa-navicon:before, 734 | .fa-reorder:before, 735 | .fa-bars:before { 736 | content: "\f0c9"; 737 | } 738 | .fa-list-ul:before { 739 | content: "\f0ca"; 740 | } 741 | .fa-list-ol:before { 742 | content: "\f0cb"; 743 | } 744 | .fa-strikethrough:before { 745 | content: "\f0cc"; 746 | } 747 | .fa-underline:before { 748 | content: "\f0cd"; 749 | } 750 | .fa-table:before { 751 | content: "\f0ce"; 752 | } 753 | .fa-magic:before { 754 | content: "\f0d0"; 755 | } 756 | .fa-truck:before { 757 | content: "\f0d1"; 758 | } 759 | .fa-pinterest:before { 760 | content: "\f0d2"; 761 | } 762 | .fa-pinterest-square:before { 763 | content: "\f0d3"; 764 | } 765 | .fa-google-plus-square:before { 766 | content: "\f0d4"; 767 | } 768 | .fa-google-plus:before { 769 | content: "\f0d5"; 770 | } 771 | .fa-money:before { 772 | content: "\f0d6"; 773 | } 774 | .fa-caret-down:before { 775 | content: "\f0d7"; 776 | } 777 | .fa-caret-up:before { 778 | content: "\f0d8"; 779 | } 780 | .fa-caret-left:before { 781 | content: "\f0d9"; 782 | } 783 | .fa-caret-right:before { 784 | content: "\f0da"; 785 | } 786 | .fa-columns:before { 787 | content: "\f0db"; 788 | } 789 | .fa-unsorted:before, 790 | .fa-sort:before { 791 | content: "\f0dc"; 792 | } 793 | .fa-sort-down:before, 794 | .fa-sort-desc:before { 795 | content: "\f0dd"; 796 | } 797 | .fa-sort-up:before, 798 | .fa-sort-asc:before { 799 | content: "\f0de"; 800 | } 801 | .fa-envelope:before { 802 | content: "\f0e0"; 803 | } 804 | .fa-linkedin:before { 805 | content: "\f0e1"; 806 | } 807 | .fa-rotate-left:before, 808 | .fa-undo:before { 809 | content: "\f0e2"; 810 | } 811 | .fa-legal:before, 812 | .fa-gavel:before { 813 | content: "\f0e3"; 814 | } 815 | .fa-dashboard:before, 816 | .fa-tachometer:before { 817 | content: "\f0e4"; 818 | } 819 | .fa-comment-o:before { 820 | content: "\f0e5"; 821 | } 822 | .fa-comments-o:before { 823 | content: "\f0e6"; 824 | } 825 | .fa-flash:before, 826 | .fa-bolt:before { 827 | content: "\f0e7"; 828 | } 829 | .fa-sitemap:before { 830 | content: "\f0e8"; 831 | } 832 | .fa-umbrella:before { 833 | content: "\f0e9"; 834 | } 835 | .fa-paste:before, 836 | .fa-clipboard:before { 837 | content: "\f0ea"; 838 | } 839 | .fa-lightbulb-o:before { 840 | content: "\f0eb"; 841 | } 842 | .fa-exchange:before { 843 | content: "\f0ec"; 844 | } 845 | .fa-cloud-download:before { 846 | content: "\f0ed"; 847 | } 848 | .fa-cloud-upload:before { 849 | content: "\f0ee"; 850 | } 851 | .fa-user-md:before { 852 | content: "\f0f0"; 853 | } 854 | .fa-stethoscope:before { 855 | content: "\f0f1"; 856 | } 857 | .fa-suitcase:before { 858 | content: "\f0f2"; 859 | } 860 | .fa-bell-o:before { 861 | content: "\f0a2"; 862 | } 863 | .fa-coffee:before { 864 | content: "\f0f4"; 865 | } 866 | .fa-cutlery:before { 867 | content: "\f0f5"; 868 | } 869 | .fa-file-text-o:before { 870 | content: "\f0f6"; 871 | } 872 | .fa-building-o:before { 873 | content: "\f0f7"; 874 | } 875 | .fa-hospital-o:before { 876 | content: "\f0f8"; 877 | } 878 | .fa-ambulance:before { 879 | content: "\f0f9"; 880 | } 881 | .fa-medkit:before { 882 | content: "\f0fa"; 883 | } 884 | .fa-fighter-jet:before { 885 | content: "\f0fb"; 886 | } 887 | .fa-beer:before { 888 | content: "\f0fc"; 889 | } 890 | .fa-h-square:before { 891 | content: "\f0fd"; 892 | } 893 | .fa-plus-square:before { 894 | content: "\f0fe"; 895 | } 896 | .fa-angle-double-left:before { 897 | content: "\f100"; 898 | } 899 | .fa-angle-double-right:before { 900 | content: "\f101"; 901 | } 902 | .fa-angle-double-up:before { 903 | content: "\f102"; 904 | } 905 | .fa-angle-double-down:before { 906 | content: "\f103"; 907 | } 908 | .fa-angle-left:before { 909 | content: "\f104"; 910 | } 911 | .fa-angle-right:before { 912 | content: "\f105"; 913 | } 914 | .fa-angle-up:before { 915 | content: "\f106"; 916 | } 917 | .fa-angle-down:before { 918 | content: "\f107"; 919 | } 920 | .fa-desktop:before { 921 | content: "\f108"; 922 | } 923 | .fa-laptop:before { 924 | content: "\f109"; 925 | } 926 | .fa-tablet:before { 927 | content: "\f10a"; 928 | } 929 | .fa-mobile-phone:before, 930 | .fa-mobile:before { 931 | content: "\f10b"; 932 | } 933 | .fa-circle-o:before { 934 | content: "\f10c"; 935 | } 936 | .fa-quote-left:before { 937 | content: "\f10d"; 938 | } 939 | .fa-quote-right:before { 940 | content: "\f10e"; 941 | } 942 | .fa-spinner:before { 943 | content: "\f110"; 944 | } 945 | .fa-circle:before { 946 | content: "\f111"; 947 | } 948 | .fa-mail-reply:before, 949 | .fa-reply:before { 950 | content: "\f112"; 951 | } 952 | .fa-github-alt:before { 953 | content: "\f113"; 954 | } 955 | .fa-folder-o:before { 956 | content: "\f114"; 957 | } 958 | .fa-folder-open-o:before { 959 | content: "\f115"; 960 | } 961 | .fa-smile-o:before { 962 | content: "\f118"; 963 | } 964 | .fa-frown-o:before { 965 | content: "\f119"; 966 | } 967 | .fa-meh-o:before { 968 | content: "\f11a"; 969 | } 970 | .fa-gamepad:before { 971 | content: "\f11b"; 972 | } 973 | .fa-keyboard-o:before { 974 | content: "\f11c"; 975 | } 976 | .fa-flag-o:before { 977 | content: "\f11d"; 978 | } 979 | .fa-flag-checkered:before { 980 | content: "\f11e"; 981 | } 982 | .fa-terminal:before { 983 | content: "\f120"; 984 | } 985 | .fa-code:before { 986 | content: "\f121"; 987 | } 988 | .fa-mail-reply-all:before, 989 | .fa-reply-all:before { 990 | content: "\f122"; 991 | } 992 | .fa-star-half-empty:before, 993 | .fa-star-half-full:before, 994 | .fa-star-half-o:before { 995 | content: "\f123"; 996 | } 997 | .fa-location-arrow:before { 998 | content: "\f124"; 999 | } 1000 | .fa-crop:before { 1001 | content: "\f125"; 1002 | } 1003 | .fa-code-fork:before { 1004 | content: "\f126"; 1005 | } 1006 | .fa-unlink:before, 1007 | .fa-chain-broken:before { 1008 | content: "\f127"; 1009 | } 1010 | .fa-question:before { 1011 | content: "\f128"; 1012 | } 1013 | .fa-info:before { 1014 | content: "\f129"; 1015 | } 1016 | .fa-exclamation:before { 1017 | content: "\f12a"; 1018 | } 1019 | .fa-superscript:before { 1020 | content: "\f12b"; 1021 | } 1022 | .fa-subscript:before { 1023 | content: "\f12c"; 1024 | } 1025 | .fa-eraser:before { 1026 | content: "\f12d"; 1027 | } 1028 | .fa-puzzle-piece:before { 1029 | content: "\f12e"; 1030 | } 1031 | .fa-microphone:before { 1032 | content: "\f130"; 1033 | } 1034 | .fa-microphone-slash:before { 1035 | content: "\f131"; 1036 | } 1037 | .fa-shield:before { 1038 | content: "\f132"; 1039 | } 1040 | .fa-calendar-o:before { 1041 | content: "\f133"; 1042 | } 1043 | .fa-fire-extinguisher:before { 1044 | content: "\f134"; 1045 | } 1046 | .fa-rocket:before { 1047 | content: "\f135"; 1048 | } 1049 | .fa-maxcdn:before { 1050 | content: "\f136"; 1051 | } 1052 | .fa-chevron-circle-left:before { 1053 | content: "\f137"; 1054 | } 1055 | .fa-chevron-circle-right:before { 1056 | content: "\f138"; 1057 | } 1058 | .fa-chevron-circle-up:before { 1059 | content: "\f139"; 1060 | } 1061 | .fa-chevron-circle-down:before { 1062 | content: "\f13a"; 1063 | } 1064 | .fa-html5:before { 1065 | content: "\f13b"; 1066 | } 1067 | .fa-css3:before { 1068 | content: "\f13c"; 1069 | } 1070 | .fa-anchor:before { 1071 | content: "\f13d"; 1072 | } 1073 | .fa-unlock-alt:before { 1074 | content: "\f13e"; 1075 | } 1076 | .fa-bullseye:before { 1077 | content: "\f140"; 1078 | } 1079 | .fa-ellipsis-h:before { 1080 | content: "\f141"; 1081 | } 1082 | .fa-ellipsis-v:before { 1083 | content: "\f142"; 1084 | } 1085 | .fa-rss-square:before { 1086 | content: "\f143"; 1087 | } 1088 | .fa-play-circle:before { 1089 | content: "\f144"; 1090 | } 1091 | .fa-ticket:before { 1092 | content: "\f145"; 1093 | } 1094 | .fa-minus-square:before { 1095 | content: "\f146"; 1096 | } 1097 | .fa-minus-square-o:before { 1098 | content: "\f147"; 1099 | } 1100 | .fa-level-up:before { 1101 | content: "\f148"; 1102 | } 1103 | .fa-level-down:before { 1104 | content: "\f149"; 1105 | } 1106 | .fa-check-square:before { 1107 | content: "\f14a"; 1108 | } 1109 | .fa-pencil-square:before { 1110 | content: "\f14b"; 1111 | } 1112 | .fa-external-link-square:before { 1113 | content: "\f14c"; 1114 | } 1115 | .fa-share-square:before { 1116 | content: "\f14d"; 1117 | } 1118 | .fa-compass:before { 1119 | content: "\f14e"; 1120 | } 1121 | .fa-toggle-down:before, 1122 | .fa-caret-square-o-down:before { 1123 | content: "\f150"; 1124 | } 1125 | .fa-toggle-up:before, 1126 | .fa-caret-square-o-up:before { 1127 | content: "\f151"; 1128 | } 1129 | .fa-toggle-right:before, 1130 | .fa-caret-square-o-right:before { 1131 | content: "\f152"; 1132 | } 1133 | .fa-euro:before, 1134 | .fa-eur:before { 1135 | content: "\f153"; 1136 | } 1137 | .fa-gbp:before { 1138 | content: "\f154"; 1139 | } 1140 | .fa-dollar:before, 1141 | .fa-usd:before { 1142 | content: "\f155"; 1143 | } 1144 | .fa-rupee:before, 1145 | .fa-inr:before { 1146 | content: "\f156"; 1147 | } 1148 | .fa-cny:before, 1149 | .fa-rmb:before, 1150 | .fa-yen:before, 1151 | .fa-jpy:before { 1152 | content: "\f157"; 1153 | } 1154 | .fa-ruble:before, 1155 | .fa-rouble:before, 1156 | .fa-rub:before { 1157 | content: "\f158"; 1158 | } 1159 | .fa-won:before, 1160 | .fa-krw:before { 1161 | content: "\f159"; 1162 | } 1163 | .fa-bitcoin:before, 1164 | .fa-btc:before { 1165 | content: "\f15a"; 1166 | } 1167 | .fa-file:before { 1168 | content: "\f15b"; 1169 | } 1170 | .fa-file-text:before { 1171 | content: "\f15c"; 1172 | } 1173 | .fa-sort-alpha-asc:before { 1174 | content: "\f15d"; 1175 | } 1176 | .fa-sort-alpha-desc:before { 1177 | content: "\f15e"; 1178 | } 1179 | .fa-sort-amount-asc:before { 1180 | content: "\f160"; 1181 | } 1182 | .fa-sort-amount-desc:before { 1183 | content: "\f161"; 1184 | } 1185 | .fa-sort-numeric-asc:before { 1186 | content: "\f162"; 1187 | } 1188 | .fa-sort-numeric-desc:before { 1189 | content: "\f163"; 1190 | } 1191 | .fa-thumbs-up:before { 1192 | content: "\f164"; 1193 | } 1194 | .fa-thumbs-down:before { 1195 | content: "\f165"; 1196 | } 1197 | .fa-youtube-square:before { 1198 | content: "\f166"; 1199 | } 1200 | .fa-youtube:before { 1201 | content: "\f167"; 1202 | } 1203 | .fa-xing:before { 1204 | content: "\f168"; 1205 | } 1206 | .fa-xing-square:before { 1207 | content: "\f169"; 1208 | } 1209 | .fa-youtube-play:before { 1210 | content: "\f16a"; 1211 | } 1212 | .fa-dropbox:before { 1213 | content: "\f16b"; 1214 | } 1215 | .fa-stack-overflow:before { 1216 | content: "\f16c"; 1217 | } 1218 | .fa-instagram:before { 1219 | content: "\f16d"; 1220 | } 1221 | .fa-flickr:before { 1222 | content: "\f16e"; 1223 | } 1224 | .fa-adn:before { 1225 | content: "\f170"; 1226 | } 1227 | .fa-bitbucket:before { 1228 | content: "\f171"; 1229 | } 1230 | .fa-bitbucket-square:before { 1231 | content: "\f172"; 1232 | } 1233 | .fa-tumblr:before { 1234 | content: "\f173"; 1235 | } 1236 | .fa-tumblr-square:before { 1237 | content: "\f174"; 1238 | } 1239 | .fa-long-arrow-down:before { 1240 | content: "\f175"; 1241 | } 1242 | .fa-long-arrow-up:before { 1243 | content: "\f176"; 1244 | } 1245 | .fa-long-arrow-left:before { 1246 | content: "\f177"; 1247 | } 1248 | .fa-long-arrow-right:before { 1249 | content: "\f178"; 1250 | } 1251 | .fa-apple:before { 1252 | content: "\f179"; 1253 | } 1254 | .fa-windows:before { 1255 | content: "\f17a"; 1256 | } 1257 | .fa-android:before { 1258 | content: "\f17b"; 1259 | } 1260 | .fa-linux:before { 1261 | content: "\f17c"; 1262 | } 1263 | .fa-dribbble:before { 1264 | content: "\f17d"; 1265 | } 1266 | .fa-skype:before { 1267 | content: "\f17e"; 1268 | } 1269 | .fa-foursquare:before { 1270 | content: "\f180"; 1271 | } 1272 | .fa-trello:before { 1273 | content: "\f181"; 1274 | } 1275 | .fa-female:before { 1276 | content: "\f182"; 1277 | } 1278 | .fa-male:before { 1279 | content: "\f183"; 1280 | } 1281 | .fa-gittip:before, 1282 | .fa-gratipay:before { 1283 | content: "\f184"; 1284 | } 1285 | .fa-sun-o:before { 1286 | content: "\f185"; 1287 | } 1288 | .fa-moon-o:before { 1289 | content: "\f186"; 1290 | } 1291 | .fa-archive:before { 1292 | content: "\f187"; 1293 | } 1294 | .fa-bug:before { 1295 | content: "\f188"; 1296 | } 1297 | .fa-vk:before { 1298 | content: "\f189"; 1299 | } 1300 | .fa-weibo:before { 1301 | content: "\f18a"; 1302 | } 1303 | .fa-renren:before { 1304 | content: "\f18b"; 1305 | } 1306 | .fa-pagelines:before { 1307 | content: "\f18c"; 1308 | } 1309 | .fa-stack-exchange:before { 1310 | content: "\f18d"; 1311 | } 1312 | .fa-arrow-circle-o-right:before { 1313 | content: "\f18e"; 1314 | } 1315 | .fa-arrow-circle-o-left:before { 1316 | content: "\f190"; 1317 | } 1318 | .fa-toggle-left:before, 1319 | .fa-caret-square-o-left:before { 1320 | content: "\f191"; 1321 | } 1322 | .fa-dot-circle-o:before { 1323 | content: "\f192"; 1324 | } 1325 | .fa-wheelchair:before { 1326 | content: "\f193"; 1327 | } 1328 | .fa-vimeo-square:before { 1329 | content: "\f194"; 1330 | } 1331 | .fa-turkish-lira:before, 1332 | .fa-try:before { 1333 | content: "\f195"; 1334 | } 1335 | .fa-plus-square-o:before { 1336 | content: "\f196"; 1337 | } 1338 | .fa-space-shuttle:before { 1339 | content: "\f197"; 1340 | } 1341 | .fa-slack:before { 1342 | content: "\f198"; 1343 | } 1344 | .fa-envelope-square:before { 1345 | content: "\f199"; 1346 | } 1347 | .fa-wordpress:before { 1348 | content: "\f19a"; 1349 | } 1350 | .fa-openid:before { 1351 | content: "\f19b"; 1352 | } 1353 | .fa-institution:before, 1354 | .fa-bank:before, 1355 | .fa-university:before { 1356 | content: "\f19c"; 1357 | } 1358 | .fa-mortar-board:before, 1359 | .fa-graduation-cap:before { 1360 | content: "\f19d"; 1361 | } 1362 | .fa-yahoo:before { 1363 | content: "\f19e"; 1364 | } 1365 | .fa-google:before { 1366 | content: "\f1a0"; 1367 | } 1368 | .fa-reddit:before { 1369 | content: "\f1a1"; 1370 | } 1371 | .fa-reddit-square:before { 1372 | content: "\f1a2"; 1373 | } 1374 | .fa-stumbleupon-circle:before { 1375 | content: "\f1a3"; 1376 | } 1377 | .fa-stumbleupon:before { 1378 | content: "\f1a4"; 1379 | } 1380 | .fa-delicious:before { 1381 | content: "\f1a5"; 1382 | } 1383 | .fa-digg:before { 1384 | content: "\f1a6"; 1385 | } 1386 | .fa-pied-piper-pp:before { 1387 | content: "\f1a7"; 1388 | } 1389 | .fa-pied-piper-alt:before { 1390 | content: "\f1a8"; 1391 | } 1392 | .fa-drupal:before { 1393 | content: "\f1a9"; 1394 | } 1395 | .fa-joomla:before { 1396 | content: "\f1aa"; 1397 | } 1398 | .fa-language:before { 1399 | content: "\f1ab"; 1400 | } 1401 | .fa-fax:before { 1402 | content: "\f1ac"; 1403 | } 1404 | .fa-building:before { 1405 | content: "\f1ad"; 1406 | } 1407 | .fa-child:before { 1408 | content: "\f1ae"; 1409 | } 1410 | .fa-paw:before { 1411 | content: "\f1b0"; 1412 | } 1413 | .fa-spoon:before { 1414 | content: "\f1b1"; 1415 | } 1416 | .fa-cube:before { 1417 | content: "\f1b2"; 1418 | } 1419 | .fa-cubes:before { 1420 | content: "\f1b3"; 1421 | } 1422 | .fa-behance:before { 1423 | content: "\f1b4"; 1424 | } 1425 | .fa-behance-square:before { 1426 | content: "\f1b5"; 1427 | } 1428 | .fa-steam:before { 1429 | content: "\f1b6"; 1430 | } 1431 | .fa-steam-square:before { 1432 | content: "\f1b7"; 1433 | } 1434 | .fa-recycle:before { 1435 | content: "\f1b8"; 1436 | } 1437 | .fa-automobile:before, 1438 | .fa-car:before { 1439 | content: "\f1b9"; 1440 | } 1441 | .fa-cab:before, 1442 | .fa-taxi:before { 1443 | content: "\f1ba"; 1444 | } 1445 | .fa-tree:before { 1446 | content: "\f1bb"; 1447 | } 1448 | .fa-spotify:before { 1449 | content: "\f1bc"; 1450 | } 1451 | .fa-deviantart:before { 1452 | content: "\f1bd"; 1453 | } 1454 | .fa-soundcloud:before { 1455 | content: "\f1be"; 1456 | } 1457 | .fa-database:before { 1458 | content: "\f1c0"; 1459 | } 1460 | .fa-file-pdf-o:before { 1461 | content: "\f1c1"; 1462 | } 1463 | .fa-file-word-o:before { 1464 | content: "\f1c2"; 1465 | } 1466 | .fa-file-excel-o:before { 1467 | content: "\f1c3"; 1468 | } 1469 | .fa-file-powerpoint-o:before { 1470 | content: "\f1c4"; 1471 | } 1472 | .fa-file-photo-o:before, 1473 | .fa-file-picture-o:before, 1474 | .fa-file-image-o:before { 1475 | content: "\f1c5"; 1476 | } 1477 | .fa-file-zip-o:before, 1478 | .fa-file-archive-o:before { 1479 | content: "\f1c6"; 1480 | } 1481 | .fa-file-sound-o:before, 1482 | .fa-file-audio-o:before { 1483 | content: "\f1c7"; 1484 | } 1485 | .fa-file-movie-o:before, 1486 | .fa-file-video-o:before { 1487 | content: "\f1c8"; 1488 | } 1489 | .fa-file-code-o:before { 1490 | content: "\f1c9"; 1491 | } 1492 | .fa-vine:before { 1493 | content: "\f1ca"; 1494 | } 1495 | .fa-codepen:before { 1496 | content: "\f1cb"; 1497 | } 1498 | .fa-jsfiddle:before { 1499 | content: "\f1cc"; 1500 | } 1501 | .fa-life-bouy:before, 1502 | .fa-life-buoy:before, 1503 | .fa-life-saver:before, 1504 | .fa-support:before, 1505 | .fa-life-ring:before { 1506 | content: "\f1cd"; 1507 | } 1508 | .fa-circle-o-notch:before { 1509 | content: "\f1ce"; 1510 | } 1511 | .fa-ra:before, 1512 | .fa-resistance:before, 1513 | .fa-rebel:before { 1514 | content: "\f1d0"; 1515 | } 1516 | .fa-ge:before, 1517 | .fa-empire:before { 1518 | content: "\f1d1"; 1519 | } 1520 | .fa-git-square:before { 1521 | content: "\f1d2"; 1522 | } 1523 | .fa-git:before { 1524 | content: "\f1d3"; 1525 | } 1526 | .fa-y-combinator-square:before, 1527 | .fa-yc-square:before, 1528 | .fa-hacker-news:before { 1529 | content: "\f1d4"; 1530 | } 1531 | .fa-tencent-weibo:before { 1532 | content: "\f1d5"; 1533 | } 1534 | .fa-qq:before { 1535 | content: "\f1d6"; 1536 | } 1537 | .fa-wechat:before, 1538 | .fa-weixin:before { 1539 | content: "\f1d7"; 1540 | } 1541 | .fa-send:before, 1542 | .fa-paper-plane:before { 1543 | content: "\f1d8"; 1544 | } 1545 | .fa-send-o:before, 1546 | .fa-paper-plane-o:before { 1547 | content: "\f1d9"; 1548 | } 1549 | .fa-history:before { 1550 | content: "\f1da"; 1551 | } 1552 | .fa-circle-thin:before { 1553 | content: "\f1db"; 1554 | } 1555 | .fa-header:before { 1556 | content: "\f1dc"; 1557 | } 1558 | .fa-paragraph:before { 1559 | content: "\f1dd"; 1560 | } 1561 | .fa-sliders:before { 1562 | content: "\f1de"; 1563 | } 1564 | .fa-share-alt:before { 1565 | content: "\f1e0"; 1566 | } 1567 | .fa-share-alt-square:before { 1568 | content: "\f1e1"; 1569 | } 1570 | .fa-bomb:before { 1571 | content: "\f1e2"; 1572 | } 1573 | .fa-soccer-ball-o:before, 1574 | .fa-futbol-o:before { 1575 | content: "\f1e3"; 1576 | } 1577 | .fa-tty:before { 1578 | content: "\f1e4"; 1579 | } 1580 | .fa-binoculars:before { 1581 | content: "\f1e5"; 1582 | } 1583 | .fa-plug:before { 1584 | content: "\f1e6"; 1585 | } 1586 | .fa-slideshare:before { 1587 | content: "\f1e7"; 1588 | } 1589 | .fa-twitch:before { 1590 | content: "\f1e8"; 1591 | } 1592 | .fa-yelp:before { 1593 | content: "\f1e9"; 1594 | } 1595 | .fa-newspaper-o:before { 1596 | content: "\f1ea"; 1597 | } 1598 | .fa-wifi:before { 1599 | content: "\f1eb"; 1600 | } 1601 | .fa-calculator:before { 1602 | content: "\f1ec"; 1603 | } 1604 | .fa-paypal:before { 1605 | content: "\f1ed"; 1606 | } 1607 | .fa-google-wallet:before { 1608 | content: "\f1ee"; 1609 | } 1610 | .fa-cc-visa:before { 1611 | content: "\f1f0"; 1612 | } 1613 | .fa-cc-mastercard:before { 1614 | content: "\f1f1"; 1615 | } 1616 | .fa-cc-discover:before { 1617 | content: "\f1f2"; 1618 | } 1619 | .fa-cc-amex:before { 1620 | content: "\f1f3"; 1621 | } 1622 | .fa-cc-paypal:before { 1623 | content: "\f1f4"; 1624 | } 1625 | .fa-cc-stripe:before { 1626 | content: "\f1f5"; 1627 | } 1628 | .fa-bell-slash:before { 1629 | content: "\f1f6"; 1630 | } 1631 | .fa-bell-slash-o:before { 1632 | content: "\f1f7"; 1633 | } 1634 | .fa-trash:before { 1635 | content: "\f1f8"; 1636 | } 1637 | .fa-copyright:before { 1638 | content: "\f1f9"; 1639 | } 1640 | .fa-at:before { 1641 | content: "\f1fa"; 1642 | } 1643 | .fa-eyedropper:before { 1644 | content: "\f1fb"; 1645 | } 1646 | .fa-paint-brush:before { 1647 | content: "\f1fc"; 1648 | } 1649 | .fa-birthday-cake:before { 1650 | content: "\f1fd"; 1651 | } 1652 | .fa-area-chart:before { 1653 | content: "\f1fe"; 1654 | } 1655 | .fa-pie-chart:before { 1656 | content: "\f200"; 1657 | } 1658 | .fa-line-chart:before { 1659 | content: "\f201"; 1660 | } 1661 | .fa-lastfm:before { 1662 | content: "\f202"; 1663 | } 1664 | .fa-lastfm-square:before { 1665 | content: "\f203"; 1666 | } 1667 | .fa-toggle-off:before { 1668 | content: "\f204"; 1669 | } 1670 | .fa-toggle-on:before { 1671 | content: "\f205"; 1672 | } 1673 | .fa-bicycle:before { 1674 | content: "\f206"; 1675 | } 1676 | .fa-bus:before { 1677 | content: "\f207"; 1678 | } 1679 | .fa-ioxhost:before { 1680 | content: "\f208"; 1681 | } 1682 | .fa-angellist:before { 1683 | content: "\f209"; 1684 | } 1685 | .fa-cc:before { 1686 | content: "\f20a"; 1687 | } 1688 | .fa-shekel:before, 1689 | .fa-sheqel:before, 1690 | .fa-ils:before { 1691 | content: "\f20b"; 1692 | } 1693 | .fa-meanpath:before { 1694 | content: "\f20c"; 1695 | } 1696 | .fa-buysellads:before { 1697 | content: "\f20d"; 1698 | } 1699 | .fa-connectdevelop:before { 1700 | content: "\f20e"; 1701 | } 1702 | .fa-dashcube:before { 1703 | content: "\f210"; 1704 | } 1705 | .fa-forumbee:before { 1706 | content: "\f211"; 1707 | } 1708 | .fa-leanpub:before { 1709 | content: "\f212"; 1710 | } 1711 | .fa-sellsy:before { 1712 | content: "\f213"; 1713 | } 1714 | .fa-shirtsinbulk:before { 1715 | content: "\f214"; 1716 | } 1717 | .fa-simplybuilt:before { 1718 | content: "\f215"; 1719 | } 1720 | .fa-skyatlas:before { 1721 | content: "\f216"; 1722 | } 1723 | .fa-cart-plus:before { 1724 | content: "\f217"; 1725 | } 1726 | .fa-cart-arrow-down:before { 1727 | content: "\f218"; 1728 | } 1729 | .fa-diamond:before { 1730 | content: "\f219"; 1731 | } 1732 | .fa-ship:before { 1733 | content: "\f21a"; 1734 | } 1735 | .fa-user-secret:before { 1736 | content: "\f21b"; 1737 | } 1738 | .fa-motorcycle:before { 1739 | content: "\f21c"; 1740 | } 1741 | .fa-street-view:before { 1742 | content: "\f21d"; 1743 | } 1744 | .fa-heartbeat:before { 1745 | content: "\f21e"; 1746 | } 1747 | .fa-venus:before { 1748 | content: "\f221"; 1749 | } 1750 | .fa-mars:before { 1751 | content: "\f222"; 1752 | } 1753 | .fa-mercury:before { 1754 | content: "\f223"; 1755 | } 1756 | .fa-intersex:before, 1757 | .fa-transgender:before { 1758 | content: "\f224"; 1759 | } 1760 | .fa-transgender-alt:before { 1761 | content: "\f225"; 1762 | } 1763 | .fa-venus-double:before { 1764 | content: "\f226"; 1765 | } 1766 | .fa-mars-double:before { 1767 | content: "\f227"; 1768 | } 1769 | .fa-venus-mars:before { 1770 | content: "\f228"; 1771 | } 1772 | .fa-mars-stroke:before { 1773 | content: "\f229"; 1774 | } 1775 | .fa-mars-stroke-v:before { 1776 | content: "\f22a"; 1777 | } 1778 | .fa-mars-stroke-h:before { 1779 | content: "\f22b"; 1780 | } 1781 | .fa-neuter:before { 1782 | content: "\f22c"; 1783 | } 1784 | .fa-genderless:before { 1785 | content: "\f22d"; 1786 | } 1787 | .fa-facebook-official:before { 1788 | content: "\f230"; 1789 | } 1790 | .fa-pinterest-p:before { 1791 | content: "\f231"; 1792 | } 1793 | .fa-whatsapp:before { 1794 | content: "\f232"; 1795 | } 1796 | .fa-server:before { 1797 | content: "\f233"; 1798 | } 1799 | .fa-user-plus:before { 1800 | content: "\f234"; 1801 | } 1802 | .fa-user-times:before { 1803 | content: "\f235"; 1804 | } 1805 | .fa-hotel:before, 1806 | .fa-bed:before { 1807 | content: "\f236"; 1808 | } 1809 | .fa-viacoin:before { 1810 | content: "\f237"; 1811 | } 1812 | .fa-train:before { 1813 | content: "\f238"; 1814 | } 1815 | .fa-subway:before { 1816 | content: "\f239"; 1817 | } 1818 | .fa-medium:before { 1819 | content: "\f23a"; 1820 | } 1821 | .fa-yc:before, 1822 | .fa-y-combinator:before { 1823 | content: "\f23b"; 1824 | } 1825 | .fa-optin-monster:before { 1826 | content: "\f23c"; 1827 | } 1828 | .fa-opencart:before { 1829 | content: "\f23d"; 1830 | } 1831 | .fa-expeditedssl:before { 1832 | content: "\f23e"; 1833 | } 1834 | .fa-battery-4:before, 1835 | .fa-battery:before, 1836 | .fa-battery-full:before { 1837 | content: "\f240"; 1838 | } 1839 | .fa-battery-3:before, 1840 | .fa-battery-three-quarters:before { 1841 | content: "\f241"; 1842 | } 1843 | .fa-battery-2:before, 1844 | .fa-battery-half:before { 1845 | content: "\f242"; 1846 | } 1847 | .fa-battery-1:before, 1848 | .fa-battery-quarter:before { 1849 | content: "\f243"; 1850 | } 1851 | .fa-battery-0:before, 1852 | .fa-battery-empty:before { 1853 | content: "\f244"; 1854 | } 1855 | .fa-mouse-pointer:before { 1856 | content: "\f245"; 1857 | } 1858 | .fa-i-cursor:before { 1859 | content: "\f246"; 1860 | } 1861 | .fa-object-group:before { 1862 | content: "\f247"; 1863 | } 1864 | .fa-object-ungroup:before { 1865 | content: "\f248"; 1866 | } 1867 | .fa-sticky-note:before { 1868 | content: "\f249"; 1869 | } 1870 | .fa-sticky-note-o:before { 1871 | content: "\f24a"; 1872 | } 1873 | .fa-cc-jcb:before { 1874 | content: "\f24b"; 1875 | } 1876 | .fa-cc-diners-club:before { 1877 | content: "\f24c"; 1878 | } 1879 | .fa-clone:before { 1880 | content: "\f24d"; 1881 | } 1882 | .fa-balance-scale:before { 1883 | content: "\f24e"; 1884 | } 1885 | .fa-hourglass-o:before { 1886 | content: "\f250"; 1887 | } 1888 | .fa-hourglass-1:before, 1889 | .fa-hourglass-start:before { 1890 | content: "\f251"; 1891 | } 1892 | .fa-hourglass-2:before, 1893 | .fa-hourglass-half:before { 1894 | content: "\f252"; 1895 | } 1896 | .fa-hourglass-3:before, 1897 | .fa-hourglass-end:before { 1898 | content: "\f253"; 1899 | } 1900 | .fa-hourglass:before { 1901 | content: "\f254"; 1902 | } 1903 | .fa-hand-grab-o:before, 1904 | .fa-hand-rock-o:before { 1905 | content: "\f255"; 1906 | } 1907 | .fa-hand-stop-o:before, 1908 | .fa-hand-paper-o:before { 1909 | content: "\f256"; 1910 | } 1911 | .fa-hand-scissors-o:before { 1912 | content: "\f257"; 1913 | } 1914 | .fa-hand-lizard-o:before { 1915 | content: "\f258"; 1916 | } 1917 | .fa-hand-spock-o:before { 1918 | content: "\f259"; 1919 | } 1920 | .fa-hand-pointer-o:before { 1921 | content: "\f25a"; 1922 | } 1923 | .fa-hand-peace-o:before { 1924 | content: "\f25b"; 1925 | } 1926 | .fa-trademark:before { 1927 | content: "\f25c"; 1928 | } 1929 | .fa-registered:before { 1930 | content: "\f25d"; 1931 | } 1932 | .fa-creative-commons:before { 1933 | content: "\f25e"; 1934 | } 1935 | .fa-gg:before { 1936 | content: "\f260"; 1937 | } 1938 | .fa-gg-circle:before { 1939 | content: "\f261"; 1940 | } 1941 | .fa-tripadvisor:before { 1942 | content: "\f262"; 1943 | } 1944 | .fa-odnoklassniki:before { 1945 | content: "\f263"; 1946 | } 1947 | .fa-odnoklassniki-square:before { 1948 | content: "\f264"; 1949 | } 1950 | .fa-get-pocket:before { 1951 | content: "\f265"; 1952 | } 1953 | .fa-wikipedia-w:before { 1954 | content: "\f266"; 1955 | } 1956 | .fa-safari:before { 1957 | content: "\f267"; 1958 | } 1959 | .fa-chrome:before { 1960 | content: "\f268"; 1961 | } 1962 | .fa-firefox:before { 1963 | content: "\f269"; 1964 | } 1965 | .fa-opera:before { 1966 | content: "\f26a"; 1967 | } 1968 | .fa-internet-explorer:before { 1969 | content: "\f26b"; 1970 | } 1971 | .fa-tv:before, 1972 | .fa-television:before { 1973 | content: "\f26c"; 1974 | } 1975 | .fa-contao:before { 1976 | content: "\f26d"; 1977 | } 1978 | .fa-500px:before { 1979 | content: "\f26e"; 1980 | } 1981 | .fa-amazon:before { 1982 | content: "\f270"; 1983 | } 1984 | .fa-calendar-plus-o:before { 1985 | content: "\f271"; 1986 | } 1987 | .fa-calendar-minus-o:before { 1988 | content: "\f272"; 1989 | } 1990 | .fa-calendar-times-o:before { 1991 | content: "\f273"; 1992 | } 1993 | .fa-calendar-check-o:before { 1994 | content: "\f274"; 1995 | } 1996 | .fa-industry:before { 1997 | content: "\f275"; 1998 | } 1999 | .fa-map-pin:before { 2000 | content: "\f276"; 2001 | } 2002 | .fa-map-signs:before { 2003 | content: "\f277"; 2004 | } 2005 | .fa-map-o:before { 2006 | content: "\f278"; 2007 | } 2008 | .fa-map:before { 2009 | content: "\f279"; 2010 | } 2011 | .fa-commenting:before { 2012 | content: "\f27a"; 2013 | } 2014 | .fa-commenting-o:before { 2015 | content: "\f27b"; 2016 | } 2017 | .fa-houzz:before { 2018 | content: "\f27c"; 2019 | } 2020 | .fa-vimeo:before { 2021 | content: "\f27d"; 2022 | } 2023 | .fa-black-tie:before { 2024 | content: "\f27e"; 2025 | } 2026 | .fa-fonticons:before { 2027 | content: "\f280"; 2028 | } 2029 | .fa-reddit-alien:before { 2030 | content: "\f281"; 2031 | } 2032 | .fa-edge:before { 2033 | content: "\f282"; 2034 | } 2035 | .fa-credit-card-alt:before { 2036 | content: "\f283"; 2037 | } 2038 | .fa-codiepie:before { 2039 | content: "\f284"; 2040 | } 2041 | .fa-modx:before { 2042 | content: "\f285"; 2043 | } 2044 | .fa-fort-awesome:before { 2045 | content: "\f286"; 2046 | } 2047 | .fa-usb:before { 2048 | content: "\f287"; 2049 | } 2050 | .fa-product-hunt:before { 2051 | content: "\f288"; 2052 | } 2053 | .fa-mixcloud:before { 2054 | content: "\f289"; 2055 | } 2056 | .fa-scribd:before { 2057 | content: "\f28a"; 2058 | } 2059 | .fa-pause-circle:before { 2060 | content: "\f28b"; 2061 | } 2062 | .fa-pause-circle-o:before { 2063 | content: "\f28c"; 2064 | } 2065 | .fa-stop-circle:before { 2066 | content: "\f28d"; 2067 | } 2068 | .fa-stop-circle-o:before { 2069 | content: "\f28e"; 2070 | } 2071 | .fa-shopping-bag:before { 2072 | content: "\f290"; 2073 | } 2074 | .fa-shopping-basket:before { 2075 | content: "\f291"; 2076 | } 2077 | .fa-hashtag:before { 2078 | content: "\f292"; 2079 | } 2080 | .fa-bluetooth:before { 2081 | content: "\f293"; 2082 | } 2083 | .fa-bluetooth-b:before { 2084 | content: "\f294"; 2085 | } 2086 | .fa-percent:before { 2087 | content: "\f295"; 2088 | } 2089 | .fa-gitlab:before { 2090 | content: "\f296"; 2091 | } 2092 | .fa-wpbeginner:before { 2093 | content: "\f297"; 2094 | } 2095 | .fa-wpforms:before { 2096 | content: "\f298"; 2097 | } 2098 | .fa-envira:before { 2099 | content: "\f299"; 2100 | } 2101 | .fa-universal-access:before { 2102 | content: "\f29a"; 2103 | } 2104 | .fa-wheelchair-alt:before { 2105 | content: "\f29b"; 2106 | } 2107 | .fa-question-circle-o:before { 2108 | content: "\f29c"; 2109 | } 2110 | .fa-blind:before { 2111 | content: "\f29d"; 2112 | } 2113 | .fa-audio-description:before { 2114 | content: "\f29e"; 2115 | } 2116 | .fa-volume-control-phone:before { 2117 | content: "\f2a0"; 2118 | } 2119 | .fa-braille:before { 2120 | content: "\f2a1"; 2121 | } 2122 | .fa-assistive-listening-systems:before { 2123 | content: "\f2a2"; 2124 | } 2125 | .fa-asl-interpreting:before, 2126 | .fa-american-sign-language-interpreting:before { 2127 | content: "\f2a3"; 2128 | } 2129 | .fa-deafness:before, 2130 | .fa-hard-of-hearing:before, 2131 | .fa-deaf:before { 2132 | content: "\f2a4"; 2133 | } 2134 | .fa-glide:before { 2135 | content: "\f2a5"; 2136 | } 2137 | .fa-glide-g:before { 2138 | content: "\f2a6"; 2139 | } 2140 | .fa-signing:before, 2141 | .fa-sign-language:before { 2142 | content: "\f2a7"; 2143 | } 2144 | .fa-low-vision:before { 2145 | content: "\f2a8"; 2146 | } 2147 | .fa-viadeo:before { 2148 | content: "\f2a9"; 2149 | } 2150 | .fa-viadeo-square:before { 2151 | content: "\f2aa"; 2152 | } 2153 | .fa-snapchat:before { 2154 | content: "\f2ab"; 2155 | } 2156 | .fa-snapchat-ghost:before { 2157 | content: "\f2ac"; 2158 | } 2159 | .fa-snapchat-square:before { 2160 | content: "\f2ad"; 2161 | } 2162 | .fa-pied-piper:before { 2163 | content: "\f2ae"; 2164 | } 2165 | .fa-first-order:before { 2166 | content: "\f2b0"; 2167 | } 2168 | .fa-yoast:before { 2169 | content: "\f2b1"; 2170 | } 2171 | .fa-themeisle:before { 2172 | content: "\f2b2"; 2173 | } 2174 | .fa-google-plus-circle:before, 2175 | .fa-google-plus-official:before { 2176 | content: "\f2b3"; 2177 | } 2178 | .fa-fa:before, 2179 | .fa-font-awesome:before { 2180 | content: "\f2b4"; 2181 | } 2182 | .fa-handshake-o:before { 2183 | content: "\f2b5"; 2184 | } 2185 | .fa-envelope-open:before { 2186 | content: "\f2b6"; 2187 | } 2188 | .fa-envelope-open-o:before { 2189 | content: "\f2b7"; 2190 | } 2191 | .fa-linode:before { 2192 | content: "\f2b8"; 2193 | } 2194 | .fa-address-book:before { 2195 | content: "\f2b9"; 2196 | } 2197 | .fa-address-book-o:before { 2198 | content: "\f2ba"; 2199 | } 2200 | .fa-vcard:before, 2201 | .fa-address-card:before { 2202 | content: "\f2bb"; 2203 | } 2204 | .fa-vcard-o:before, 2205 | .fa-address-card-o:before { 2206 | content: "\f2bc"; 2207 | } 2208 | .fa-user-circle:before { 2209 | content: "\f2bd"; 2210 | } 2211 | .fa-user-circle-o:before { 2212 | content: "\f2be"; 2213 | } 2214 | .fa-user-o:before { 2215 | content: "\f2c0"; 2216 | } 2217 | .fa-id-badge:before { 2218 | content: "\f2c1"; 2219 | } 2220 | .fa-drivers-license:before, 2221 | .fa-id-card:before { 2222 | content: "\f2c2"; 2223 | } 2224 | .fa-drivers-license-o:before, 2225 | .fa-id-card-o:before { 2226 | content: "\f2c3"; 2227 | } 2228 | .fa-quora:before { 2229 | content: "\f2c4"; 2230 | } 2231 | .fa-free-code-camp:before { 2232 | content: "\f2c5"; 2233 | } 2234 | .fa-telegram:before { 2235 | content: "\f2c6"; 2236 | } 2237 | .fa-thermometer-4:before, 2238 | .fa-thermometer:before, 2239 | .fa-thermometer-full:before { 2240 | content: "\f2c7"; 2241 | } 2242 | .fa-thermometer-3:before, 2243 | .fa-thermometer-three-quarters:before { 2244 | content: "\f2c8"; 2245 | } 2246 | .fa-thermometer-2:before, 2247 | .fa-thermometer-half:before { 2248 | content: "\f2c9"; 2249 | } 2250 | .fa-thermometer-1:before, 2251 | .fa-thermometer-quarter:before { 2252 | content: "\f2ca"; 2253 | } 2254 | .fa-thermometer-0:before, 2255 | .fa-thermometer-empty:before { 2256 | content: "\f2cb"; 2257 | } 2258 | .fa-shower:before { 2259 | content: "\f2cc"; 2260 | } 2261 | .fa-bathtub:before, 2262 | .fa-s15:before, 2263 | .fa-bath:before { 2264 | content: "\f2cd"; 2265 | } 2266 | .fa-podcast:before { 2267 | content: "\f2ce"; 2268 | } 2269 | .fa-window-maximize:before { 2270 | content: "\f2d0"; 2271 | } 2272 | .fa-window-minimize:before { 2273 | content: "\f2d1"; 2274 | } 2275 | .fa-window-restore:before { 2276 | content: "\f2d2"; 2277 | } 2278 | .fa-times-rectangle:before, 2279 | .fa-window-close:before { 2280 | content: "\f2d3"; 2281 | } 2282 | .fa-times-rectangle-o:before, 2283 | .fa-window-close-o:before { 2284 | content: "\f2d4"; 2285 | } 2286 | .fa-bandcamp:before { 2287 | content: "\f2d5"; 2288 | } 2289 | .fa-grav:before { 2290 | content: "\f2d6"; 2291 | } 2292 | .fa-etsy:before { 2293 | content: "\f2d7"; 2294 | } 2295 | .fa-imdb:before { 2296 | content: "\f2d8"; 2297 | } 2298 | .fa-ravelry:before { 2299 | content: "\f2d9"; 2300 | } 2301 | .fa-eercast:before { 2302 | content: "\f2da"; 2303 | } 2304 | .fa-microchip:before { 2305 | content: "\f2db"; 2306 | } 2307 | .fa-snowflake-o:before { 2308 | content: "\f2dc"; 2309 | } 2310 | .fa-superpowers:before { 2311 | content: "\f2dd"; 2312 | } 2313 | .fa-wpexplorer:before { 2314 | content: "\f2de"; 2315 | } 2316 | .fa-meetup:before { 2317 | content: "\f2e0"; 2318 | } 2319 | .sr-only { 2320 | position: absolute; 2321 | width: 1px; 2322 | height: 1px; 2323 | padding: 0; 2324 | margin: -1px; 2325 | overflow: hidden; 2326 | clip: rect(0, 0, 0, 0); 2327 | border: 0; 2328 | } 2329 | .sr-only-focusable:active, 2330 | .sr-only-focusable:focus { 2331 | position: static; 2332 | width: auto; 2333 | height: auto; 2334 | margin: 0; 2335 | overflow: visible; 2336 | clip: auto; 2337 | } 2338 | -------------------------------------------------------------------------------- /public/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.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.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.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}.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}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.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{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-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{-ms-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-feed:before,.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-pp: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-resistance: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-y-combinator-square:before,.fa-yc-square:before,.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-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-intersex:before,.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-genderless:before{content:"\f22d"}.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"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} 5 | -------------------------------------------------------------------------------- /public/css/signin.css: -------------------------------------------------------------------------------- 1 | .full-screen-height { 2 | height: 100vh; 3 | } -------------------------------------------------------------------------------- /public/css/signup.css: -------------------------------------------------------------------------------- 1 | .full-screen-height { 2 | height: 100vh; 3 | } 4 | -------------------------------------------------------------------------------- /public/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /public/impulse/impulse2.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/impulse/impulse2.wav -------------------------------------------------------------------------------- /public/sample_tracks/dinosaur.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/dinosaur.mp3 -------------------------------------------------------------------------------- /public/sample_tracks/exhale.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/exhale.mp3 -------------------------------------------------------------------------------- /public/sample_tracks/hanulbaragi.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/hanulbaragi.mp3 -------------------------------------------------------------------------------- /public/sample_tracks/itsgonnarain.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/itsgonnarain.mp3 -------------------------------------------------------------------------------- /public/sample_tracks/shapeofyou.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/shapeofyou.mp3 -------------------------------------------------------------------------------- /public/sample_tracks/starcraft.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dansuh17/Web-Audio-Editor/7056e0a17a65bce34ae05242b2aee278ea7f8607/public/sample_tracks/starcraft.mp3 -------------------------------------------------------------------------------- /src/audiosource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Wrapper class for Web Audio API's AudioSourceNode. 3 | * Additional functionalities such as play, stop, pause are implemented. 4 | */ 5 | class AudioSourceWrapper { 6 | constructor(params) { 7 | this.id = params.trackIndex; 8 | this.audioCtx = params.audioCtx; 9 | this.buffer = params.buffer; 10 | this.source = params.source; 11 | this.cursorLayer = params.cursorLayer; 12 | this.startedAt = 0; 13 | this.pausedAt = 0; 14 | this.updatingCursor = false; 15 | this.isPlaying = false; 16 | this.destination = this.audioCtx.destination; 17 | this.filter = null; 18 | this.convolver = null; 19 | this.wetGain = null; 20 | this.reverbOn = false; 21 | 22 | // methods binding to this 23 | this.pause = this.pause.bind(this); 24 | this.updateCursor = this.updateCursor.bind(this); 25 | this.cut = this.cut.bind(this); 26 | this.paste = this.paste.bind(this); 27 | this.setPlayRate = this.setPlayRate.bind(this); 28 | this.fadeIn = this.fadeIn.bind(this); 29 | this.fadeOut = this.fadeOut.bind(this); 30 | this.applyReverb = this.applyReverb.bind(this); 31 | this.mixDryWet = this.mixDryWet.bind(this); 32 | this.connectSource = this.connectSource.bind(this); 33 | 34 | // create a gain node 35 | const gainNode = this.audioCtx.createGain(); 36 | gainNode.gain.value = 0.5; 37 | gainNode.connect(this.destination); 38 | this.gainNode = gainNode; 39 | 40 | // this is where the source should be connecting to 41 | this.sourceConnectPoint = this.gainNode; 42 | // this is where the filters should be connecting to 43 | this.filterConnectPoint = this.gainNode; 44 | } 45 | 46 | /** 47 | * Apply biquad filter to this audio track. 48 | * @param type {String} the type of this filter (ex. 'lowpass') 49 | * @param freq {Number} the frequency in Hz to apply the filter on 50 | * @param gain {Number} the gain 51 | */ 52 | applyBiquadFilter(type, freq, gain) { 53 | let biquadFilter; 54 | 55 | // retrieve the filter 56 | if (this.filter !== null) { 57 | biquadFilter = this.filter; 58 | } else { 59 | biquadFilter = this.audioCtx.createBiquadFilter(); 60 | } 61 | 62 | // define the filter 63 | biquadFilter.type = type; 64 | biquadFilter.frequency.value = freq; 65 | biquadFilter.gain.value = gain; 66 | 67 | // connect the filter into the pipeline 68 | if (this.filter === null) { 69 | this.filter = biquadFilter; 70 | biquadFilter.connect(this.filterConnectPoint); 71 | this.sourceConnectPoint = this.filter; 72 | } 73 | 74 | // apply the differences 75 | this.pause(); 76 | this.play(); 77 | } 78 | 79 | /** 80 | * Disconnects the filter from the destination, if filter already exists. 81 | */ 82 | disconnectFilter() { 83 | this.pause(); 84 | 85 | if (this.filter !== null) { 86 | this.filter.disconnect(); 87 | this.sourceConnectPoint = this.gainNode; 88 | 89 | this.disconnectSource(); 90 | this.connectSource(); 91 | 92 | this.filter = null; 93 | } 94 | 95 | // mark reverb availability to false 96 | this.reverbOn = false; 97 | 98 | this.play(); 99 | } 100 | 101 | /** 102 | * Sets the playback rate of this source. 103 | * @param rate {Number} desired playback rate 104 | */ 105 | setPlayRate(rate) { 106 | this.source.playbackRate.value = rate; 107 | } 108 | 109 | /** 110 | * Update the cursor's position according to current playback time. 111 | */ 112 | updateCursor() { 113 | this.cursorLayer.currentPosition = this.getCurrentTime(); 114 | this.cursorLayer.update(); 115 | 116 | window.requestAnimationFrame(this.updateCursor); 117 | } 118 | 119 | /** 120 | * Mix the dry and wet buses. 121 | * @param wetVal {Number} the value of wet track in range [0.0, 1.0] 122 | */ 123 | mixDryWet(wetVal = 0.0) { 124 | if (this.wetGain === null) { 125 | return; 126 | } 127 | 128 | this.wetGain.gain.value = wetVal; 129 | this.gainNode.gain.value = 1 - wetVal; // dry value 130 | } 131 | 132 | /** 133 | * Apply reverb to the track. 134 | * It uses an impulse response file taken from St. Patrick's Church, Patrington. 135 | * The wet/dry ration is fixed for demonstration purposes. 136 | */ 137 | applyReverb() { 138 | this.pause(); 139 | this.reverbOn = true; 140 | 141 | if (this.convolver === null) { 142 | // read in impulse file from the server 143 | fetch('/impulse') 144 | .then(res => res.arrayBuffer()) 145 | .then((buffer) => { 146 | this.audioCtx.decodeAudioData(buffer, (audioBuffer) => { 147 | const convolver = this.audioCtx.createConvolver(); 148 | const wetGain = this.audioCtx.createGain(); 149 | wetGain.gain.value = 0; 150 | 151 | convolver.buffer = audioBuffer; 152 | 153 | // connect the nodes 154 | convolver.connect(wetGain); 155 | wetGain.connect(this.destination); 156 | 157 | this.convolver = convolver; 158 | this.wetGain = wetGain; 159 | 160 | // mix the dry and wet 161 | this.mixDryWet(0.7); 162 | 163 | // let the apply change 164 | this.play(); 165 | }); 166 | }) 167 | .catch(err => alert(`Cannot load impulse response file. ${err}`)); 168 | } else { 169 | this.play(); 170 | } 171 | } 172 | 173 | /** 174 | * Connect the source to various nodes depending on availability. 175 | */ 176 | connectSource() { 177 | if (this.source !== null) { 178 | // connect to the connecting point 179 | this.source.connect(this.sourceConnectPoint); 180 | 181 | // connect also to the wet convolver pipe if it exists 182 | if (this.reverbOn && (this.convolver !== null)) { 183 | this.source.connect(this.convolver); 184 | this.convolver.connect(this.wetGain); 185 | this.wetGain.connect(this.destination); 186 | } 187 | } 188 | } 189 | 190 | /** 191 | * Play the source buffer. Web Audio API forces to create new AudioBufferSource 192 | * for every playback. Once it begins playing, it cannot be played again, 193 | * although stop() can be called multiple times. 194 | */ 195 | play() { 196 | if (this.isPlaying) { 197 | // the source is already playing 198 | return; 199 | } 200 | 201 | const newSource = this.audioCtx.createBufferSource(); 202 | newSource.buffer = this.buffer; 203 | this.source = newSource; 204 | 205 | // connect the source either directly to speaker or the filter 206 | this.connectSource(); 207 | 208 | // start from paused position (which will be 0 if newly created) 209 | this.source.start(0, this.pausedAt); 210 | this.startedAt = this.audioCtx.currentTime - this.pausedAt; 211 | this.pausedAt = 0; 212 | this.isPlaying = true; 213 | 214 | // start updating playback cursor if it has not started yet 215 | if (!this.updatingCursor) { 216 | this.updateCursor(); 217 | this.updatingCursor = true; 218 | } 219 | } 220 | 221 | /** 222 | * Disconnects the source from whatever it is connected to. 223 | */ 224 | disconnectSource() { 225 | if (this.source) { 226 | this.source.disconnect(); 227 | } 228 | } 229 | 230 | /** 231 | * Fades in - the track's 10% will be faded in with linear increase in amplitude. 232 | */ 233 | fadeIn() { 234 | // stop before modifying waveforms 235 | this.stop(); 236 | 237 | const buffer = this.buffer; 238 | const originalFrames = buffer.length; 239 | const numChannels = buffer.numberOfChannels; 240 | const sampleRate = this.audioCtx.sampleRate; 241 | 242 | const fadeEndFrame = Math.floor(originalFrames / 10); 243 | 244 | const newBuffer = this.audioCtx.createBuffer(numChannels, originalFrames, sampleRate); 245 | for (let channel = 0; channel < numChannels; channel++) { 246 | const oldBufferChannelData = buffer.getChannelData(channel); 247 | const nowBuffer = newBuffer.getChannelData(channel); 248 | 249 | for (let i = 0; i < originalFrames; i++) { 250 | if (i < fadeEndFrame) { 251 | nowBuffer[i] = oldBufferChannelData[i] * (i / fadeEndFrame); // linear fade in 252 | } else { 253 | nowBuffer[i] = oldBufferChannelData[i]; 254 | } 255 | } 256 | } 257 | 258 | this.buffer = newBuffer; 259 | return newBuffer; 260 | } 261 | 262 | /** 263 | * Fades out - the track's last 10% will be fading out. 264 | */ 265 | fadeOut() { 266 | // stop before modifying waveforms 267 | this.stop(); 268 | 269 | const buffer = this.buffer; 270 | const originalFrames = buffer.length; 271 | const numChannels = buffer.numberOfChannels; 272 | const sampleRate = this.audioCtx.sampleRate; 273 | 274 | const fadeStartFrame = Math.floor(originalFrames * 0.9); 275 | const fadeDurationFrame = originalFrames - fadeStartFrame; 276 | 277 | const newBuffer = this.audioCtx.createBuffer(numChannels, originalFrames, sampleRate); 278 | for (let channel = 0; channel < numChannels; channel++) { 279 | const oldBufferChannelData = buffer.getChannelData(channel); 280 | const nowBuffer = newBuffer.getChannelData(channel); 281 | 282 | for (let i = 0; i < originalFrames; i++) { 283 | if (i >= fadeStartFrame) { 284 | const elapsedAfterFade = i - fadeStartFrame; 285 | nowBuffer[i] = oldBufferChannelData[i] 286 | * ((fadeDurationFrame - elapsedAfterFade) / fadeDurationFrame); // linear fade in 287 | } else { 288 | nowBuffer[i] = oldBufferChannelData[i]; 289 | } 290 | } 291 | } 292 | 293 | this.buffer = newBuffer; 294 | return newBuffer; 295 | } 296 | 297 | /** 298 | * Cut out portion of the buffer specified by 'data.' 299 | * @param data contains information about the segment 300 | * @returns {{newBuffer: *, cutBuffer: *}} the new audio buffer 301 | */ 302 | cut(data) { 303 | // stop before modifying waveforms 304 | this.stop(); 305 | 306 | // cut out the selected data! 307 | const start = data.start; // in seconds! 308 | const duration = data.duration; 309 | 310 | const buffer = this.buffer; 311 | const originalFrames = buffer.length; 312 | const numChannels = this.buffer.numberOfChannels; 313 | 314 | // calculate buffer info 315 | const sampleRate = this.audioCtx.sampleRate; 316 | const startFrame = Math.floor(start * sampleRate); 317 | const durationInFrames = Math.floor(duration * sampleRate); 318 | const endFrame = startFrame + durationInFrames; 319 | const afterFrameCount = Math.floor(originalFrames - durationInFrames); 320 | 321 | const newBuffer = this.audioCtx.createBuffer(numChannels, afterFrameCount, sampleRate); 322 | const cutBuffer = this.audioCtx.createBuffer(numChannels, durationInFrames, sampleRate); 323 | 324 | // copy contents into the new buffer 325 | for (let channel = 0; channel < numChannels; channel++) { 326 | const oldBufferChannelData = buffer.getChannelData(channel); 327 | const nowBuffer = newBuffer.getChannelData(channel); 328 | const cutBufferChannelData = cutBuffer.getChannelData(channel); 329 | 330 | for (let i = 0; i < originalFrames; i++) { 331 | if (i < startFrame) { 332 | nowBuffer[i] = oldBufferChannelData[i]; 333 | } else if (i >= startFrame && i < endFrame) { 334 | cutBufferChannelData[i - startFrame] = oldBufferChannelData[i]; // save the cut-out data 335 | } else { 336 | nowBuffer[i - durationInFrames] = oldBufferChannelData[i]; 337 | } 338 | } 339 | } 340 | 341 | // allocate new buffer 342 | this.buffer = newBuffer; 343 | return { 344 | newBuffer, 345 | cutBuffer, 346 | }; 347 | } 348 | 349 | /** 350 | * Paste the cutout buffer on current position (start of selection segment). 351 | * @param data selected segment data 352 | * @returns {AudioBuffer} the new audio buffer result 353 | */ 354 | paste(data, cutBuffer) { 355 | this.stop(); // stop before modifying the source node 356 | 357 | if (cutBuffer === null) { 358 | return null; // if nothing is cut and stored before, do nothing. 359 | } 360 | 361 | const start = data.start; 362 | const buffer = this.buffer; 363 | const originalFrames = buffer.length; 364 | const numChannels = this.buffer.numberOfChannels; 365 | const sampleRate = this.audioCtx.sampleRate; 366 | const cutBufferFrames = cutBuffer.length; 367 | 368 | const startFrame = Math.floor(start * sampleRate); 369 | const pasteEndFrame = Math.floor(startFrame + cutBufferFrames); 370 | const afterFrames = originalFrames + cutBufferFrames; 371 | 372 | const newBuffer = this.audioCtx.createBuffer(numChannels, afterFrames, sampleRate); 373 | 374 | for (let channel = 0; channel < numChannels; channel++) { 375 | const oldBufferChannelData = buffer.getChannelData(channel); 376 | const nowBuffer = newBuffer.getChannelData(channel); 377 | const cutBufferChannelData = cutBuffer.getChannelData(channel); 378 | 379 | for (let i = 0; i < afterFrames; i++) { 380 | if (i < startFrame) { 381 | nowBuffer[i] = oldBufferChannelData[i]; 382 | } else if (i >= startFrame && i < pasteEndFrame) { 383 | nowBuffer[i] = cutBufferChannelData[i - startFrame]; // this is the part where we paste 384 | } else { 385 | nowBuffer[i] = oldBufferChannelData[i - cutBufferFrames]; 386 | } 387 | } 388 | } 389 | 390 | // allocate the new buffer 391 | this.buffer = newBuffer; 392 | return newBuffer; 393 | } 394 | 395 | /** 396 | * Sets the volume of the gain node. 397 | * @param volume {Number} the desired volume [0, 100] 398 | */ 399 | setVolume(volume) { 400 | this.gainNode.gain.value = volume / 100; 401 | } 402 | 403 | /** 404 | * Copied the selected segment. 405 | * @param data selected segment data 406 | * @returns {AudioBuffer} 407 | */ 408 | copy(data) { 409 | // stop before modifying 410 | this.stop(); 411 | 412 | // cut out the selected data! 413 | const start = data.start; 414 | const duration = data.duration; 415 | 416 | const buffer = this.buffer; 417 | const numChannels = this.buffer.numberOfChannels; 418 | const sampleRate = this.audioCtx.sampleRate; 419 | 420 | // calculate buffer info 421 | const startFrame = Math.floor(start * sampleRate); 422 | const durationInFrames = Math.floor(duration * sampleRate); 423 | const endFrame = startFrame + durationInFrames; 424 | 425 | const copiedBuffer = this.audioCtx.createBuffer(numChannels, durationInFrames, sampleRate); 426 | 427 | // copy contents into the new buffer 428 | for (let channel = 0; channel < numChannels; channel++) { 429 | const oldBufferChannelData = buffer.getChannelData(channel); 430 | const copiedBufferChannelData = copiedBuffer.getChannelData(channel); 431 | 432 | for (let i = startFrame; i < endFrame; i++) { 433 | copiedBufferChannelData[i - startFrame] = oldBufferChannelData[i]; 434 | } 435 | } 436 | 437 | // allocate new buffer 438 | return copiedBuffer; 439 | } 440 | 441 | /** 442 | * Leave the selection and discard everywhere else. 443 | * @param data selected segment data 444 | * @returns {AudioBuffer} the new audio buffer created 445 | */ 446 | leave(data) { 447 | this.stop(); // stop before modifying the source node 448 | 449 | // cut out the selected data! 450 | const start = data.start; // in seconds! 451 | const duration = data.duration; 452 | 453 | const buffer = this.buffer; 454 | const numChannels = this.buffer.numberOfChannels; 455 | 456 | // calculate buffer info 457 | const sampleRate = this.audioCtx.sampleRate; 458 | const startFrame = Math.floor(start * sampleRate); 459 | const durationInFrames = Math.floor(duration * sampleRate); 460 | 461 | const newBuffer = this.audioCtx.createBuffer(numChannels, durationInFrames, sampleRate); 462 | 463 | // copy contents into the new buffer 464 | for (let channel = 0; channel < numChannels; channel++) { 465 | const oldBufferChannelData = buffer.getChannelData(channel); 466 | const nowBuffer = newBuffer.getChannelData(channel); 467 | 468 | for (let i = startFrame; i < durationInFrames + startFrame; i++) { 469 | nowBuffer[i - startFrame] = oldBufferChannelData[i]; 470 | } 471 | } 472 | 473 | // allocate new buffer 474 | this.buffer = newBuffer; 475 | return newBuffer; 476 | } 477 | 478 | /** 479 | * Stop the source from playing and retreat the cursor to 0. 480 | */ 481 | stop() { 482 | this.disconnectSource(); 483 | 484 | if (this.source) { 485 | this.source.stop(); 486 | this.source = null; 487 | } 488 | 489 | this.pausedAt = 0; 490 | this.startedAt = 0; 491 | this.isPlaying = false; 492 | } 493 | 494 | /** 495 | * Pause the source. 496 | */ 497 | pause() { 498 | let elapsed = this.audioCtx.currentTime - this.startedAt; 499 | const buffer = this.buffer; 500 | const numFrames = buffer.length; 501 | 502 | if ((numFrames / this.audioCtx.sampleRate) < elapsed) { 503 | elapsed = 0; 504 | } 505 | 506 | this.stop(); 507 | this.pausedAt = elapsed; 508 | } 509 | 510 | /** 511 | * Returns the current playback time 512 | * @returns {Number} current time 513 | */ 514 | getCurrentTime() { 515 | if (this.pausedAt !== 0) { 516 | return this.pausedAt; 517 | } else if (this.startedAt !== 0 || this.isPlaying) { 518 | return this.audioCtx.currentTime - this.startedAt; 519 | } 520 | return 0; 521 | } 522 | } 523 | 524 | export default AudioSourceWrapper; 525 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import '../index.html'; // required for hot-loading for changes in index.html 2 | 3 | /* eslint-disable */ 4 | import Tracks from 'tracks'; 5 | import Toolbox from 'toolbox'; 6 | import SampleTrackLoader from 'sampletracks'; 7 | import cookieParser from 'cookie'; 8 | import Library from 'library'; 9 | /*eslint-enable */ 10 | 11 | // TODO: what does Symbol.iterator do??? 12 | // setup for using for-of loop for queried dom elements 13 | NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; 14 | HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; 15 | 16 | // parse cookie and modify the page accordingly 17 | const cookies = cookieParser.parse(document.cookie); 18 | if (cookies.name !== 'undefined') { 19 | const signinNav = document.getElementById('signin-nav-item'); 20 | signinNav.innerHTML = cookies.name; 21 | signinNav.href = '/'; 22 | const signupNav = document.getElementById('signup-nav-item'); 23 | signupNav.innerHTML = 'Logout'; 24 | signupNav.href = '/logout'; // this will directly call logout api to the server 25 | } 26 | 27 | const container = document.getElementById('track-container'); 28 | const tracks = new Tracks(container); 29 | const toolbox = new Toolbox(container, tracks); // eslint-disable-line no-unused-vars 30 | const library = new Library(tracks); 31 | library.createModalElem(); 32 | const sampleTrackLoader = new SampleTrackLoader(tracks); // eslint-disable-line no-unused-vars 33 | -------------------------------------------------------------------------------- /src/library.js: -------------------------------------------------------------------------------- 1 | import cookieParser from 'cookie'; 2 | 3 | 4 | /** 5 | * User-defined library. 6 | * The user can store their own audio files up on the server. 7 | */ 8 | class Library { 9 | constructor(tracks) { 10 | // function binding 11 | this.checkAndDisable = this.checkAndDisable.bind(this); 12 | this.getLibraryInfo = this.getLibraryInfo.bind(this); 13 | this.onShown = this.onShown.bind(this); 14 | 15 | this.tracks = tracks; // Tracks instance 16 | this.username = null; 17 | this.libraryList = null; 18 | 19 | this.libraryNavBtn = document.getElementById('library-nav-item'); 20 | this.checkAndDisable(); 21 | this.getLibraryInfo(); 22 | } 23 | 24 | /** 25 | * Check the login status and make the button disabled when not logged in. 26 | */ 27 | checkAndDisable() { 28 | const cookies = cookieParser.parse(document.cookie); 29 | if (cookies.name === 'undefined') { 30 | this.username = null; 31 | this.libraryNavBtn.classList.add('disabled'); 32 | } else { 33 | this.username = cookies.username; 34 | this.libraryNavBtn.classList.remove('disabled'); 35 | } 36 | } 37 | 38 | /** 39 | * Obtain library information from the database. 40 | */ 41 | getLibraryInfo() { 42 | if (this.username === null) { 43 | return; 44 | } 45 | 46 | // obtain library information from the database 47 | fetch(`/library/${this.username}`).then(res => res.json()).then((jsonData) => { 48 | this.libraryList = jsonData; // set it a variable 49 | }).catch((err) => { 50 | alert(err); 51 | }); 52 | } 53 | 54 | /** 55 | * Attach the library information in the modal. 56 | */ 57 | onShown() { 58 | this.getLibraryInfo(); 59 | const listgroup = document.getElementById('library-modal-listgroup'); 60 | 61 | // much faster than setting an empty innerHTML 62 | // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript 63 | while (listgroup.firstChild) { 64 | listgroup.removeChild(listgroup.firstChild); 65 | } 66 | 67 | this.libraryList.forEach((audioObj) => { 68 | const listElemString = ` 69 | `; 73 | 74 | // actually attach the element to the list 75 | listgroup.insertAdjacentHTML('beforeend', listElemString); 76 | 77 | // attach an event listener 78 | listgroup.lastChild.addEventListener('click', (event) => { 79 | const url = event.target.dataset.url; 80 | const uriUrl = encodeURIComponent(url); 81 | 82 | fetch(`/useraudio/${this.username}/${uriUrl}`).then(res => res.arrayBuffer()).then((arraybuffer) => { 83 | this.tracks.createTrackForBuffer(arraybuffer); 84 | }).catch((err) => { 85 | console.error(`Failed to load : ${audioObj.audiotitle}`); 86 | console.error(err); 87 | }); 88 | }, false); 89 | }); 90 | } 91 | 92 | /** 93 | * Append modal code to index. 94 | */ 95 | createModalElem() { 96 | // the modal element string 97 | const elem = 98 | ``; 125 | 126 | const modalContainer = document.getElementById('modal'); 127 | modalContainer.insertAdjacentHTML('beforeend', elem); 128 | 129 | // when the modal is shown, display the elements in the library 130 | this.libraryNavBtn.addEventListener('click', this.onShown, false); 131 | } 132 | } 133 | 134 | export default Library; 135 | -------------------------------------------------------------------------------- /src/sampletracks.js: -------------------------------------------------------------------------------- 1 | class SampleTrackLoader { 2 | constructor(tracks) { 3 | this.attachListener = this.attachListener.bind(this); 4 | 5 | this.attachListener(); 6 | this.tracksInstance = tracks; 7 | } 8 | 9 | /** 10 | * Attach listener to 'Sample Track Loader' button to create new track on click. 11 | */ 12 | attachListener() { 13 | const sampleTrackItems = document.getElementsByClassName('sampletrack-item'); 14 | 15 | // Array.from() creates an array from array-like structure 16 | Array.from(sampleTrackItems).forEach((elem) => { 17 | elem.addEventListener('click', () => { 18 | const audioName = elem.dataset.value; 19 | this.createSampleTrack(audioName); 20 | }); 21 | }); 22 | } 23 | 24 | /** 25 | * Create a new track if user chooses to try a sample track. 26 | * @param audioName{string} the name of the audiofile to test 27 | */ 28 | createSampleTrack(audioName) { 29 | const url = `/audio/${audioName}`; 30 | 31 | // use fetch API to get a stream of audio file data for track creation 32 | fetch(url).then(res => res.arrayBuffer()).then((buffer) => { 33 | this.tracksInstance.createTrackForBuffer(buffer); 34 | }).catch((error) => { 35 | console.error(`Failed to load : ${url}`); 36 | console.error(error); 37 | }); 38 | } 39 | } 40 | 41 | export default SampleTrackLoader; 42 | -------------------------------------------------------------------------------- /src/signin.js: -------------------------------------------------------------------------------- 1 | (function signin() { 2 | const signinBtn = document.getElementById('signinform'); 3 | signinBtn.addEventListener('submit', (e) => { 4 | e.preventDefault(); // prevent default behavior for 'submit' action 5 | 6 | const username = document.getElementById('signin-userinput').value; 7 | const password = document.getElementById('signin-password').value; 8 | const bodyData = { username, password }; 9 | 10 | // options for request 11 | const fetchoption = { 12 | headers: { 13 | 'Content-Type': 'application/json', 14 | }, 15 | credentials: 'include', // REQUIRED to use session information!! 16 | method: 'post', 17 | body: JSON.stringify(bodyData), 18 | }; 19 | 20 | // make the request 21 | fetch('/post/signin', fetchoption).then((res) => { 22 | if (res.ok) { 23 | return res.json(); 24 | } 25 | throw res.statusMessage; // throw with a message 26 | }).then((data) => { 27 | // welcome the user and redirect 28 | alert(`Welcome, ${data.username}`); 29 | window.location = '/'; 30 | }).catch(() => { 31 | alert('Failed to login.'); 32 | }); 33 | }, false); 34 | }()); 35 | -------------------------------------------------------------------------------- /src/signup.js: -------------------------------------------------------------------------------- 1 | (function signup() { 2 | const signinBtn = document.getElementById('signupform'); 3 | signinBtn.addEventListener('submit', (e) => { 4 | e.preventDefault(); // prevent default behavior for 'submit' action 5 | 6 | const username = document.getElementById('signup-userinput').value; 7 | const password = document.getElementById('signup-password').value; 8 | const name = document.getElementById('signup-name').value; 9 | const bodyData = { username, password, name }; 10 | 11 | // options for request 12 | const fetchoption = { 13 | headers: { 14 | 'Content-Type': 'application/json', 15 | }, 16 | method: 'post', 17 | body: JSON.stringify(bodyData), 18 | }; 19 | 20 | // make the request 21 | fetch('/post/signup', fetchoption).then((res) => { 22 | if (res.ok) { 23 | return res.text(); 24 | } 25 | 26 | throw new function signupException(message) { 27 | this.message = message; 28 | this.name = 'Sign Up Error'; 29 | }('User already Exists!'); 30 | }).then(() => { 31 | // welcome the user and redirect 32 | alert(`Hello, ${name}`); 33 | window.location = '/'; 34 | }).catch(() => { 35 | alert('User already Exists!'); 36 | }); 37 | }, false); 38 | }()); 39 | -------------------------------------------------------------------------------- /src/toolbox.js: -------------------------------------------------------------------------------- 1 | class Toolbox { 2 | constructor(container, tracks) { 3 | this.container = container; 4 | this.tracks = tracks; 5 | this.id = 'add-track-btn'; 6 | 7 | // function binding 8 | this.createToolbox = this.createToolbox.bind(this); 9 | this.createToolbox(); 10 | } 11 | 12 | /** 13 | * Create a toolbox and append at the top of the webpage. 14 | * The toolbox provides various editing functionalities to the tracks. 15 | */ 16 | createToolbox() { 17 | const elemString = ` 18 |
19 |
20 |
21 | 22 |
23 | 26 | 39 |
40 | 41 | 42 |
43 | 46 | 49 | 52 | 55 | 58 | 61 | 64 | 67 |
68 |
69 | 72 | 75 | 78 | 81 | 84 | 87 |
88 | 89 | 90 |
91 | 94 | 97 |
98 |
99 |
100 | 101 |
102 | `; 103 | 104 | // add the toolbox of the web audio editor 105 | this.container.insertAdjacentHTML('beforeend', elemString); 106 | 107 | // if 'Add Track' button is pressed, create a new track. 108 | const addTrackBtn = document.getElementById(this.id); 109 | addTrackBtn.addEventListener('click', () => { 110 | this.tracks.createTrack(this.container); 111 | }, false); 112 | 113 | // enable mode toggling 114 | const modeSelectionRadio = document.getElementsByName('mode'); 115 | modeSelectionRadio.forEach((elem) => { 116 | elem.addEventListener('click', () => { 117 | modeSelectionRadio.forEach((childElem) => { 118 | if (childElem !== elem) { 119 | childElem.className = 'btn btn-secondary'; // eslint-disable-line no-param-reassign 120 | } else { 121 | // activate this button 122 | childElem.className = 'btn btn-primary'; // eslint-disable-line no-param-reassign 123 | } 124 | }); 125 | 126 | // send the Tracks instance the toggle signal 127 | this.tracks.toggleMode(); 128 | }, false); 129 | }); 130 | 131 | // add low pass filter listener 132 | const lpFilter = document.getElementById('lpf'); 133 | lpFilter.addEventListener('click', () => { 134 | this.tracks.applyBiquadFilter('lowpass', 1500, 0); 135 | }, false); 136 | 137 | const hpFilter = document.getElementById('hpf'); 138 | hpFilter.addEventListener('click', () => { 139 | this.tracks.applyBiquadFilter('highpass', 2000, 0); 140 | }, false); 141 | 142 | const noFilter = document.getElementById('nofilter'); 143 | noFilter.addEventListener('click', () => { 144 | this.tracks.disconnectFilter(); 145 | }, false); 146 | 147 | // play / stop / pause all buttons 148 | const playAllBtn = document.getElementById('playAllBtn'); 149 | playAllBtn.addEventListener('click', () => { 150 | this.tracks.playAll(); 151 | }); 152 | 153 | const stopAllBtn = document.getElementById('stopAllBtn'); 154 | stopAllBtn.addEventListener('click', () => { 155 | this.tracks.stopAll(); 156 | }); 157 | 158 | const pauseAllBtn = document.getElementById('pauseAllBtn'); 159 | pauseAllBtn.addEventListener('click', () => { 160 | this.tracks.pauseAll(); 161 | }); 162 | 163 | // cut selection 164 | const cutBtn = document.getElementById('cutBtn'); 165 | cutBtn.addEventListener('click', () => { 166 | this.tracks.cutSelection(); 167 | }); 168 | 169 | // leave selection 170 | const leaveBtn = document.getElementById('leaveBtn'); 171 | leaveBtn.addEventListener('click', () => { 172 | this.tracks.leaveSelection(); 173 | }); 174 | 175 | const pasteBtn = document.getElementById('pasteBtn'); 176 | pasteBtn.addEventListener('click', () => { 177 | this.tracks.paste(); 178 | }); 179 | 180 | const copyBtn = document.getElementById('copyBtn'); 181 | copyBtn.addEventListener('click', () => { 182 | this.tracks.copySelection(); 183 | }); 184 | 185 | const fadeInBtn = document.getElementById('fadeInBtn'); 186 | fadeInBtn.addEventListener('click', () => { 187 | this.tracks.fadeIn(); 188 | }); 189 | 190 | const fadeOutBtn = document.getElementById('fadeOutBtn'); 191 | fadeOutBtn.addEventListener('click', () => { 192 | this.tracks.fadeOut(); 193 | }); 194 | 195 | const reverbBtn = document.getElementById('reverb'); 196 | reverbBtn.addEventListener('click', () => { 197 | this.tracks.applyReverb(); 198 | }); 199 | } 200 | } 201 | 202 | export default Toolbox; 203 | -------------------------------------------------------------------------------- /src/tracks.js: -------------------------------------------------------------------------------- 1 | import wavesUI from 'waves-ui'; 2 | import AudioSourceWrapper from 'audiosource'; 3 | import cookieParser from 'cookie'; 4 | 5 | 6 | class Tracks { 7 | /** 8 | * Tracks constructor. 9 | * @param container the container DOM object 10 | */ 11 | constructor(container) { 12 | // function bindings 13 | this.readSingleFile = this.readSingleFile.bind(this); 14 | this.increaseTrackNum = this.increaseTrackNum.bind(this); 15 | this.decreaseTrackNum = this.decreaseTrackNum.bind(this); 16 | this.renderWave = this.renderWave.bind(this); 17 | this.play = this.play.bind(this); 18 | this.stop = this.stop.bind(this); 19 | this.pause = this.pause.bind(this); 20 | this.changeVolume = this.changeVolume.bind(this); 21 | this.changePlayRate = this.changePlayRate.bind(this); 22 | this.downloadFile = this.downloadFile.bind(this); 23 | this.uploadFile = this.uploadFile.bind(this); 24 | this.applyBiquadFilter = this.applyBiquadFilter.bind(this); 25 | this.applyReverb = this.applyReverb.bind(this); 26 | Tracks.setModeForTimeline = Tracks.setModeForTimeline.bind(this); 27 | 28 | this.trackIndex = 0; 29 | this.container = container; 30 | this.tracks = {}; 31 | this.mode = 'zoom'; 32 | this.currentTrackId = 0; 33 | this.cutBuffer = null; 34 | 35 | try { 36 | // create audio context - later will desireably become global singleton 37 | const AudioContext = window.AudioContext || window.webkitAudioContext; 38 | this.audioCtx = new AudioContext(); 39 | } catch (e) { 40 | alert('This browser does not support Web Audio API!'); 41 | } 42 | } 43 | 44 | /** 45 | * Toggle between zoom and selection modes. 46 | */ 47 | toggleMode() { 48 | this.mode = (this.mode === 'zoom') ? 'selection' : 'zoom'; 49 | 50 | Object.keys(this.tracks).forEach((trackId) => { 51 | const timeline = this.tracks[trackId].timeline; 52 | Tracks.setModeForTimeline(timeline, this.mode); 53 | }); 54 | } 55 | 56 | /** 57 | * Given the timeline instance, set the view state according to the mode. 58 | * @param timeline {Timeline} the track's timeline 59 | * @param mode {String} the mode string 60 | */ 61 | static setModeForTimeline(timeline, mode) { 62 | if (mode === 'zoom') { 63 | // eslint-disable-next-line no-param-reassign 64 | timeline.state = new wavesUI.states.CenteredZoomState(timeline); 65 | } else if (mode === 'selection') { 66 | // eslint-disable-next-line no-param-reassign 67 | timeline.state = new wavesUI.states.SimpleEditionState(timeline); 68 | } else { 69 | throw new function InvalidTrackMode(message) { 70 | this.message = message; 71 | this.name = 'Invalid Track Mode Exception'; 72 | }('Invalid Mode for Tracks'); 73 | } 74 | } 75 | 76 | /** 77 | * Retrieves the data of selected segment of the track. 78 | * Contains duration and start time. 79 | * 80 | * @param trackid track ID 81 | * @returns {Object} data for the segment 82 | */ 83 | getSegmentData(trackid) { 84 | const segmentLayer = this.tracks[trackid].segmentLayer; 85 | const segment = segmentLayer.items[0]; 86 | 87 | return segmentLayer.getDatumFromItem(segment); 88 | } 89 | 90 | applyBiquadFilter(type, freq, gain) { 91 | const id = this.currentTrackId; 92 | this.tracks[id].audioSource.applyBiquadFilter(type, freq, gain); 93 | } 94 | 95 | fadeIn() { 96 | const id = this.currentTrackId; 97 | const newAudioBuffer = this.tracks[id].audioSource.fadeIn(); 98 | this.eraseWave(id); 99 | this.renderWave(newAudioBuffer, this.audioCtx, id); 100 | } 101 | 102 | fadeOut() { 103 | const id = this.currentTrackId; 104 | const newAudioBuffer = this.tracks[id].audioSource.fadeOut(); 105 | this.eraseWave(id); 106 | this.renderWave(newAudioBuffer, this.audioCtx, id); 107 | } 108 | 109 | disconnectFilter() { 110 | const id = this.currentTrackId; 111 | this.tracks[id].audioSource.disconnectFilter(); 112 | } 113 | 114 | /** 115 | * Create a new track. Append to the container. 116 | * 117 | * @param container container DOM obj 118 | */ 119 | createTrack(container) { 120 | const trackId = this.trackIndex; 121 | const elemString = ` 122 |
124 |
125 |
126 | 130 | 134 | 138 | 142 | 146 |
147 |
148 |
149 |
150 |
151 |
152 | 155 |
156 |

volume

157 |
158 |
159 |
160 | 163 |
164 |

playrate

165 |
166 |
167 | 168 | 170 | 174 |
175 |
177 | 178 |
179 |
180 | `; 181 | 182 | // indicate which track the user is now selecting 183 | 184 | container.insertAdjacentHTML('beforeend', elemString); 185 | const createdTrack = document.getElementById(`trackbox${trackId}`); 186 | // indicate which track the user is now selecting 187 | createdTrack.addEventListener('click', () => { 188 | this.currentTrackId = trackId; 189 | }); 190 | 191 | // maintain the data as Tracks variable 192 | this.tracks[trackId] = { trackelem: createdTrack }; 193 | 194 | const fileInput = document.getElementById(`fileinput${trackId}`); 195 | // add listener to the file input button 196 | fileInput.addEventListener('change', this.readSingleFile, false); 197 | 198 | // define play button 199 | const playButton = document.getElementById(`play${trackId}`); 200 | playButton.addEventListener('click', this.play, false); 201 | 202 | // define stop button 203 | const stopButton = document.getElementById(`stop${trackId}`); 204 | stopButton.addEventListener('click', this.stop, false); 205 | 206 | // define pause button 207 | const pauseButton = document.getElementById(`pause${trackId}`); 208 | pauseButton.addEventListener('click', this.pause, false); 209 | 210 | const downloadFileBtn = document.getElementById(`download${trackId}`); 211 | downloadFileBtn.addEventListener('click', this.downloadFile, false); 212 | 213 | const uploadFileBtn = document.getElementById(`upload${trackId}`); 214 | uploadFileBtn.addEventListener('click', this.uploadFile, false); 215 | 216 | const volumeSlider = document.getElementById(`volumeSlider${trackId}`); 217 | volumeSlider.addEventListener('change', this.changeVolume, false); 218 | 219 | const speedSlider = document.getElementById(`playRate${trackId}`); 220 | speedSlider.addEventListener('change', this.changePlayRate, false); 221 | 222 | // increase track number 223 | this.increaseTrackNum(); 224 | 225 | return trackId; 226 | } 227 | 228 | changePlayRate(e) { 229 | const id = e.target.dataset.trackid; 230 | const rate = e.target.value; 231 | 232 | this.tracks[id].audioSource.setPlayRate(rate); 233 | } 234 | 235 | /** 236 | * Change the volume of the track. 237 | * @param e event node 238 | */ 239 | changeVolume(e) { 240 | const id = e.target.dataset.trackid; 241 | const volume = e.target.value; 242 | 243 | this.tracks[id].audioSource.setVolume(volume); 244 | } 245 | 246 | /** 247 | * Upload a file loaded on the track. 248 | * @param e event node 249 | */ 250 | uploadFile(e) { 251 | const id = e.target.dataset.trackid; 252 | const file = this.tracks[id].file; 253 | 254 | // check the cookies to see if the user is logged in 255 | const cookies = cookieParser.parse(document.cookie); 256 | if (cookies.name === 'undefined') { 257 | alert('You must login before you can upload files.'); 258 | return; 259 | } 260 | 261 | // check for file existence 262 | if (file === undefined || file === null) { 263 | alert('Cannot upload file'); 264 | return; 265 | } 266 | 267 | const data = new FormData(); 268 | const filename = window.prompt('Please give a name to the file'); 269 | if (filename === null || filename === undefined) { 270 | return; 271 | } 272 | data.append('file', file, filename); // provide the filename 273 | data.append('user', cookies.name); // send the user name also 274 | data.append('username', cookies.username); 275 | 276 | const fetchOptions = { 277 | // no need to set headers for using formidable. 278 | // https://stackoverflow.com/questions/6884382/node-js-formidable-upload-with-xhr 279 | credentials: 'include', 280 | method: 'post', 281 | body: data, 282 | }; 283 | 284 | fetch('/upload', fetchOptions).then((res) => { 285 | if (res.ok) { 286 | alert(`Upload successful: ${filename}`); 287 | } else { 288 | throw res.statusMessage; 289 | } 290 | }).catch((err) => { 291 | console.err(err); 292 | alert(err); 293 | }); 294 | } 295 | 296 | /** 297 | * Trigger file download. 298 | * @param e event node 299 | */ 300 | downloadFile(e) { 301 | const id = e.target.dataset.trackid; 302 | // TODO: download file that the user made changes to! 303 | const file = this.tracks[id].file; 304 | 305 | if (file === undefined || file === null) { 306 | alert('Cannot download file.'); 307 | return; 308 | } 309 | 310 | const pom = document.createElement('a'); 311 | pom.setAttribute('href', URL.createObjectURL(file)); 312 | pom.setAttribute('download', 'sample.mp3'); 313 | 314 | // create and attach a click event to the element created - automatically start download 315 | if (document.createEvent) { 316 | const event = document.createEvent('MouseEvents'); 317 | event.initEvent('click', true, true); 318 | pom.dispatchEvent(event); 319 | } else { 320 | pom.click(); 321 | } 322 | } 323 | 324 | /** 325 | * Cuts out the selected region. 326 | */ 327 | cutSelection() { 328 | const id = this.currentTrackId; 329 | const segmentData = this.getSegmentData(id); 330 | const result = this.tracks[id].audioSource.cut(segmentData); 331 | this.cutBuffer = result.cutBuffer; 332 | 333 | this.eraseWave(id); 334 | this.renderWave(result.newBuffer, this.audioCtx, id); // draw the track waveform again 335 | } 336 | 337 | /** 338 | * Leaves the selection and cut out everything else. 339 | */ 340 | leaveSelection() { 341 | const id = this.currentTrackId; 342 | const segmentData = this.getSegmentData(id); 343 | const newAudioBuffer = this.tracks[id].audioSource.leave(segmentData); 344 | this.eraseWave(id); 345 | this.renderWave(newAudioBuffer, this.audioCtx, id); 346 | } 347 | 348 | /** 349 | * Copies the selection and save to variable. 350 | */ 351 | copySelection() { 352 | const id = this.currentTrackId; 353 | const segmentData = this.getSegmentData(id); 354 | this.cutBuffer = this.tracks[id].audioSource.copy(segmentData); 355 | } 356 | 357 | /** 358 | * Apply reverb to the track. 359 | */ 360 | applyReverb() { 361 | const id = this.currentTrackId; 362 | this.tracks[id].audioSource.applyReverb(); 363 | } 364 | 365 | /** 366 | * Paste the cutout buffer to the current selection. 367 | */ 368 | paste() { 369 | if (!this.cutBuffer) { 370 | return; 371 | } 372 | 373 | const id = this.currentTrackId; 374 | const segmentData = this.getSegmentData(id); 375 | const newBuffer = this.tracks[id].audioSource.paste(segmentData, this.cutBuffer); 376 | 377 | if (newBuffer !== null) { 378 | this.eraseWave(id); 379 | this.renderWave(newBuffer, this.audioCtx, id); 380 | } 381 | } 382 | 383 | /** 384 | * Increase track number. 385 | */ 386 | increaseTrackNum() { 387 | this.trackIndex++; 388 | } 389 | 390 | /** 391 | * Increase track number. 392 | */ 393 | decreaseTrackNum() { 394 | this.trackIndex--; 395 | } 396 | 397 | /** 398 | * Reads a file when the user uploads an audio file. Then triggers to draw the viz. 399 | * @param e event 400 | */ 401 | readSingleFile(e) { 402 | const file = e.target.files[0]; 403 | const id = e.target.dataset.trackid; // obtain track id 404 | if (!file) { 405 | return; 406 | } 407 | 408 | // store the URL 409 | this.tracks[id].fileUrl = URL.createObjectURL(file); 410 | this.tracks[id].file = file; 411 | const reader = new FileReader(); 412 | 413 | // when the load is complete, draw the id 414 | reader.onload = (loadEvent) => { 415 | const contents = loadEvent.target.result; 416 | this.drawWave(contents, this.audioCtx, id); 417 | }; 418 | 419 | reader.readAsArrayBuffer(file); 420 | } 421 | 422 | /** 423 | * Create a new track provided a buffer. 424 | */ 425 | createTrackForBuffer(arrayBuffer) { 426 | const trackId = this.createTrack(this.container); 427 | this.drawWave(arrayBuffer, this.audioCtx, trackId); 428 | } 429 | 430 | stopAll() { 431 | Object.keys(this.tracks).forEach((trackId) => { 432 | this.tracks[trackId].audioSource.stop(); 433 | }); 434 | } 435 | 436 | pauseAll() { 437 | Object.keys(this.tracks).forEach((trackId) => { 438 | this.tracks[trackId].audioSource.pause(); 439 | }); 440 | } 441 | 442 | playAll() { 443 | Object.keys(this.tracks).forEach((trackId) => { 444 | this.tracks[trackId].audioSource.play(); 445 | }); 446 | } 447 | 448 | /** 449 | * Wrapper method for AudioSourceWrapper's stop() 450 | * @param e event node 451 | */ 452 | stop(e) { 453 | const id = e.target.dataset.trackid; 454 | this.tracks[id].audioSource.stop(); 455 | } 456 | 457 | /** 458 | * Wrapper method for AudioSourceWrapper's pause() 459 | * @param e event node 460 | */ 461 | pause(e) { 462 | const id = e.target.dataset.trackid; 463 | this.tracks[id].audioSource.pause(); 464 | } 465 | 466 | /** 467 | * Plays the track. Wrapper method for AudioSourceWrapper's play() 468 | * @param e event node 469 | */ 470 | play(e) { 471 | const id = e.target.dataset.trackid; 472 | this.tracks[id].audioSource.play(); 473 | } 474 | 475 | /** 476 | * Drawing part of creating a new wave. 477 | * @param audioBuffer audioBuffer to draw 478 | * @param audioCtx {AudioContext} audio context 479 | * @param trackId {number} the track id 480 | */ 481 | renderWave(audioBuffer, audioCtx, trackId) { 482 | const $track = document.querySelector(`#trackbox${trackId}`); 483 | const width = $track.getBoundingClientRect().width; 484 | const timeAxisHeight = 18; 485 | const layerHeight = 200; 486 | 487 | const duration = audioBuffer.duration; 488 | const pixelsPerSecond = width / duration; 489 | 490 | // create timeline and track 491 | const timeline = new wavesUI.core.Timeline(pixelsPerSecond, width); 492 | const track = new wavesUI.core.Track($track, layerHeight + timeAxisHeight); 493 | timeline.add(track); // adds the track to the timeline 494 | 495 | // time axis 496 | const timeAxis = new wavesUI.axis.AxisLayer(wavesUI.axis.timeAxisGenerator(), { 497 | height: timeAxisHeight, 498 | }); 499 | 500 | // Axis layers use `timeline.TimeContext` directly, 501 | // they don't have their own timeContext 502 | timeAxis.setTimeContext(timeline.timeContext); 503 | timeAxis.configureShape(wavesUI.shapes.Ticks, {}, { color: 'steelblue' }); 504 | 505 | // waveform layer 506 | const waveformLayer = new wavesUI.helpers.WaveformLayer(audioBuffer, { 507 | height: layerHeight, 508 | top: timeAxisHeight, 509 | }); 510 | 511 | waveformLayer.setTimeContext(new wavesUI.core.LayerTimeContext(timeline.timeContext)); 512 | 513 | // segment layer 514 | const segmentData = [{ 515 | start: 1, 516 | duration: 2, 517 | color: 'orange', 518 | text: '', // no label 519 | }]; 520 | const segmentLayer = new wavesUI.core.Layer('collection', segmentData, { 521 | height: layerHeight, 522 | }); 523 | segmentLayer.setTimeContext(new wavesUI.core.LayerTimeContext(timeline.timeContext)); 524 | segmentLayer.configureShape(wavesUI.shapes.AnnotatedSegment, { 525 | x(d, v) { 526 | if (v !== undefined) { d.start = v; } 527 | return d.start; 528 | }, 529 | width(d, v) { 530 | if (v !== undefined) { d.duration = v; } 531 | return d.duration; 532 | }, 533 | }); 534 | segmentLayer.setBehavior(new wavesUI.behaviors.SegmentBehavior()); 535 | this.tracks[trackId].segmentLayer = segmentLayer; 536 | 537 | // cursor layer 538 | const cursorLayer = new wavesUI.helpers.CursorLayer({ height: layerHeight }); 539 | cursorLayer.setTimeContext(new wavesUI.core.LayerTimeContext(timeline.timeContext)); 540 | 541 | // create an audio source wrapper and collect 542 | this.tracks[trackId].audioSource = new AudioSourceWrapper({ 543 | audioCtx, 544 | trackIndex: trackId, 545 | buffer: audioBuffer, 546 | source: null, 547 | cursorLayer, 548 | }); 549 | 550 | // add layers to tracks 551 | track.add(cursorLayer); 552 | track.add(timeAxis); 553 | // track.add(grid); 554 | track.add(waveformLayer); 555 | track.add(segmentLayer); 556 | 557 | track.render(); 558 | track.update(); 559 | 560 | timeline.tracks.render(); 561 | timeline.tracks.update(); 562 | 563 | this.tracks[trackId].timeline = timeline; 564 | 565 | // set the timeline view mode - either 'selection', or 'zoom' 566 | Tracks.setModeForTimeline(timeline, this.mode); 567 | } 568 | 569 | /** 570 | * Erases the waveform given the id. 571 | * It essentially removes the 'svg' part that wraps the visualization. 572 | * @param trackId {number} track identification 573 | */ 574 | eraseWave(trackId) { 575 | const trackBox = this.tracks[trackId].trackelem; 576 | 577 | // erase the wave only if there already exists visualized wave 578 | if (trackBox.lastChild.tagName === 'svg') { 579 | trackBox.removeChild(trackBox.lastChild); 580 | } 581 | } 582 | 583 | /** 584 | * Draws the waveform for the uploaded audio file. 585 | * 586 | * @param fileArrayBuffer{ArrayBuffer} array buffer for the audio 587 | * @param audioCtx{AudioContext} audio context 588 | * @param trackId{int} the track id number 589 | */ 590 | drawWave(fileArrayBuffer, audioCtx, trackId) { 591 | this.eraseWave(trackId); // first erase the wave if already exists 592 | // returns AudioBuffer object as a result of decoding the audio 593 | audioCtx.decodeAudioData(fileArrayBuffer, (buffer) => { 594 | this.renderWave(buffer, audioCtx, trackId); 595 | }); 596 | } 597 | } 598 | 599 | export default Tracks; 600 | -------------------------------------------------------------------------------- /test/testapp.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'test'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | 6 | /* eslint-disable global-require */ 7 | const assert = require('assert'); 8 | const it = require('mocha').it; 9 | const describe = require('mocha').describe; 10 | const before = require('mocha').before; 11 | const beforeEach = require('mocha').beforeEach; 12 | const chai = require('chai'); 13 | const should = require('chai').should(); // eslint-disable-line no-unused-vars 14 | const chaiHttp = require('chai-http'); 15 | const sinon = require('sinon'); 16 | const supertest = require('supertest'); 17 | 18 | const expect = chai.expect; 19 | 20 | // required modules 21 | const User = require('../models/user'); 22 | const server = require('../app'); 23 | 24 | require('sinon-mongoose'); 25 | 26 | chai.use(chaiHttp); 27 | 28 | 29 | describe('Mongoose User Schema Test', () => { 30 | const UserMock = sinon.mock(User); 31 | 32 | it('should find a user by author', (done) => { 33 | UserMock 34 | .expects('findOne').withArgs({ username: 'username' }) 35 | .resolves('RESULT'); 36 | 37 | User.findOneByUsername('username').then((result) => { 38 | UserMock.verify(); 39 | UserMock.restore(); 40 | assert.equal(result, 'RESULT'); 41 | done(); 42 | }); 43 | }); 44 | 45 | it('should add audio information to library', (done) => { 46 | // sample information to store 47 | const info = { 48 | username: 'username', 49 | audioInfo: { 50 | audiotitle: 'title', 51 | url: '/user/somewhere', 52 | }, 53 | }; 54 | 55 | // mock 56 | UserMock 57 | .expects('findOneAndUpdate') 58 | .withArgs({ username: info.username }, { $push: { library: info.audioInfo } }) 59 | .resolves('RESULT'); 60 | 61 | // actual test 62 | User.addAudioInfoToLibrary(info).then((result) => { 63 | UserMock.verify(); 64 | UserMock.restore(); 65 | assert.equal(result, 'RESULT'); 66 | done(); 67 | }); 68 | }); 69 | }); 70 | 71 | 72 | describe('Controller Tests', () => { 73 | let controller; 74 | let session; 75 | let res; 76 | 77 | before(() => { 78 | // bring up controller 79 | controller = require('../controllers/appController'); 80 | 81 | session = { // fake session 82 | name: 'dansuh', 83 | username: 'dansuh@gmail.com', 84 | destroy: cb => cb(), 85 | }; 86 | 87 | res = { 88 | cookie: () => res, 89 | status: () => res, 90 | sendFile: () => res, 91 | send: () => res, 92 | redirect: () => res, 93 | json: () => res, 94 | end: () => res, 95 | }; 96 | }); 97 | 98 | it('should contain functions', (done) => { 99 | expect(controller.getRoot).to.be.a('function'); 100 | expect(controller.signIn).to.be.a('function'); 101 | expect(controller.signUp).to.be.a('function'); 102 | expect(controller.postSignIn).to.be.a('function'); 103 | expect(controller.postSignUp).to.be.a('function'); 104 | expect(controller.logOut).to.be.a('function'); 105 | expect(controller.notFound).to.be.a('function'); 106 | done(); 107 | }); 108 | 109 | it('getRoot should send status 200', (done) => { 110 | const getRoot = sinon.spy(controller, 'getRoot'); 111 | 112 | // fake response 113 | controller.getRoot({ session }, res, {}); 114 | 115 | getRoot.restore(); 116 | sinon.assert.calledOnce(getRoot); 117 | done(); 118 | }); 119 | 120 | it('getRoot should call cookie twice', (done) => { 121 | const cookie = sinon.spy(res, 'cookie'); 122 | 123 | controller.getRoot({ session }, res, {}); 124 | 125 | cookie.restore(); 126 | sinon.assert.callCount(cookie, 2); 127 | done(); 128 | }); 129 | 130 | it('getRoot should set status to 200', (done) => { 131 | const status = sinon.spy(res, 'status'); 132 | 133 | controller.getRoot({ session }, res, {}); 134 | 135 | status.restore(); 136 | assert(status.calledWith(200)); 137 | done(); 138 | }); 139 | 140 | it('signIn should get status of 200', (done) => { 141 | const status = sinon.spy(res, 'status'); 142 | 143 | controller.signIn({ session }, res); 144 | 145 | status.restore(); 146 | assert(status.calledWith(200)); 147 | done(); 148 | }); 149 | 150 | it('signUp should get status of 200', (done) => { 151 | const status = sinon.spy(res, 'status'); 152 | 153 | controller.signUp({ session }, res); 154 | 155 | status.restore(); 156 | assert(status.calledWith(200)); 157 | done(); 158 | }); 159 | 160 | it('postSignIn should return 420 with Incorrect Password for wrong password', (done) => { 161 | // prepare a stub and a spy 162 | const send = sinon.spy(res, 'send'); 163 | const findOneByUsernameStub = sinon.stub(User, 'findOneByUsername'); 164 | findOneByUsernameStub.callsFake((username, callback) => { 165 | callback(null, { name: 'dansuh', password: 'wrong password' }); 166 | }); 167 | 168 | // make up a request 169 | const req = { 170 | session, 171 | body: { 172 | username: 'dansuh@gmail.com', 173 | password: 'right password', 174 | }, 175 | }; 176 | 177 | // call! 178 | controller.postSignIn(req, res); 179 | 180 | findOneByUsernameStub.restore(); 181 | send.restore(); 182 | 183 | // asserts 184 | sinon.assert.calledOnce(send); 185 | assert(send.calledWith('Incorrect password.')); 186 | done(); 187 | }); 188 | 189 | it('redirects to "/" on /logout', (done) => { 190 | const redirect = sinon.spy(res, 'redirect'); 191 | 192 | controller.logOut({ session }, res); 193 | redirect.restore(); 194 | 195 | sinon.assert.calledOnce(redirect); 196 | done(); 197 | }); 198 | 199 | it('destroys the session on logout', (done) => { 200 | const destroy = sinon.spy(session, 'destroy'); 201 | 202 | controller.logOut({ session }, res); 203 | 204 | destroy.restore(); 205 | sinon.assert.callCount(destroy, 1); 206 | done(); 207 | }); 208 | 209 | it('does not call destroy upon logout when session is not continued', (done) => { 210 | const sess = { 211 | destroy: cb => cb(), 212 | // no username! 213 | }; 214 | 215 | const destroy = sinon.spy(sess, 'destroy'); 216 | 217 | controller.logOut({ session: sess }, res); 218 | destroy.restore(); 219 | 220 | sinon.assert.callCount(destroy, 0); 221 | done(); 222 | }); 223 | 224 | describe('audioReqByTrackName', () => { 225 | let getOriginalData; 226 | let deleteTempFile; 227 | let TEMP_FILE_NAME; 228 | 229 | beforeEach(() => { 230 | TEMP_FILE_NAME = 'test_temp_file'; 231 | 232 | getOriginalData = filename => fs.readFileSync( 233 | path.resolve(__dirname, `../public/sample_tracks/${filename}.mp3`)); 234 | 235 | deleteTempFile = (filename, done) => { 236 | fs.stat(filename, () => { 237 | fs.unlink(filename, (err) => { 238 | assert(!err); 239 | done(); 240 | }); 241 | }); 242 | }; 243 | }); 244 | 245 | it('sends the file according to the track name requested: exhale', (done) => { 246 | const audioFilename = 'exhale'; 247 | const req = { 248 | params: { 249 | trackname: audioFilename, 250 | }, 251 | }; 252 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 253 | 254 | controller.audioReqByTrackName(req, writeStream); 255 | 256 | writeStream.on('finish', () => { 257 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 258 | const expectedBuf = getOriginalData(audioFilename); 259 | 260 | // compare the contents 261 | assert(testBuf.toString() === expectedBuf.toString()); 262 | // delete the temporary file and done 263 | deleteTempFile(TEMP_FILE_NAME, done); 264 | }); 265 | }); 266 | 267 | it('sends the file according to the track name requested: itsgonnarain', (done) => { 268 | const audioFilename = 'itsgonnarain'; 269 | const req = { 270 | params: { 271 | trackname: audioFilename, 272 | }, 273 | }; 274 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 275 | 276 | controller.audioReqByTrackName(req, writeStream); 277 | 278 | writeStream.on('finish', () => { 279 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 280 | const expectedBuf = getOriginalData(audioFilename); 281 | 282 | // compare the contents 283 | assert(testBuf.toString() === expectedBuf.toString()); 284 | // delete the temporary file and done 285 | deleteTempFile(TEMP_FILE_NAME, done); 286 | }); 287 | }); 288 | 289 | it('sends the file according to the track name requested: starcraft', (done) => { 290 | const audioFilename = 'starcraft'; 291 | const req = { 292 | params: { 293 | trackname: audioFilename, 294 | }, 295 | }; 296 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 297 | 298 | controller.audioReqByTrackName(req, writeStream); 299 | 300 | writeStream.on('finish', () => { 301 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 302 | const expectedBuf = getOriginalData(audioFilename); 303 | 304 | // compare the contents 305 | assert(testBuf.toString() === expectedBuf.toString()); 306 | // delete the temporary file and done 307 | deleteTempFile(TEMP_FILE_NAME, done); 308 | }); 309 | }); 310 | 311 | it('sends the file according to the track name requested: dinosaur', (done) => { 312 | const audioFilename = 'dinosaur'; 313 | const req = { 314 | params: { 315 | trackname: audioFilename, 316 | }, 317 | }; 318 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 319 | 320 | controller.audioReqByTrackName(req, writeStream); 321 | 322 | writeStream.on('finish', () => { 323 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 324 | const expectedBuf = getOriginalData(audioFilename); 325 | 326 | // compare the contents 327 | assert(testBuf.toString() === expectedBuf.toString()); 328 | // delete the temporary file and done 329 | deleteTempFile(TEMP_FILE_NAME, done); 330 | }); 331 | }); 332 | 333 | it('sends the file according to the track name requested: shapeofyou', (done) => { 334 | const audioFilename = 'shapeofyou'; 335 | const req = { 336 | params: { 337 | trackname: audioFilename, 338 | }, 339 | }; 340 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 341 | 342 | controller.audioReqByTrackName(req, writeStream); 343 | 344 | writeStream.on('finish', () => { 345 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 346 | const expectedBuf = getOriginalData(audioFilename); 347 | 348 | // compare the contents 349 | assert(testBuf.toString() === expectedBuf.toString()); 350 | // delete the temporary file and done 351 | deleteTempFile(TEMP_FILE_NAME, done); 352 | }); 353 | }); 354 | 355 | it('sends the file according to the track name requested: hanulbaragi', (done) => { 356 | const audioFilename = 'hanulbaragi'; 357 | const req = { 358 | params: { 359 | trackname: audioFilename, 360 | }, 361 | }; 362 | const writeStream = fs.createWriteStream(TEMP_FILE_NAME); 363 | 364 | controller.audioReqByTrackName(req, writeStream); 365 | 366 | writeStream.on('finish', () => { 367 | const testBuf = fs.readFileSync(TEMP_FILE_NAME); 368 | const expectedBuf = getOriginalData(audioFilename); 369 | 370 | // compare the contents 371 | assert(testBuf.toString() === expectedBuf.toString()); 372 | // delete the temporary file and done 373 | deleteTempFile(TEMP_FILE_NAME, done); 374 | }); 375 | }); 376 | }); 377 | 378 | 379 | describe('upload', () => { 380 | it('fails with no session', (done) => { 381 | const status = sinon.spy(res, 'status'); 382 | const send = sinon.spy(res, 'send'); 383 | 384 | controller.upload({ session: {} }, res); 385 | 386 | status.restore(); 387 | send.restore(); 388 | 389 | assert(status.calledWith(420)); 390 | assert(send.calledWith('Session information unavailable!')); 391 | done(); 392 | }); 393 | }); 394 | 395 | describe('libraryInfo', () => { 396 | it('returns Not Available with no username provided', (done) => { 397 | const status = sinon.spy(res, 'status'); 398 | 399 | controller.libraryInfo({ params: { username: 'undefined' } }, res); 400 | 401 | status.restore(); 402 | assert(status.calledWith(420)); 403 | done(); 404 | }); 405 | 406 | it('returns the library contents', (done) => { 407 | const json = sinon.spy(res, 'json'); 408 | const req = { 409 | params: { 410 | username: 'valid', 411 | }, 412 | }; 413 | 414 | const tempUserDoc = { 415 | name: 'dansuh', 416 | username: 'valid', 417 | password: 'password', 418 | library: [{ audiotitle: 'foo', url: 'path/to/foo' }], 419 | }; 420 | 421 | const findOneByUsernameStub = sinon.stub(User, 'findOneByUsername'); 422 | findOneByUsernameStub.callsFake((username, callback) => { 423 | callback('Not Error', tempUserDoc); 424 | }); 425 | 426 | controller.libraryInfo(req, res); 427 | 428 | findOneByUsernameStub.restore(); 429 | 430 | sinon.assert.calledOnce(json); 431 | sinon.assert.calledWith(json, sinon.match.array); 432 | sinon.assert.calledWithMatch(json, tempUserDoc.library); 433 | 434 | done(); 435 | }); 436 | }); 437 | }); 438 | 439 | 440 | describe('Test Express Server', () => { 441 | it('responds to /', (done) => { 442 | supertest(server) 443 | .get('/') 444 | .end((err, res) => { 445 | res.should.have.status(200); 446 | done(); 447 | }); 448 | }); 449 | 450 | it('responds to /signin', (done) => { 451 | supertest(server) 452 | .get('/signin') 453 | .end((err, res) => { 454 | res.should.have.status(200); 455 | done(); 456 | }); 457 | }); 458 | 459 | it('responds to /signup', (done) => { 460 | chai.request(server) 461 | .get('/signup') 462 | .end((err, res) => { 463 | res.should.have.status(200); 464 | done(); 465 | }); 466 | }); 467 | 468 | it('404 unknown', (done) => { 469 | chai.request(server) 470 | .get('/blabh') 471 | .end((err, res) => { 472 | res.should.have.status(404); 473 | done(); 474 | }); 475 | }); 476 | }); 477 | -------------------------------------------------------------------------------- /views/signin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sign In 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 23 |
24 |
25 | 26 | 27 |
28 | 31 |
32 | 33 | 34 |
35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /views/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sign Up 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 | 35 |
36 | 37 | 38 |
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const DIST_PATH = path.resolve(__dirname, 'dist'); 5 | 6 | module.exports = { 7 | context: __dirname, // working directory 8 | entry: { 9 | index: './src/index.js', 10 | signin: './src/signin.js', 11 | signup: './src/signup.js', 12 | }, 13 | output: { 14 | filename: '[name].bundle.js', // [name] is the entry key 15 | path: DIST_PATH, // output path 16 | publicPath: '/public/', // location of static files that would be requested 17 | }, 18 | devtool: 'cheap-eval-source-map', 19 | devServer: { 20 | port: 8080, 21 | hot: true, // tell the dev server to use HMR 22 | overlay: { 23 | warnings: true, 24 | errors: true, 25 | }, 26 | publicPath: '/dist', // contents from webpack served from HERE 27 | contentBase: '/public', // contents from non-webpack 28 | index: 'index.html', 29 | stats: { 30 | colors: true, // good to have pretty outputs 31 | }, 32 | proxy: { 33 | '*': 'http://localhost:3000', 34 | }, 35 | }, 36 | resolve: { 37 | extensions: ['.js'], 38 | modules: [ 39 | 'node_modules', 40 | path.resolve(__dirname, 'src'), 41 | ], 42 | }, 43 | module: { 44 | rules: [ 45 | { 46 | test: /\.js$/, 47 | exclude: /(node_modules|dist)/, 48 | include: /(src|controllers|models|test)/, 49 | enforce: 'pre', // pre-load the linter 50 | loader: 'eslint-loader', 51 | options: { 52 | cache: false, 53 | outputReport: { 54 | filePath: '../checkstyle.xml', 55 | }, 56 | }, 57 | }, 58 | { 59 | test: /\.js$/, 60 | exclude: /node_modules/, 61 | use: { 62 | loader: 'babel-loader', 63 | options: { 64 | presets: ['es2015'], 65 | }, 66 | }, 67 | }, 68 | { 69 | test: /\.html$/, 70 | // use: ['style-loader'] === use: [{loader: 'style-loader'}] 71 | // === loader: 'style-loader' 72 | loader: 'html-loader', 73 | }, 74 | { 75 | test: /\.(jpg|mp3)$/, 76 | loader: 'file-loader', 77 | }, 78 | ], 79 | }, 80 | plugins: [ 81 | new webpack.HotModuleReplacementPlugin(), // Enable HMR 82 | ], 83 | }; 84 | --------------------------------------------------------------------------------