Introduction
For my WaveSurfer-WP audio player WordPress plugin, I wanted to have a marker system, which could allow to add clickable buttons on a webpage to set the player cursor at a dedicated timecode.
The main idea was to be able to mark certain chapters, for audio podcasts and audio stories, for example.
I wanted the system to be the more flexible possible, so I push the thing further and… you can now use this marker system for interactive transcripts!
On the following example, you will see various integration examples of this exciting feature.
TED.com doesn’t provide native ways to download subtitles, so they were downloaded thanks to the Ted 2 SRT website, and adjusted with the great SubtitleEdit open source software.
Basic Usage
04:05.15 timecodes.You can put the wavesurfer-marker HTML/CSS class on any element to create a marker. Style customization (design integration) is up to you.
Then you can add attributes to specify your markers info.
| Attribute | Type | Default | Requirement | Action |
|---|---|---|---|---|
data-start |
Number (seconds) | 0 | required | define marker start position |
data-end |
Number (seconds) | 0 | optional | define marker end position |
data-stop |
Boolean (“true”) | “false” | optional | define if audio has to stop at regions end |
data-autoplay |
Boolean (“true”) | “true” | optional | define if audio has to be played if marker is clicked |
data-id |
Number (id) | 1 | optional | define a particular player target for the marker (use it if there is several players on your page) |
data-id attribute, just like for pages with only one WaveSurfer-WP player.Simple Markers
This is the most basic usage. You only need to add the wavesurfer-marker class and a data-start attribute.
- 0:17: Introduction
- 2:28: Core
- 3:48: Home Building Metaphor
<ol> <li><span class="wavesurfer-marker" data-start="17">0:17</span>: Introduction</li> <li><span class="wavesurfer-marker" data-start="128">2:28</span>: Core</li> <li><span class="wavesurfer-marker" data-start="228">3:48</span>: Home Building Metaphor</li> </ol>
.wavesurfer-marker {
color: #4444F0;
}
.wavesurfer-marker:hover {
cursor: pointer;
text-decoration: underline;
}
In this case, the class is adding to a simple span surrounding a timecode, but you can put it on a button, just like in this post featured image.
Interactive Transcripts and Lyrics
Concept
Having the full transcript of an audio track on a web page is very nice for several reasons:
- SEO friendly: search engine will be able to know what is said in your audio
- Users can read the text as they would read an article
- Users can perform quick search on the web page to find a particular word in the text
On Ted.com, for the conferences, and on Deezer, for lyrics, this transcript are interactive: you can click on certain sentences, or group of words, and it will put the audio play cursor at the desired place. Very cool!
I wanted to have such system for WaveSurfer-WP, and after few tests I realize that my marker system could do the job!
Subtitles Conversion
Most transcripts with time informations are created and shares as subtitles. As SRT subtitles are the most common subtitles format, I coded a SRT to WaveSurfer-WP Markers converter. This tool allow users to convert their SRT into HTML paragraphs with WaveSurfer-WP Markers. They can then put the results in their WordPress article.
It features several options to customize the output. As it is shared on CodePen, you can fork it to put the customization even further if needed.
Demo
Here is the sound and an extract of its interactive transcript based on its SRT subtitles.
I’m here today to talk about the two ideas that, at least based on my observations at Khan Academy, are kind of the core, or the key leverage points for learning.
And it’s the idea of mastery and the idea of mindset.
I saw this in the early days working with my cousins.
A lot of them were having trouble with math at first, because they had all of these gaps accumulated in their learning.
And because of that, at some point they got to an algebra class and they might have been a little bit shaky on some of the pre-algebra, and because of that, they thought they didn’t have the math gene.
Or they’d get to a calculus class, and they’d be a little bit shaky on the algebra.
I saw it in the early days when I was uploading some of those videos on YouTube, and I realized that people who were not my cousins were watching.
(Laughter)
And at first, those comments were just simple thank-yous.
I thought that was a pretty big deal.
<div id="wavesurfer-transcript-#1" class="wavesurfer-transcript"> <p><span class="wavesurfer-marker" data-start="17.124" data-end="20.05">I'm here today to talk about the two ideas that,</span> <span class="wavesurfer-marker" data-start="20.073" data-end="22.431">at least based on my observations at Khan Academy,</span> <span class="wavesurfer-marker" data-start="22.456" data-end="26.334">are kind of the core, or the key leverage points for learning.</span></p> <p><span class="wavesurfer-marker" data-start="26.358" data-end="28.374">And it's the idea of mastery</span> <span class="wavesurfer-marker" data-start="28.398" data-end="30.183">and the idea of mindset.</span></p> <p><span class="wavesurfer-marker" data-start="30.207" data-end="33.041">I saw this in the early days working with my cousins.</span></p> <p><span class="wavesurfer-marker" data-start="33.065" data-end="35.545">A lot of them were having trouble with math at first,</span> <span class="wavesurfer-marker" data-start="35.569" data-end="38.623">because they had all of these gaps accumulated in their learning.</span></p> <p><span class="wavesurfer-marker" data-start="38.647" data-end="41.636">And because of that, at some point they got to an algebra class</span> <span class="wavesurfer-marker" data-start="41.66" data-end="45.062">and they might have been a little bit shaky on some of the pre-algebra,</span> <span class="wavesurfer-marker" data-start="45.086" data-end="48.531">and because of that, they thought they didn't have the math gene.</span></p> <p><span class="wavesurfer-marker" data-start="48.555" data-end="50.218">Or they'd get to a calculus class,</span> <span class="wavesurfer-marker" data-start="50.242" data-end="53.004">and they'd be a little bit shaky on the algebra.</span></p> <p><span class="wavesurfer-marker" data-start="53.028" data-end="54.598">I saw it in the early days</span> <span class="wavesurfer-marker" data-start="54.622" data-end="58.15">when I was uploading some of those videos on YouTube,</span> <span class="wavesurfer-marker" data-start="58.174" data-end="61.451">and I realized that people who were not my cousins were watching.</span></p> <p><span class="wavesurfer-marker" data-start="61.475" data-end="63.34">(Laughter)</span></p> <p><span class="wavesurfer-marker" data-start="63.364" data-end="67.23">And at first, those comments were just simple thank-yous.</span></p> <p><span class="wavesurfer-marker" data-start="67.254" data-end="69.223">I thought that was a pretty big deal.</span></p> </div>
.wavesurfer-marker:hover {
cursor: pointer;
text-decoration: underline;
}
.wavesurfer-marker-current {
background: #FFFF66;
}
A SRT converted in WaveSurfer markers thanks to the CodePen code snippet.
A simple CSS rule allows to see the current subtitles, from audio play position.
Subtitles
Intro
I’m here today to talk about the two ideas that,
at least based on my observations at Khan Academy,
are kind of the core, or the key leverage points for learning.
And it’s the idea of mastery
and the idea of mindset.
I saw this in the early days working with my cousins.
A lot of them were having trouble with math at first,
because they had all of these gaps accumulated in their learning.
And because of that, at some point they got to an algebra class
and they might have been a little bit shaky on some of the pre-algebra,
and because of that, they thought they didn’t have the math gene.
Or they’d get to a calculus class,
and they’d be a little bit shaky on the algebra.
I saw it in the early days
when I was uploading some of those videos on YouTube,
and I realized that people who were not my cousins were watching.
(Laughter)
And at first, those comments were just simple thank-yous.
I thought that was a pretty big deal.
I don’t know how much time you all spend on YouTube.
Most of the comments are not “Thank you.”
(Laughter)
They’re a little edgier than that.
— Go Back in the audio, I don’t put the whole transcript, as it is only a demo —
<div id="wavesurfer-transcript-#2" class="wavesurfer-transcript"> <p><span class="wavesurfer-marker" data-start="17.124" data-end="20.05">I'm here today to talk about the two ideas that,</span></p> <p><span class="wavesurfer-marker" data-start="20.073" data-end="22.431">at least based on my observations at Khan Academy,</span></p> <p><span class="wavesurfer-marker" data-start="22.456" data-end="26.334">are kind of the core, or the key leverage points for learning.</span></p> <p><span class="wavesurfer-marker" data-start="26.358" data-end="28.374">And it's the idea of mastery</span></p> <p><span class="wavesurfer-marker" data-start="28.398" data-end="30.183">and the idea of mindset.</span></p> <p><span class="wavesurfer-marker" data-start="30.207" data-end="33.041">I saw this in the early days working with my cousins.</span></p> <p><span class="wavesurfer-marker" data-start="33.065" data-end="35.545">A lot of them were having trouble with math at first,</span></p> <p><span class="wavesurfer-marker" data-start="35.569" data-end="38.623">because they had all of these gaps accumulated in their learning.</span></p> <p><span class="wavesurfer-marker" data-start="38.647" data-end="41.636">And because of that, at some point they got to an algebra class</span></p> <p><span class="wavesurfer-marker" data-start="41.66" data-end="45.062">and they might have been a little bit shaky on some of the pre-algebra,</span></p> <p><span class="wavesurfer-marker" data-start="45.086" data-end="48.531">and because of that, they thought they didn't have the math gene.</span></p> <p><span class="wavesurfer-marker" data-start="48.555" data-end="50.218">Or they'd get to a calculus class,</span></p> <p><span class="wavesurfer-marker" data-start="50.242" data-end="53.004">and they'd be a little bit shaky on the algebra.</span></p> <p><span class="wavesurfer-marker" data-start="53.028" data-end="54.598">I saw it in the early days</span></p> <p><span class="wavesurfer-marker" data-start="54.622" data-end="58.15">when I was uploading some of those videos on YouTube,</span></p> <p><span class="wavesurfer-marker" data-start="58.174" data-end="61.451">and I realized that people who were not my cousins were watching.</span></p> <p><span class="wavesurfer-marker" data-start="61.475" data-end="63.34">(Laughter)</span></p> <p><span class="wavesurfer-marker" data-start="63.364" data-end="67.23">And at first, those comments were just simple thank-yous.</span></p> <p><span class="wavesurfer-marker" data-start="67.254" data-end="69.223">I thought that was a pretty big deal.</span></p> <p><span class="wavesurfer-marker" data-start="69.247" data-end="71.699">I don't know how much time you all spend on YouTube.</span></p> <p><span class="wavesurfer-marker" data-start="71.723" data-end="73.81">Most of the comments are not "Thank you."</span></p> <p><span class="wavesurfer-marker" data-start="73.834" data-end="75.291">(Laughter)</span></p> <p><span class="wavesurfer-marker" data-start="75.315" data-end="76.953">They're a little edgier than that.</span></p> </div>
.wavesurfer-marker {
display: none;
}
.wavesurfer-marker-current {
display: block;
background: rgba(126, 126, 126, 0.4);
}
The subtitles have been converted without merging.
A CSS rule allows to display only the current subtitles, based on play cursor position.
For subtitles display, you may consider adjusting subtitles timing, so that they end precisely at the next subtitles position to prevent text to flash.
Extra
If you convert every subtitles to its own paragraph, and center the text, you will have a lyrics type of transcripts display, ala Deezer.
And if you divide timing at every syllabus, you could even make a Karaoke system!
Also, if you need to reinitialize markers for a transcript (for eg, if you have an dropdown which loaded another transcript in AJAX,) you can use the wavesurfer-markers-init JavaScript event.
Conclusion
I had to discover a lot of things to make this possible (it was the first time I use the FileReader API), but it was quite fun to learn.
A flexible system for markers and interactive transcripts open a whole new world of possibilities. I hope WaveSurfer-WP users will take advantages of this great features, added to WaveSurfer-WP Preimum Add-On ! 😛
- Thanks to fuermosi777 for its original JavaScript SRT Parser code, on which I based my converter!
- Thanks Freepik for cursor images!
- Full conference interactive transcript on the WaveSurfer-WP Markers Demo codepen.