katspaugh/wavesurfer.js — pull request #116 by mwise (2014-02-10 05:06:39+00:00)
Title: Selection/Looping via click-drag

This PR adds "click-and-drag-to-select" functionality to Wavesurfer instances. This seemed like an almost universally useful feature so I rolled it right into the base Wavesurfer prototype. The selection is drawn via click-drag into a new canvas in the drawer, and cleared via double-click. The selection color is configurable via a `selectionColor` param.

I added a "loop playback inside the current selection" feature, as this was the original motivation for the selection feature. It's set via the loopSelection param and is disabled by default. The looping uses a set of two markers to determine the loop points for the audio buffer source node. One thing to note is that Backend.getCurrentTime() behaves differently if the current playback was started in a looping state. This was the trickiest part of this feature to get right, since the Web Audio API doesn't provide a callback for when an audio buffer source node reaches its loopEnd and loops back. See https://github.com/WebAudio/web-audio-api/issues/267 for a detailed explanation of why this event would be problematic. I've seen a few bugs with extremely short loop selections, but I'm not sure they are fixable given the lack of the loop event. It works really well most of the time, but occasionally the cursor will keep progressing while the audio loops - the specified loop points are always respected by the actual audio produced, however.

tldr for previous paragraph; the loopSelection feature uses a sub-optimal Marker.on("reached") scheme to handle looping.

@katspaugh, can you take a look at this and let me know if you think anything is awry or needs tweaking? I've updated the README but you'll need to set `loopSelection` to true in the example implementation to see the looping in action. I've tried to match your code style, but it's different than my normal style, so please excuse any style mixups.

Cheers,
Mark