Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Syncatore
// Event that triggers as soon as the user syncs the first line.
// It will send the id of the track (subtitle).
syncatore.app.bind('onSyncStarted', function(id) {});
// Event that triggers as soon as the user has finished syncing all the lines and reached the last line.
// The data object sent has two properties: id and lyrics (the JSON object of the synced lyrics)
syncatore.app.bind('onSyncFinished', function(data) {});
// Event that triggers as soon as the user exists the sync mode or the playback is stopped.
// It will send the id of the track (subtitle).
syncatore.app.bind('onSyncStopped', function(id) {});
// Event that triggers as soon as the media playback is paused and the user is in sync mode.
// It will send the id of the track (subtitle).
syncatore.app.bind('onSyncPaused', function(id) {});
// Load a subtitle in JSON format
syncatore.load(subtitle_id, subtitle_JSON)
// Toggle syncing mode on and off
syncatore.app.toggleSyncing()
syncatore.app.startSyncing()
syncatore.app.stopSyncing()
// Sync the next line
// basically this is the function called when you press
// the down arrow button. You could bind it to a click event of a button
syncatore.app.sync()
// Undo the last synced line
// basically this is the function called when you press
// the left arrow button. You could bind it to a click event of a button
syncatore.app.undo()
// Turn the scrolling of the lyrics container on and off
syncatore.app.startScrolling()
syncatore.app.stopScrolling()
// For connecting the syncatore to a media player the following methods need to be overridden
syncatore.player.play = function() {
// Code that triggers the play function of the media player
};
syncatore.player.isPlaying = function() {
// Code that returns the player's state as a boolean (true if the player is playing, false if not)
};
syncatore.player.getPosition = function() {
// Code that returns the player's position in seconds as a float (eg. for 12650 miliseconds return 12.65)
}
syncatore.player.seek = function(seconds) {
// Code that changes the position of the player.
}
// The following methods need to be called for notifying the player of different events
// Method for notifying the player that the playback state changed. It accepts 'playing', 'paused' and 'stopped'
syncatore.player.stateChanged(state)
// Method for notifying the player that the position changed. It accepts the new position in seconds as float
syncatore.player.positionChanged(seconds)
<!-- Reference the needed JS and CSS files. The syncatore has as dependencies the following JS libraries -->
<script src="lib/js/jquery-min.js"></script>
<script src="lib/js/jquery-ui-custom-min.js"></script>
<script src="lib/js/underscore-min.js"></script>
<script src="lib/js/backbone-min.js"></script>
<script src="build/js/sync.js"></script>
<link rel="stylesheet" href="build/css/sync.css" />
<!-- Require the syncatore in your javascript code like this and it will expose the syncatore object -->
require('sync');
<!-- Add the following HTML code in your page which is needed for rendering the lyrics list -->
<section id="syncTool">
<section class="lyrics">
<ol>
</ol>
</section>
<script id="lyric-template" type="text/template">
<div class="controls">
<span class="buttons">
<a class="play" href="#play" title="Play from here">►</a>
<a class="add" href="#add" title="Add new line">+</a>
<a class="remove" href="#remove" title="Remove this line">-</a>
</span>
<span class="time">
<input name="minutes" type="number" value="{{ time.minutes }}" />
<input name="seconds" type="number" value="{{ time.seconds }}" />
<input name="hundredths" type="number" value="{{ time.hundredths }}" />
</span>
</div>
<div class="text normal">{{ text }}</div>
</script>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment