Sync Audio and Text

Sync Audio and Text

The Sync Audio and Text Replacement window allows you to configure a text layer that will highlight the words while an audio file plays in the background (from now on we will call it Synced layer).

Synced layers will not render as images but as real text (be careful because text renders differently in different platforms. It is always a good idea to test the final project in the destination device – check this posting to learn a bit more about how text rendering from Photoshop works with Solar2D:

Select the layer you want to add the Sync feature and click the Sync audio and text replacement. The following window appears:

Information about the current layer content will appear in the top of the window (position and size).

• Use native system font: When enabled, it does not import external font files. it will use the device’s default font, instead the original font used in Photoshop. The benefit of doing that is the fact you will not need to worry importing and testing the original font in the devices. If disabled, Kwik will ask for the font file when publishing (it will be copied and attached to the final build folder).

  External fonts may require some manual input. For more info, read the How to Use Custom Fonts from Solar2D documentation.

  Important: you must have the rights to use an external font. Kwiksher is not responsible for any font used in your projects.

• Padding: space in pixels between words

• Offset: space in pixels between lines

  As the layer content will be exported as real text and devices work with different font settings, it may be a good idea to add some Padding and Offset

Select audio file

it allows you to inform which audio will be used to sync with the text.

• Use page Read Me audio file: When enabled, it will attached the Sync feature to an audio previously checked as “Read to Me” type (more on that at Add Audio).

• Audio: If you are planning to sync with another audio file, select it in the Audio list.

Time Code

• Import from Audacity: sets time codes text file from Audacity

Make sure your label file has the extension .txt in the name (for example: labels.txt will work, labels will not).

Click a row and the following window will appear for editing data entry of each time code:

• Start: the time code time, in milliseconds
• End: the time code time, in milliseconds
• File: is individual audio file for each word. See word clicking below.
• Action: triggers different actions every time a word is highlighted.

the time code time, in milliseconds, for each word, meaning when the audio file “speaks” the word. You must enter the start and end positions.

Your entries must be written using only A-Z/0-9 characters. Tests in some Eastern languages corrupted the project file.

after importing an Audacity file, make sure the table shows all label words and their respective positions, otherwise you may have errors in the final code. Read the Working with Audacity below for more info.

Word clicking

• Enable word clicking

if word clicking is not enabled, the field File will become empty. This is to avoid automatic entry of Eastern languages that may corrupt the project file (XML is not compatible with them).

In order to facilitate this process, you can use Audacity (free software) to set labels and time codes to be imported into Kwik. If you do it, simply click the Import from Audacity button and import your label file.

it allows users to click words and hear individual audio files for each word (an auto animation happens also when you click the word). If you enable this, besides having the audio file containing the full text content, you must have individual files for each word.

For example, if your text is “I love you”, you will need 3 files: “i.mp3”, “love.mp3” and “you.mp3” in the same project folder (Kwik will import them automatically).

If you are creating a multilingual project and the text “I love you” is set to appear only in English selection (considering you set English language ID as “en”), you audio files must be named “en_i.mp3”, “en_love.mp3” and “en_you.mp3”.

• only mp3 file format is accepted with this feature.
• each file name is lower case

In the example above, the words “my”, “father” and “nice” will be highlighted and will play their independent audio files when pressed. The word “is” will not be considered a “word clicking” area because its file was set to blank (meaning it does not have an independent audio to be played when pressed).

Other settings

• This language reads right to left checkbox

  If enabled, it will prepare the Sync feature to work with non-standard Western languages.

• Text highlight color

  it captures the color to be used when the words highlight. Enter the RGB value or use the button to capture a color from your computer color picker.

• Show Play button

  when enabled, will show an audio icon at the side of the text. Clicking the button will start the narration/sync. This is a good option to test the project when the correct buttons to start the sync are not created yet.

If you plan to use your own button to start the Sync, make sure its layer is BELOW the Synced (the layer with the text) layer.

Working with Audacity

The steps below usually work for other applications as well:

1. Open the audio application

2. Open the audio file with the spoken text to be used in Kwik

3. Using the mouse, select part of the wave (this is a manual step and may be repetitive until you correctly select the word you want) for the first word

4. You may manually take note of the start and end position (see bottom of the interface) or (preferable), click Ctrl+B (Cmd+B on Mac).

   You will see a Label Track created, allowing you to enter a label for the selection. Enter the word just spoken. If you are using the Enable word clicking feature, write the word without ANY punctuation or accent. For example, if your work is trés! write the label as tres.

5. Repeat the steps until the entire words are captured

6. When completed, go to File, Export Labels… and save the file into your project folder

Please check Read To Me tutorial