Syncatore

syncatore_events.js

// 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) {});

syncatore_methods.js

// 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()

syncatore_player_interface.js

// 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)

syncatore_setup.html

<!-- 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>