Skip to content
Code Keyframes is a tool for running JS at specific frames of an audio track.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.gitignore
.nvmrc
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

Code Keyframes

A browser based tool for running JavaScript code at specific frames of an audio track. This is useful for creating interactive music videos, making subtitles, or anything else where audiovisual synchronization is required.

Demo

Minimal Demo

How-To

  1. Include the js file and the css file from the repository:
  1. Initialize an instance of CodeKeyframes:
var ckf = new CodeKeyframes({
  audioPath:     'audio/yourMusic.mp3',
  editorOpen:    true,
  waveColor:     '#3AEAD2',
  progressColor: '#0c9fa7',
  bgColor:       '#222',
  label:         'Text that appears at the top left of the waveform.',
  keyframes:     [], // paste in after exporting keyframes
  autoplay:      false, // doesn't always work due to browser limitations
  onCanPlay:     function(){
    // playback can start now
    // call this to start playback:
    // ckf.wavesurfer.play()
  }
})
  1. Write your keyframes in the browser. The tool is keyboard controlled. See controls below.

  2. Click EXPORT KEYFRAMES and paste the resulting code as your keyframes array from when you initialized the instance. This saves your keyframes out of localStorage and into a variable.

  3. Change editorOpen to false and your keyframes will still run while only showing the audio waveform without the editor.

Controls

Make sure you click the waveform before using keyboard controls. This choice was to avoid adding event listeners to the entire page, to prevent overlap with any other controls that you might use on the page.

Left & Right : Move playhead
Shift + Left or Right : Nudge playhead
Up & Down : Zoom waveform
Space : Play / Pause
Enter : Add keyframe
Page Up & Page Down : Jump between keyframes
[ and ] : Jump between keyframes
Alt + Left or Right : Nudge active keyframe

Acknowledgements

This tool relies hugely on Wavesurfer. Big thanks to katspaugh for their work on it.

The repository build structure is based on Net Art Starter by me Donald Hanson. You can learn more about the structure and use it yourself.

You can’t perform that action at this time.