Web Audio Editor

Demo

This is a web audio editor project where user can edit custom audio files online. The user is able to cut, paste, leave, and copy segments of audio data. Also, the user can apply fade-in, fade-out, highpass filter, lowpass filter, and reverberation to the tracks. The audio effects are implemented using Web Audio API. The user can also maintain settings through signing up, and upload audio files to the server for later use.

Prerequisites

• mongodb
• node.js & npm

Setup and running

Development Server Setup

mongod --port 38128

npm install && npm run dev

Start Production Server Only

npm run build && npm run start

By default the production server listens to port 3000.

However, you can modify the listening port through port forwarding while docker run, with -p option. See Start Production Cluster.

Start Production Cluster

docker pull kaehops/webaudioeditor

docker pull mongo:3.4

docker-compose up -d

This command will read docker-compose.yml file for configuration.

User Guide

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.

To upload your own audiofile, click Add Track and use File button. This editor supports mp3, wave, ogg files. Other encoding formats are not tested and performance not guaranteed.

You can play, pause, stop the track separately or for all tracks.

Audio editing features include:

• Cut: cuts the selected portion of the waveform. The cut out portion is copied, so pasting is available afterwards.

• Copy: copy the selected wave segment

• Paste: paste the copied audio to the desired place.

• Leave: leaves only the selected waveform and erase all else

• Low Pass Filter (LP): cuts the higher frequencies from 2000Hz with 12dB/octave roll down.

• High Pass Filter (HP): cuts the lower frequencies below 1500Hz with 12dB/octave roll down.

• Reverb (rev): adds a reverberation effect to the selected track. It uses an impulse response file taken from St. Patrick's Church, Patrington.

• Fade-in

• Fade-out

Also, you can view the waveform of the track in Zoom Mode, where you click on the waveform and drag up and down. Selecting a portion of wave for editing is possible in Selection Mode, where you can cut, paste, and leave.

Development

Stylecheck

npm run list

Or, if npm run lint-file is run, the checkstyle results are saved in a file eslint_result.xml

The style extends AirBnb style, with minor modifications. See .eslintrc for style settings.

CI

Uses Jenkins CI server, and initiates a build for every webhook triggered by github push.

The integration tests for:

• All unit tests to pass
• Building a docker container from Dockerfile
• Pushing the built docker container to Docker hub
• Passing checkstyle

Dependencies / Technologies used

Server Framework

• node.js
• express for REST api's
• webpack2 for bundling
• Babel for ECMAScript version management and transpiling

Waveform Visualization

• waves-ui

DB

• Mongodb for user authentication and library management

CSS

• Bootstrap 4 (alpha)

Integration

• AWS EC2 for ubuntu webserver container
• Docker for microservice builds and deployment
• Jenkins for continuous integration master

Testing

• Mocha
• Sinon
• Chai

ECMAScript Stylecheck

• eslint