WebAudio SampleEditorView

Audio / Waveform UI for displaying WebAudio AudioBuffers with zoom, select and looping markers interaction. Much like what you would find in a DAW.

Warning

This repo is in it's early stage. May not be appropriate for production.

Try It

Live Demo

Install

npm i -D sample-editor-view or yarn add -D sample-editor-view

Features

• Adjustable detail - Fast rendering when precision is not important
• No external dependencies
• Should work wherever WebAudio works
• Canvas based with customizable rendering size (for retina)
• Modular approach. Easy to use just the Waveform for example
• Quantize selection and looping points to a time interval

Alternatives

• https://github.com/bbc/waveform-data.js Probably better performance-wise, but much bigger in scope. Also missing some more DAW-like features I required.

Usage

Create / Init:

let editor = new SampleEditorView({...})

// ... load / create buffer

editor.buffer = buffer

options

All options can be sent to the constructor in an object, or updated / read later with: editor.props.[propName] = x. Setting a property will also cause a rerendering of the updated part.

| Property | Default | Description | | --------------- |:-------:|----------------------------------------:| | hZoom  | 1 | Horizontal zoom level. In ratio where 1 shows the full duration and 2 show half the duration. | | vZoom  | 2 | Vertical zoom level. A multiplier used when drawing the hight of the waveform. | | offset | 0 | Offset in seconds from where to start reading from the buffer. | | background | '#ddd' | Background color. | | color | '#222' | Foreground color (text and waveform). | | selectBackground | '#222' | Background select color. | | selectColor | '#ddd' | Foreground select color (waveform). | | width | 640 | Width in pixels. Multiply with window.devicePixelRatio and adjust CSS to adopt to retina / high-res. | | height | 320 | Height in pixels. Multiply with window.devicePixelRatio and adjust CSS to adopt to retina / high-res. | | channel | 0 | What buffer-channel to read from. | | resolution | 1 | Level of detail, should be kept between 1-N, where 1 means to draw every pixel and N every N:th pixel | | startPosition | 0 | Position of start marker | | uiZoomStickiness | 0.1 | When panning / zooming, this is used to prevent accidental zooming (when panning). | | duration | 'auto' | What duration to use to determine max pan / offset etc. 'auto' means using the buffer duration. | | loop | true | Show or hide loop markers. | | loopStart | 0 | Start position for loop markers, in seconds. | | loopEnd | 1 | End position for loop markers, in seconds. | | selectStart | 0 | Start position for selection, in seconds. | | selectEnd | 0 | End position for selection, in seconds. | | quantize | 0.0125 | Snapping or quantize duration in seconds. 0.125 would snap to 1/16th note in 120 bpm. | | buffer | null | What AudioBuffer to read from. |

Developing

• Run any dev server or the file system
• yarn build or npm run build - produces production version of SampleEditorView under the dist folder
• yarn dev or npm run dev - produces development version SampleEditorView and runs a watcher
• yarn test or npm run test - runs the to-do-tests :)
• yarn test:watch or npm run test:watch - same as above but in a watch mode

License

• See LICENSE