Editor States

Initial config of the playlist is passed via the 'state' property on the config object. It can be one of:

var config = {
    state: (cursor|select|fadein|fadeout|shift)
};

All tracks in the playlist will be in the same state at any given time. The playlist state must be changed to transition to the behaviour of another state. By default every state is enabled for each track in the playlist. You can disable certain states on individual tracks incase there is a use case where an action is not wanted on a particular track.

===

1 One example could be keeping a beat track stationary in 'shift' mode, while enabling movement in time for all other tracks in the playlist.

var tracks = [
    {
        src: "beat_track..."
        states: {
            shift: false
        }
    }
];

===

2 Another example would be for setting fade in and fade out between two tracks. The below track states would disable fadein and time movement but allow fadeout on the first track, while the second track can have its fade in set and be moved in time relative to the first track but not have a fade out set.

var tracks = [
    {
        src:"../media/Legend.mp3",
        states: {
            fadein: false,
            shift: false
        }
    },
    {
        src:"../media/Outside.mp3",
        states: {
            fadeout: false
        }
    }
];

===

By providing markup like below within the playlist container passed to the config option, the editor will automatically manage switching editor states for you when a user clicks these buttons. (Styling is left to you)

<div>
    <span class="btn-cursor data-state="cursor"></span>
    <span class="btn-select" data-state="select"></span>
    <span class="btn-shift" data-state="shift"></span>
    <span class="btn-fadein" data-state="fadein"></span>
    <span class="btn-fadeout" data-state="fadeout"></span>
</div>

===

Cursor

A single time point can be selected on mouse click on the track. When the track is played, playback will resume from this point in time until the end of the track.

Select

A single time point or range (selection) of time can be selected by mouse click or click and drag on the track. Shift + click will increase or decrease the existing selection on the track. When the track is played, playback will start from the first point in time and either go to the end of the track or the end of the selection.

Fade In

When a track is clicked, a fade in is created from the beginning of the track until the point which the track has been clicked. Fade type is based on the config 'fadeType' property and can be one of either (linear|logarithmic|exponential|sCurve).

Fade Out

When a track is clicked, a fade out is created from the end of the track back until the point which the track has been clicked. Fade type is based on the config 'fadeType' property and can be one of either (linear|logarithmic|exponential|sCurve).

Shift

On click and drag a track is shifted in time until mouse up. This is used to reposition the starting time of a track relative to another track in the playlist.