hoch/canopy

Web Audio API programming/debugging suite

canopy's Issues

Color scheme and logarithmic scaling for Spectrogram

Come up with better Ruler rendering

Ruler rendering needs:

• Linear time base (seconds)
• Sample (samples)

Anti-aliasing needed for waveform rendering.

Display warning when refreshing or closing the window.

Resizing the height of code editor on resize event.

Logarithmic scaling in waveform renderer

Signal display y-axis is inverted

Run with the following simple demo:

var buffer = context.createBuffer(1, 10, context.sampleRate);
var s = context.createBufferSource();
var d = buffer.getChannelData(0);
for (var k = 0; k < d.length; ++k) {
  d[k] = 1;
}

s.buffer = buffer;
s.loop = true;

var g = context.createGain();

s.connect(g);
g.connect(context.destination);

g.gain.value = 0;
g.gain.setValueAtTime(1, 0);
g.gain.linearRampToValueAtTime(-1, 1.5);

s.start();

The curve starts at the bottom and goes up to the top. But the code says the gain starts at 1 and linear ramps down to -1. Thus the y axis is reversed, I think.

Zoomable amplitude axis

Derived from the Issue #17. The amplitude axis should be zoomable and initialized with optimum zoom-level to present the maximum peak value properly.

Add link to github page

It would be useful if the menu button (or something) had a link to either the main github page or to the issues page. This is really minor for now, but a link for users to report issues would be nice.

Autocompletion doesn't continue

The completion feature is really great, but it doesn't allow you to continue. For example, enter

context.createBu

Press tab. it completes it to createBuffer. Press tab again and a tab is inserted. I was actually expecting to be offered createBuffer and createBufferSource as my options. To get the completion now, I have to delete the tab and delete the 'r' and press tab again to get both choices again, enter "S" and then tab to finish it all out.

Bonus feature: After pressing tab (as above) to get the final unique completion, if I press tab again, insert "()". :-) That might be annoying, however, if you press tab lots of times.

Integrate Spiral

Add a new line after comment

The comment in the code window doesn't have a new line so it's really hard to notice that the cursor is at the end of the comment.

There should be a new line there so that when you start typing, it's not at the end of the comment.

Changing context variable breaks canopy

If you do something stupid like

context = new OfflineAudioContext(...)

in the code snippet, canopy behaves badly. I currently get an error about maxPeak being undefined.

It would be useful if canopy could produce an error if the user changes the important context variable to something unexpected.

This is an unlikely scenario that I happened to run across because I was cutting and pasting some other code into canopy.

Support multichannel rendering in Waveform and Specgram

Error window doesn't get updated

In a new instance, type something like

x = a

and press run. You get an error message. That's good.

Now fix up the code and enter something like

x = 42

and press run. This runs, and there should be no error, but the error window contains the error message from last time.

I think every press of run should clear out the window.

Y-axis label on Spectrogram.

FFT and Spectrogram?

Selectable audio region

Should be able to

• Analyze it (FFT/Spectrogram, other stats)
• Export it (as a .wav file)

Add scroll bar for waveform view

Show some indication of the grab area where you can pull out the gists

Since there is no indication of where the grab area for the gists are, I often accidentally pull it out when I try to mark out some of the code for copying or deleting.

There should be some kind of visual indicator of where that area is. And also a small margin between that and the left side of the code area so that it's easier to highlight code regions.

Replay audio

Currently when you press the render button, the audio is rendered and played out. That works fine.

But if you want to listen again, you can't. The render button does nothing. You have to edit the code before the render button will re-render the example again.

It would be good to either allow the render button to re-render and play the audio, or, better yet, just replay the audio if the code hasn't changed.

Integrate Circuitry

Y-axis label should Include min, max values and not block the waveform image

The waveform graph doesn't include a y-axis scale. It should to make it easy to see what the actual values of the waveform is.

The spectrogram also needs axis labels.

Time axis labels should be formatted properly

The time axis labels have funny values like 0:2267. For a 3-second context, I assume that really means 0.2267 sec.

Also, the right most label is 2:9 and is cutoff. I assume there were more digits. This also makes it difficult to tell if the end of the graph is really 3 and not 2.9xxx.

Bonus feature: Have the labels actually go from 0 to 3, at least for the initial display.

Polymer/Material (paper) UI

Re-org the layout and beautify UI.

Move 'View Change' button to the lower tool bar.

Sharing code snippet

• Sharing code via GitHub gist?
• What's the integration path?

Support multiple inspector objects in the workspace

Derived from the issue #31. User should be able to select a desired inspector between waveform, spectrogram and audiograph. The workspace (right pane) will stack each inspector as a render request is served.

Implement on-the-fly code completion in the editor

See:
http://stackoverflow.com/questions/13744176/codemirror-autocomplete-after-any-keyup
codemirror/codemirror5#1852

Integrate a new waveform renderer.

Display a toast UI when the code has error

Derived the issue #23. The less invasive is the better. Let's not do the complicated way. (Tern or Esprima approach)

Use Polymer 1.0

This is necessary to adopt new things (app layout and performance enhancement) in Polymer 1.0.

Implement a performant overlay on Waveform renderer.

Redrawing a waveform whenever any parameter changes seems to be not efficient enough. Adding an overlay canvas for the extra information would be better.

On-demand drawing on spectrogram.

Make the specgram only draw user-defined region on user's explicit interaction.

Logarithmic scaling in spectrogram

Enhancement: Allow selectable number of channels

Looks like the context always has two channels.

It would be nice to be able to select the number of channels. I guess this also means making the waveform display include a display for each channel.

Inspector z-index is too high

Needs to think about the correct height and index for the inspector.

Remove aliasing on new waveform renderer.

License and versioning

Display current context settings

Now that the snippet can control the settings of the context like the number of channels, duration, and sample rate, you don't have the settings window. Since these all have some default, it would be nice to have some way to display the values.

On-boarding and tutorial

• A simple on-boarding walkthrough.
• Tutorial article in the left drawer.

User defined oncomplete handler for context

It would be useful if the user could define their own oncomplete event handler to do something when rendering is done.

The use case is if you want to examine the rendered data in some way and still have canopy do it's thing and produce the useful plots and audio playback.

Refine waveform visualization

• Use precise timebase for the rendering.
• Abstract visualization routine: setParameter(start, zoomFactor) -> renderView()

Canopy crashes with Gist ID is empty string.

Clipping of audio on playback

Since an offline context has no restrictions on amplitude of the output, we can do pretty much whatever we want. However, when the audio is played out (I presume with webaudio), the output does clip the signal. Hence, what is displayed isn't really quite what is heard.

Perhaps it would be nice to pop up a warning (or some other less intrusive indicator) that there might be clipping when the audio is played. However, I would not want the graphs or the generated data to have any clipping applied. It should be the actual full-range generated output, unclipped.

Downloadable sound

User should be able to download the rendered buffer.

Selectable sample rate

Version/browser compatibility issues

• FF 42: Polymer does not work well.
• Chrome M48 Beta: D3, Dagre acting weird inside of Shadow DOM
• Safari: no 'OfflineAudioContext' (srsly?)
• Edge: Haven't tested yet.

Gist pullout isn't discoverable

Unless someone tells you or you do it by accident, it's impossible to know that you can grab the left edge of the code window and drag it to the right to get a pullout with the various gist snippets.

There should be something somewhere to make it discoverable. Perhaps a small icon on the left, or maybe even a menu button to allow users to open it (and maybe configure other things).

Tweak the color scheme of audiograph visualization