Git Product home page Git Product logo

beautiful-audio-editor's Introduction

Audio Cat (Beautiful Audio Editor)

Overview

This audio editor runs in a web browser and uses the Web Audio API. Chi made some efforts to embed it within a web view and make it an Android app, but halted after facing memory issues.

This project uses Google Closure, which encompasses a javascript compiler, library, Google Stylesheets (GSS - which lets us compile CSS), and soy templates (for structuring pieces of HTML). Closure standardizes javascript. For instance, it introduces private/protected variables, normal (non-prototypical) inheritance like java, and compile-time error checking.

This is not an official Google product. Chi just thought that the Chrome Web Store needed a nimble audio editing tool, both before and after Android apps can run on Chromebooks.

Setup

  1. Install java.

  2. Give Google Closure build tools relevant execute permissions:

chmod a+x third_party/closure_library/closure/bin/build/closurebuilder.py
chmod a+x third_party/closure_library/closure/bin/build/depswriter.py
chmod a+x third_party/closure_templates/SoyToJsSrcCompiler.jar
chmod a+x third_party/closure_stylesheets/closure-stylesheets-20111230.jar

Building

The project uses a python script (do.py) for building, which is kind of simple. We're open to using more robust build systems such as bazel or gulp.

Some uses:

Compile the javascript (including soy templates) and CSS, which is outputted into the build directory:

python do.py

Lint the javascript. In other words, find style violations:

python do.py lint

Running the Editor

To run the editor, start up a web server in the home repository directory. For example, in the repository directory, run

python -m SimpleHTTPServer

to start a local server on port 8000.

You can then view the compiled editor at http://localhost:8000/build/compiled.html

You can view the uncompiled editor at http://localhost:8000/build/uncompiled.html

While developing, you don't have to recompile to view changes in the uncompiled version. However, you have to recompile to see changes if you made changes to the dependency graph (altered calls to goog.require), made any stylesheet changes (changes to GSS files), or altered soy templates (which generate javascript files upon template compilation).

Coding Guidelines

This project currently uses Google's javascript style guide.

To help check for style throughout the project, run python do.py lint in the home audio-cat directory.

Code Organization

Location

Source code is located in the src folder.

  • src/js/original contains hand-written source code.
  • src/js/auto_generated contains javascript generated by tools such as the soy template compiler, which compiles .soy files into javascript classes.
  • src/js/test contains code related to testing. When coding a complex object like a volume envelope, it helps to write the test first and then code up a class that adheres to the test.

Documentation

Soon, each folder will have a README describing its contents. Each javascript file also contains a block comment describing it. TODO(chihuahua): uh... do that. write those readmes.

Organization of JavaScript Classes

In broad strokes, this project's javascript classes fall into 5 categories:

src/js/original/state

This folder contains files that maintain the state of individual audio projects. For instance, audioCat.state.Track maintains information about the sections within a track. audioCat.state.Section contains information about an individual section. audioCat.state.Clip encapsulates information about an individual clip within a section.

Classes in this folder typically dispatch events when their states change, notifying other entities such as audio-play-related and UI entities of changes in state.

For instance, when a new track is added, the audioCat.state.TrackManager fires an event notifying the audio graph to play the track as well as the UI (audioCat.ui.TrackListingManager) to visualize the track.

src/js/original/audio

This folder contains classes related to playing audio and hooking up with the Web Audio API. For instance, audioCat.audio.play.PlayManager maintains the current play status. audioCat.audio.AudioGraph maintains the connections between junctions in the audio graph.

Files in this directory heed events dispatched by entities within src/js/original/state as well as fires its own events for the UI to listen to. For instance, when playing starts, the UI responds by switching the play icon to a pause icon.

src/js/original/ui

This folder contains files that updates the UI. Classes in this folder typically encapsulate state and audio play. When the user interacts with the UI, classes in this folder directly modify the state objects. The state then fires events that update the UI.

src/js/original/app

The files in this directory hook up the whole app together. app.js for instance is a megamoth file that instantiates the whole app.

src/js/original/action

