Web Audio Sampler v2
This interactive Web Audio sampler loads audio files from a GitHub repository or the user’s local machine, displaying the waveform as an SVG path rendered with d3.line. Users can click the timeline to start playback, shift-click to place up to nine custom cue markers, and use number keys to jump to cues. The code uses d3.v4 for scales, event handling, and transitions, while the Web Audio API handles audio decoding, buffer sources, and looping. A red position line and hover line animate to show playback progress, with looping controlled by a checkbox.
AI-generated descriptionThis is a continuation of a <a href="http://bl.ocks.org/alexmacy/5e4b763bf399027de8c110086c74eba0">previous sampler/sequencer</a> built using the Web Audio API. This time with some added features to make it a more useful tool. Most significantly, additional samples can be loaded and the cues can be customized. I also started <a href="https://github.com/alexmacy/loops">a repository</a> for storing loops (I'd love it if other people wanted to add to it!)
Changing the sample:
- Choose from the dropdown menu on the left. The options are the files in the <a href="https://github.com/alexmacy/loops">the loop repository</a> mentioned above.
- Load a local file client-side.
- For best results, use .mp3, .ogg, or .wav file formats.
- File size doesn't seem to be much of an issue when loading files client-side, though I haven't loaded tracks longer than about 15 minutes....
Customizing the cues:
- Shift+click places a custom cue along the timeline. (cues are limited to 1-9)
- The 'Clear Cues' button removes existing cues, including any of the default cues that are placed when the sample is loaded.
Other updates:
- The checkbox at the top right toggles looping.
- Clicking the timeline starts the audio from the location of the click.