react-studiojsJS
features
Record track,
cut,
split,
shift track,
CRUD operations for Annotations,
save to local storage(optional)
Browser Support
react-studiojs requires webaudio in the browser to function correctly: Can I Use?
Installation
npm i react-studiojs
Basic Usage
https://github.com/TareqFl/react-studiojs-example
import ReactStudio from "react-studiojs";
const actions = [
{
class: "fas.fa-play",
title: "Play Annotation",
action: (annotation) => {
ee.emit("play", annotation.start, annotation.end);
},
},
{
class: "fas.fa-plus",
title: "Insert New Annotation",
action: (annotation, i, annotations, opts) => {
if (i === annotations.length - 1) {
return console.log("not possible");
}
let newIndex = i + 1;
const newAnnotation = {
id: String(newIndex),
start: annotation.end,
end: annotations[i + 1].start,
lines: ["New Draft"],
lang: "en",
};
annotations.forEach((ann, indx) => {
if (indx >= newIndex) {
return (ann.id = String(indx + 1));
}
});
annotations.splice(i + 1, 0, newAnnotation);
},
},
{
class: "fas.fa-trash",
title: "Delete annotation",
action: (annotation, i, annotations) => {
annotations.splice(i, 1);
},
},
];
var playlist = ReactStudio({
samplesPerPixel: 3000,
mono: true,
waveHeight: 70,
container: document.getElementById("playlist"),
state: "cursor",
colors: {
waveOutlineColor: "#222B36",
timeColor: "grey",
fadeColor: "black",
},
controls: {
show: true,
width: 175,
widgets: {
collapse: false,
},
},
annotationList: {
annotations: [],
controls: actions,
editable: true,
isContinuousPlay: false,
linkEndpoints: false,
},
zoomLevels: [500, 1000, 3000, 5000],
});
playlist
.load([
{
src: "track 1 source",
name: "name",
gain: 1,
},
{
src: "track 2 source",
name: "name",
start: 8.5,
fadeIn: {
duration: 0.5,
},
fadeOut: {
shape: "logarithmic",
duration: 0.5,
},
},
])
.then(function () {
});
Playlist Options
var options = {
ac: new (window.AudioContext || window.webkitAudioContext)(),
container: document.getElementById("playlist"),
sampleRate: new (
window.AudioContext || window.webkitAudioContext
).sampleRate(),
samplesPerPixel: 4096,
mono: true,
exclSolo: false,
fadeType: "logarithmic",
timescale: false,
controls: {
show: false,
width: 150,
widgets: {
muteOrSolo: true,
volume: true,
stereoPan: true,
collapse: true,
remove: true,
},
},
colors: {
waveOutlineColor: "white",
timeColor: "grey",
fadeColor: "black",
},
waveHeight: 128,
barWidth: 1,
barGap: 0,
state: "cursor",
seekStyle: "line",
zoomLevels: [512, 1024, 2048, 4096],
isAutomaticScroll: false,
annotationList: {
annotations: [],
editable: false,
controls: [
{
class: "fa.fa-minus",
title: "Reduce annotation end by 0.010s",
action: (annotation, i, annotations, opts) => {
},
},
],
isContinuousPlay: false,
linkEndpoints: false,
effects: function (masterGainNode, destination, isOffline) {
if (!isOffline) masterGainNode.connect(analyser);
masterGainNode.connect(destination);
},
},
};
Track Options
{
src: 'track source .mp3 .wav',
name: 'name',
gain: 1,
muted: false,
soloed: false,
start: 8.5,
fadeIn: {
shape: 'logarithmic',
duration: 0.5,
},
fadeOut: {
shape: 'logarithmic',
duration: 0.5,
}
cuein: 15,
cueout: 30,
customClass: 'vocals',
waveOutlineColor: '#f3f3f3',
states: {
cursor: true,
fadein: true,
fadeout: true,
select: true,
shift: true,
},
selected: {
start: 5,
end: 15,
},
stereoPan: 0,
effects: function(graphEnd, masterGainNode, isOffline) {
var reverb = new Tone.Reverb(1.2);
Tone.connect(graphEnd, reverb);
Tone.connect(reverb, masterGainNode);
return function cleanup() {
reverb.disconnect();
reverb.dispose();
}
}
}
Playlist Events
react-studiojs uses an instance of event-emitter to send & receive messages from the playlist.
import EventEmitter from "event-emitter";
import ReactStudio from "react-studiojs";
var playlist = WaveformPlaylist(
{
container: document.getElementById("playlist"),
},
EventEmitter()
);
var ee = playlist.getEventEmitter();
An example of using the event emitter to control the playlist can be found in /dist/js/examples/emitter.js
Events to Invoke
event | arguments | description |
---|
play | start:optional, end:optional | Starts playout of the playlist. Takes optional Number parameters in seconds start and end to play just an audio segment. start can be passed without an end to play to the end of the track. |
pause | none | Pauses playout of the playlist. |
stop | none | Stops playout of the playlist. |
rewind | none | Stops playout if playlist is playing, resets cursor to the beginning of the playlist. |
fastforward | none | Stops playout if playlist is playing, resets cursor to the end of the playlist. |
clear | none | Stops playout if playlist is playing, removes all tracks from the playlist. |
record | none | Starts recording an audio track. Begins playout of other tracks in playlist if there are any. |
zoomin | none | Changes zoom level to the next smallest entry (if one exists) from the array zoomLevels . |
zoomout | none | Changes zoom level to the next largest entry (if one exists) from the array zoomLevels . |
trim | none | Trims currently active track to the cursor selection. |
cut | none | cuts currently active track to the cursor selection. |
split | none | split currently active track |
statechange | cursor / select / fadein / fadeout / shift | Changes interaction state to the state given. |
fadetype | logarithmic / linear / sCurve / exponential | Changes playlist default fade type. |
newtrack | File | Loads File object into the playlist. |
addAnnotation | json | adds Annotations for current playlist. |
clearAnnotations | none | clears loaded annotations. |
volumechange | volume, track | Set volume of track to volume (0-100) |
mastervolumechange | volume | Set a new master volume volume (0-100) |
select | start, end, track:optional | Seek to the start time or start/end selection optionally with active track track . |
startaudiorendering | wav / buffer | Request for a downloadable file or web Audio buffer that represent the current work |
automaticscroll | true /false | Change property isAutomaticScroll . |
continuousplay | true /false | Change property isContinuousPlay . |
linkendpoints | true /false | Change property linkEndpoints . |
annotationsrequest | none | Requests to download the annotations to a json file. |
stereopan | panvalue, track | Set pan value of track to panvalue (-1-1) |
Events to Listen to
event | arguments | description |
---|
select | start, end, track | Cursor selection has occurred from start to end with active Track track . |
timeupdate | playbackPosition | Sends current position of playout playbackPosition in seconds. |
scroll | scrollLeft | Sends current position of scroll scrollLeft in seconds. |
statechange | state | Sends current interaction state state . |
shift | deltaTime, track | Sends deltaTime in seconds change for Track track |
mute | track | Mute button has been pressed for track |
solo | track | Solo button has been pressed for track |
enableCut | boolean | Emits a boolean value when a region is made (optional) |
enableSplit | boolean | Emits a boolean value to enable split (optional) |
removeTrack | track | Remove button has been pressed for track |
removeTrackFromDb | track | Event listener to remove track from local storage (opotional)track |
saveTracksToLocalStorage | track | Event listener for track update and save to local storage (optional) track |
saveToLocalFromSplit | track | Event listener for track update on split and save to local storage(optional)track |
getTrackDuration | playlist duration | Event listener for playlist duration. |
newTimeDurationAfterEdit | playlist duration | Event listener for playlist duration after edit. |
changeTrackView | track, opts | Collapse button has been pressed for track |
volumechange | volume, track | Volume of track has changed to volume (0-100) |
mastervolumechange | volume | Master volume of the playlist has changed to volume (0-100) |
audiorequeststatechange | state, src | Loading audio src (string or File ) is now in state (Number) UNINITIALIZED = 0, LOADING = 1, DECODING = 2,FINISHED = 3, |
loadprogress | percent, src | Loading audio src has loaded percent percent (0-100) |
audiosourcesloaded | none | Audio decoding has finished for all tracks |
tracksUpdated | boolean | Event Listener when tracks are loaded that recieves a bool. |
audiosourcesrendered | none | Tracks are rendered to the playlist |
tracksLeft | none | Tracks remaining in the playlist. |
audiosourceserror | err | Error thrown while loading tracks |
finished | none | Event fired when cursor ( while playing ) reaches the end (maximum duration) |
audiorenderingstarting | offlineCtx, setUpPromiseArray | Event fired after the OfflineAudioContext is created before any rendering begins. If any setup is async before offline redering, push a promise to the setUpPromiseArray. |
audiorenderingfinished | type, data | Return the result of the rendering in the desired format. type can be buffer or wav and can be used to dertermine the data type. When type is wav , data is a blob object that represent the wav file. |
stereopan | panvalue, track | Pan value of track has been changed to panvalue |
Tests
npm test
Development without example changes
npm install && npm start
This will install dependencies and start the webpack server.
npm install && npm run dev
This will build and watch the jekyll site and startup the webpack dev server.
License
MIT License