html5-audio-read-along icon indicating copy to clipboard operation
html5-audio-read-along copied to clipboard

How use it

Open johnfelipe opened this issue 11 years ago • 1 comments

Hello please orientation for use it, with other audio files

johnfelipe avatar Jun 25 '13 02:06 johnfelipe

You can use Audacity's "Labels" feature to get the start and end times for each word in a voice recording. This video shows how to do that. Once you have added labels to the voice recording and exported the labels, you can use the following Python script to read the exported labels file and generate the HTML markup that will work with html5-audio-read-along:

import errno
import os
import sys
from decimal import Decimal

try:
    file_path = sys.argv[1]
except IndexError:
    file_path = 'Label Track.txt'

if not os.path.isfile(file_path):
    raise FileNotFoundError(errno.ENOENT, os.strerror(errno.ENOENT), file_path)

with open(file_path, 'r') as label_file:
    lines = label_file.readlines()
    for line in lines:
        parts = line.rstrip('\n').split('\t')
        start_time = Decimal(parts[0])
        end_time = Decimal(parts[1])
        label = parts[2]
        duration = end_time - start_time

        print(
            '<span data-dur="%s" data-begin="%s">%s</span>' % (
                duration,
                start_time,
                label,
            )
        )

For example, let's say that your exported labels file looks like this:

0.000000	0.131510	The
0.131510	0.363585	quick
0.384859	0.702029	brown
0.702029	1.069482	fox
1.081086	1.375049	jumps
1.375049	1.670945	over
1.670945	1.779248	the
1.779248	2.135097	lazy
2.135097	2.465805	dog

If you save the above Python script in the same folder as the exported labels file and then run the Python script, this is what it will output:

<span data-dur="0.131510" data-begin="0.000000">The</span>
<span data-dur="0.232075" data-begin="0.131510">quick</span>
<span data-dur="0.317170" data-begin="0.384859">brown</span>
<span data-dur="0.367453" data-begin="0.702029">fox</span>
<span data-dur="0.293963" data-begin="1.081086">jumps</span>
<span data-dur="0.295896" data-begin="1.375049">over</span>
<span data-dur="0.108303" data-begin="1.670945">the</span>
<span data-dur="0.355849" data-begin="1.779248">lazy</span>
<span data-dur="0.330708" data-begin="2.135097">dog</span>

ataylor32 avatar Jul 08 '17 17:07 ataylor32