Creation of subtitles
Lesson 07: Subtitles Editor (YouTube)
The following priorities were taken in consideration when creating the subtitle editor for WorkAudioBook application:
- Maximum efficiency with an available ready-made text;
- Ease conversion of web pages (HTML files) into subtitle files and support of the most common subtitle format (STR);
- The ability to simultaneously study with application according to Learning Methodology and creation of subtitles.
Example of creation of subtitles
To create subtitles we need a book both in MP3 and text formats.
Let’s take O Henry’s "The Gift of The Magi" short story, read by LibriVox volunteers, as an example.
To download MP3 file right click on the link
and choose "Save", then save MP3 under the "5belovedstoriesbyohenry_1_henry.mp3" name.
Save the web page with the text of the story the same way
in the same folder as MP3 file under the "5belovedstoriesbyohenry_1_henry.html" name.
Open the MP3 file in WorkAudioBook application.
Then click "Show" button and choose "Subtitles editor".
The main window of the application will expand and the editor will appear below.
It will contain the text of the web page "5belovedstoriesbyohenry_1_henry.html"
(the application managed to find it as we’ve given it the same name as to MP3 file and placed it into the same folder).
The other, simplest way to load text is to use Import button.
STEP 1. Press "Space" key or "Play Selection" button to listen to the first phrase in the book.
In my case the reader said "Chapter 1 of a Five Beloved Stories By O. Henry".
Scroll the editor down to this phrase in the text. Place cursor in the beginning of the phrase.
STEP 2. By pressing "B" key or "More" button repeatedly select this phrase in the text.
STEP 3. If you have "AutoAdd" mode turned on – press "N" key or "Play Next" button to listen to the next phrase.
At this stage the selected text and selected sound will be bound together, creating the first subtitle.
Subtitle's text will be marked by a green color and two small triangles appear in the beginning and the end of the text.
A bracket appears above the sound of the subtitle on the waveform diagram. The cursor jumps into the beginning of the next phrase.
NEXT. Then we hear the next phrase "This is a LibriVox recording" and are ready to press "B" key or "More" button to select the text of the next subtitle.
Try to add a few more subtitles and then save your work by pressing "Ctrl S" keys or "Save" button.
The application will not ask you for a file name – it will save the information about the subtitles into the same "5belovedstoriesbyohenry_1_henry.html" HTML file.
It is possible to do so as WorkAudioBook HTML format is fully compatible with ordinary web pages format.
As you can see, if you have a ready-made text, the creation of subtitles within the application is a fast and efficient process.
As Learning Methodology suggests,
it’s better not to see the text while listening to an audiobook. "Invisible Mode" button allows us to follow this rule
and create subtitles at the same time. This button hides a text after the last subtitle (turns it into a white color)
and we can see the text only when we start to select it.
Then how is it possible to create subtitles? Just the same way.
Listen to the selected phrase, place the cursor in the beginning of the invisible text and press "B" key or "More" button.
The selected text becomes visible and this allows you to control that you’ve chosen the exact part of the text needed.
Let’s have a look at the other buttons of the editor.
"Import" button. With this command usually all work starts!
It shows window with a lot of options to import text or subtitles into the editor.
The simplest option: copy text in MS Word or Adobe Acrobat and paste it with the help of "Plain Text" button.
After import a file with the name as MP3 file and "html" extension is created.
Since the current version of the editor is tuned up for the creation of the subtitles, but not text editing,
the text should be finalized prior to being imported into the application. Also, if you wish to have headings or formatting tags
in your text – they all should be added with text editor or better with HTML editor. There are several free HTML editors,
for example, "KompoZer" kompozer.net.
If you chose to use "KompoZer" then start by choosing "Tools" on the menu bar, then "Options".
In the pop-up window, in the "General" section uncheck "Use CSS styles instead of HTML elements and attributes". Then press "OK".
"Reload file from disk" button or "Ctrl R" keys. If you happen to notice any errors in your text – save all the current changes
in WorkAudioBook application, switch to text or HTML editor, open and correct the text, save it, switch back to the WorkAudioBook
and press "Reload file from disk". Or use the "Edit source text" button, see below.
"AutoAdd" button. Autoadding mode adds subtitles automatically, when you move to another fragment of the
audio file with "Select First Phrase", "Select Previous Phrase", "Play Nonstop", "Play Next", "Select Next Phrase" or
"Select Last Phrase" buttons. To have the subtitle added, all the below conditions should be met:
- Selected fragment of the audio file should not intersect with another subtitle;
- The text should have a selected area and this area should not intersect with other subtitles;
- The borders of the selected area of the text should not be inside of the tags (in other words between < and > symbols).
"Add" button or "Insert" key – adds a new subtitle, without moving to another fragment of the audio.
The same conditions as for autoadding should be met.
"Delete" button or "Delete" key – deletes subtitles in the selected area of the text. Text remains, only connection between text and audio is erased.
"Shift time" button or "Ctrl T" keys – shifts the current subtitle and all after it for a specified time. This function is needed,
when you have a ready-made subtitles file, but the time of subtitles are shifted relative to the audio file.
"Less" ("V" key) and "More" ("B" key) – decrease or increase text selection by words.
You can also select the text with a mouse or by holding "Shift" key, but the above buttons have an additional logic,
which allows them to handle text more efficiently. So I would recommend to use them.
"Decrease till punctuation" ("G" key) and "Increase till punctuation" ("H" key) - are
faster brothers of buttons "Less" and "More".
"Font size" drop-down list - just changes the font size of the editor and has no effect on what the subtitles will be.
"Edit source text" button or "F2" key - allows you to make simple edits of the text without leaving the editor.
In edit mode most functions of the editor are not available, therefore, to continue add subtitles, press this button again.
As you may notice apart from the text there are also HTML tags in HTML file – for example - "<p>", "<em>" or "<br/>".
It would be a logical question to ask whether they would affect the created subtitles?
Yes, they will and this is another advantage of this editor. The basic HTML tags that are reasonable to use are taken into account. Let’s list them:
|<h1>..</h1>, <h2>..</h2>, .. <h6>..</h6>
||Create headings of 1, 2 .. 6 levels, forming the audiobook’s table of content
|<br /> and other (<td>, </td>, <th>, </th>)
|<p>, </p>, <div>, </div>, <li>, </li> and other block elements of HTML
||New paragraph (or two line breaks)
It doesn’t matter whether the tag is inside or next to a subtitle – the application will take it into account.
"WorkAudioBook HTML" format
The internal subtitle format of the application is fully compatible with HTML format.
Subtitles inside the HTML file are represented as text fragments enclosed into HTML comments of the below format:
<!--audio start="hh:mm:ss.fff" end="hh:mm:ss.fff"-->subtitle text<!--/audio-->
Here "hh:mm:ss.fff" means time (hh – hours, mm – minutes, ss – seconds, fff – milliseconds).
<!--audio start="00:00:00.000" end="00:00:05.206"-->Chapter 1 of a Five Beloved Stories By O. Henry<!--/audio-->
means that we have subtitle with text "Chapter 1 of a Five Beloved Stories By O. Henry" bound to the audio file from
0 second to 5 second 206 millisecond.
What is next:
How to use the application: