Skip to content
This repository was archived by the owner on Jul 17, 2018. It is now read-only.

Tutorial

Jump to bottom
ShadowFan-X edited this page Nov 19, 2014 · 3 revisions

This tutorial will walk you through the task of creating a basic SPC player.

(This tutorial is under construction and therefore incomplete.)

The script

First off, you’ll need the following files from the bin, and they should be in the same folder:

  • imospc.js
  • imo-fl.swf
  • imo-w-unzip.js
  • imo-w-spc.js

And then you need to add the script to your HTML file’s <head> section, like so:

<script type="text/javascript" src="url/to/imospc.js"></script>

Preparing

Add a new script to your HTML’s <head>:

<script type="text/javascript">
    function onInitOk(evt) {
        // ...
    }

    function onInitError(evt) {
        // ...
    }

    function onLoadOk(evt) {
        // ...
    }

    function onLoadError(evt) {
        // ...
    }

    function onPlayStateChange(evt) {
        // ...
    }

    ImoSPC.addEventListener('init', onInitOk);
    ImoSPC.addEventListener('load', onLoadOk);
    ImoSPC.addEventListener('initerror', onInitError);
    ImoSPC.addEventListener('loaderror', onLoadError);
    ImoSPC.addEventListener('playstatechange', onPlayStateChange);
</script>

The event listeners will be implemented later.

For completeness, add an empty <style> tag to your <head>. It will also be used later.

The UI

For this tutorial, jQuery and jQuery UI will be used. (jQuery and jQuery UI were chosen here for simplicity. Feel free to substitute them for whatever frameworks you want. You can even use no frameworks if that’s what you like.)

If you are completely new to jQuery UI, you might wish to read this tutorial first.

To use jQuery UI, you need the following scripts and stylesheet in your document’s <head> section:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Now you need a UI. Add this to your document’s <body> section:

<!-- #nowPlaying will contain the title of the playing track. -->
<div class="ui-widget-header ui-corner-top">Now Playing: <span id="nowPlaying">(nothing)</span></div>
<table class="ui-widget-header ui-corner-all" display="inline: block">
  <tr>
    <td class="btngroup">
      <!-- These are the playback buttons. -->
      <button id="first">First</button>
      <button id="previous">Previous</button>
      <button id="play">Play</button>
      <button id="stop">Stop</button>
      <button id="next">Next</button>
      <button id="last">Last</button>
    </td>
    <td style="width: 100%">
      <!-- This is the seek bar. -->
      <div id="seek">
        <span class="timer" id="now">0:00</span>
        <span class="timer" id="length">0:00</span>
      </div>
    </td>
    <td class="btngroup">
      <!-- This is the volume control. -->
      <span class="ui-icon ui-icon-volume-on volicon"></span>
      <div id="volume"></div>
    </td>
  </tr>
</table>

You need an error dialog, too:

<!-- insert dialog here -->

Now, you are ready to invoke jQuery UI. Add the following to your <script>, in the global scope:

$(function() {
    setupButtons();
    setupSeekBar();
    setupVolumeSlider();
    setupDialog();
});

function setupButtons() {
    // ..
}

function setupSeekBar() {
    // ..
}

function setupVolumeSlider() {
    // ..
}

function setupDialog() {
    // ..
}
Clone this wiki locally