When using WavePlayer for your podcasts, it can be useful to reference a specific part of the audio track in the text, allowing your visitors to jump directly to that part. This can be easily achieved by adding simple anchors to any part of your page. The structure of the anchor can be as follows:
<a href="#" data-marker="2:00">your anchor text goes here</a>where the value of the data-marker attribute is the time you want to jump to when clicking on the link. Please note that the href attribute of the anchor can be disregarded or even omitted since WavePlayer will prevent any anchor with the data-marker attribute from behaving as regular links.
If you want to add time markers to your page, you are not forced to use anchor elements <a>. Any element can act as a time marker so long as you add the data-marker attribute with a well-formatted time to it. For example, WavePlayer will use any of the following elements as time markers:
Anchor elements <a>
<a href="#" data-marker="1:12">1:12</a>1:12: by clicking on this link the player will jump to 1:12
Span elements <span> and Paragraph elements <p>
<span class="my-span-class another-span-class" data-marker="4:38">a few words</span>
<!-- PARAGRAPHS -->
<p class="my-paragraph-class" data-marker="1:03:13">A full paragraph</p>A few words can become a time marker by adding the data-marker attribute.
Similarly, a whole paragraph can become a time marker. If you style the hovering over a paragraph that has the data-marker attribute (for example, by using a p[data-marker] CSS selector), you can make this behavior even more clear to your visitors. If you hover over this paragraph, you can see how the effect looks like.
Image elements <image>
<!-- IMAGES -->
<img src="path/to/my/image.jpg" data-marker="1:48:56" />
If you click on the image above, the player will jump to (or start playing from) 2:54. This is just because a data-marker="2:54" was added to the <img> tag definition.
Idiomatic elements <i>
<!-- IDIOMATIC -->
<i class="fas fa-play" data-marker="2:12:43"></i>If you are using an icon library, such as Font Awesome, adding an icon to your page can be as easy as inserting an idiomatic element <i> with the appropriate classes. If you also add to it the data-marker attribute, you can use icons as time markers. For example, your page could contain several of these headphones icons , each one linking to a different time of your audio track
The scrollIntoView magic
WavePlayer can detect all the elements with a data-marker attribute and automatically scroll the page to each of them when the playback reaches the corresponding time. This is particularly useful when you have a full transcript of your podcast episode and you would like the page to follow the playback of the current track. If you want to activate this feature, please go to the Advanced section of the WavePlayer settings and paste the following line in the Custom JS text area:
WavePlayer.setOption( 'scroll_to_marker', true );The current-time-marker class
When the current time reaches the value of a time marker, WavePlayer assigns the class current-time-marker to the corresponding element on the page. Thanks to this, you can easily style the current time marker relative to all the others on the page. For example, if you are using paragraph elements as your time markers, the current-time-marker paragraph could have a different background.