This folder contains Action objects that perform a certain action. Each action object can be retreived from the ActionManager by a specific key. We can invoke actions based on various interactions.

src/js/original/utility

This folder is a collection of convenience classes that are used throughout the project. For instance, audioCat.utility.IdGenerator generates IDs unique throughout the application used by many types of objects.

src/js/original/android

This folder contains code that allows the editor to be embedded within an Android web view. Efforts towards making a mobile app were abandoned after the decision to keep the editor a web app. This folder is basically a noop.

Testing

Unit tests currently use Google Closure's junit library. To add a unit test,

  1. Code up a _test.js and _test.html file. See id-generator_test for an example.
  2. Run python do.py to aggregate all tests into auto_generated/all_tests.js.

Unit tests for certain javascript classes can be run by starting a web server in the home repository directory, again with say

python -m SimpleHTTPServer

and then visiting say (for port 8000 on localhost):

http://localhost:8000/src/js/test/tests.html

Click Start to run tests.

We currently lack integration tests with say web driver, Selenium, or Google Telemetry.

beautiful-audio-editor's People

Contributors

chihuahua avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

beautiful-audio-editor's Issues

some info on building

Building this code is pretty confusing, mostly due to lack of documentation of dependency versions (primarily java and python).

I found that it builds successfully under python 2.7, however closure compiler fails for some reason that I am not sure of. The uncompiled.html file in builds/ should work even if closure compiler fails.

what I ran to get this work:
(in the project's base directory)

conda create --prefix ./.env/ python=2.7
conda activate ./.env/
python do.py
python -m SimpleHTTPServer

then go to http://localhost:8000/build/uncompiled.html in your browser (I tested in firefox and it worked).

Major issue when loading saved project

I cannot get back into my locally saved project after I closed it. I am using Chrome 70 and the error in the console consists of this:
Uncaught DOMException: Failed to execute 'createBuffer' on 'BaseAudioContext': The number of frames provided (0) is less than or equal to the minimum bound (0).
at Dp. (https://beautifulaudioeditor.appspot.com/js/c.js:336:228)
at Ed (https://beautifulaudioeditor.appspot.com/js/c.js:48:69)
at FileReader.Bd (https://beautifulaudioeditor.appspot.com/js/c.js:50:41)
at FileReader.b (https://beautifulaudioeditor.appspot.com/js/c.js:46:50)
Any help appreciated!

Ubuntu 20.04 issue after compiling

Trying to compile after cloning on Ubuntu 20.04. The error thrown is:

Uncaught TypeError: a.attachEvent is not a function
    at Ic (c.js:33)

The uncompiled.html works as expected. And this also works on Ubuntu 18.04 as expected.

Java 8 installed. And running do.py with python2.7

It points to an OS and Java compatibility issue. Any help would be appreciated.

Is there a way to modernise this project?

Hello, very curious what would be the best approach to this? Is it rewriting the whole thing to modern ES6 or maybe there is a way to compile Closure to readable vanilla.js?

Security Policy violation Binary Artifacts

This issue was automatically created by Allstar.

Security Policy Violation
Project is out of compliance with Binary Artifacts policy: binaries present in source code

Rule Description
Binary Artifacts are an increased security risk in your repository. Binary artifacts cannot be reviewed, allowing the introduction of possibly obsolete or maliciously subverted executables. For more information see the Security Scorecards Documentation for Binary Artifacts.

Remediation Steps
To remediate, remove the generated executable artifacts from the repository.

Artifacts Found

  • third_party/closure_compiler/compiler.jar
  • third_party/closure_stylesheets/closure-stylesheets-20111230.jar
  • third_party/closure_templates/SoyToJsSrcCompiler.jar

Additional Information
This policy is drawn from Security Scorecards, which is a tool that scores a project's adherence to security best practices. You may wish to run a Scorecards scan directly on this repository for more details.


Allstar has been installed on all Google managed GitHub orgs. Policies are gradually being rolled out and enforced by the GOSST and OSPO teams. Learn more at http://go/allstar

This issue will auto resolve when the policy is in compliance.

Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.