MediaAlignedText Editor Demo

HTML for the Editor Demo

<link type="text/css" href="css/skin/jplayer.blue.monday.css" rel="stylesheet" />
<link type="text/css" href="css/mediaAlignedText.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mediaAlignedText.js"></script>
<script type="text/javascript" src="js/jquery.mediaAlignedTextEditor.js"></script>

<div id="mat_init">
    <div>
        <label for="mat_media_url">Media URL</label>
        <input type="text" id="mat_media_url" value ="media_files/hobbit-1a.mp3"/>
    </div>
    <div>
        <label for="mat_media_file_type">Media File Type</label>
        <select id="mat_media_file_type">
            <option value="mp3">mp3</option>
        </select>
    </div>
    <div>
        <label for="mat_init_type">Text Initialization Type</label>
        <select id="mat_init_type">
            <option value="WORD">Plain Text - Create Word Segments</option>
            <option value="LINE">Plain Text - Create Line Segments</option>
            <option value="SENTENCE">Plain Text - Create Sentence Segments</option>
            <option value="STANZA">Plain Text - Create Stanza Segments</option>
            <option value="TAGGED">Text Already Segmented and Tagged</option>
        </select>
    </div>
    <div>
        <label for="mat_text_input">Text</label><br />
        <textarea id="mat_text_input" rows="5" cols="50">[INPUT TEXT HERE]</div>
    <button onclick="
        $('#mat_init_alignment').hide('200');
        $('#mat_editor').show('200')
        $('#jquery_jplayer_1').mediaAlignedTextEditor({
            'url': $('#mat_media_url').val(),
            'file_type': $('#mat_media_file_type').val(),
            'text_init_type': $('#mat_init_type').val(),
            'text': $('#mat_text_input').val()});;">Intialize Alignment</button>
            
</div>

<div id="jquery_jplayer_1"></div>
<div id="mat_jplayer_controls"></div>
<div id="mat_editor"></div>