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="#" onclick="WavePlayer.setCurrentTime(120)">your anchor text goes here</a>
where the value provided to the setCurrentTime method is the time, expressed in seconds, you want your visitors to jump to. The previous anchor will allow users to jump to 2:00 into your track (2 minutes = 120 seconds). Please note that the href attribute of the anchor must be set to #: this allows the browser to execute the onclick script. If you left the href attribute empty, the page would reload and the onclick script would never execute.
| Marker | Description |
|---|---|
| 1:00 | You can use markers to jump to any part of the track that is currently playing back |
| This is a marker behind an icon. | |
| 2:47 | A marker is nothing but an anchor with the href attribute set to # and the onclick attribute set to WavePlayer.setCurrentTime( 167 ) where 167 is the number of seconds from the beginning of the track. |
| jump here | The text of the anchor can be anything: a time reference, a title, a single word in the text, a whole part of the paragraph, an icon or an image. It just depends on what you put inside the anchor tags. |
Preventing the browser from jumping to the top of the page
When you add the # symbol to the href attribute of an anchor element, the browser expects the subsequent text to be the ID of an element on the page, so that it can jump to it. When you set the href to just the # character – as recommended here to add time markers to your pages – the browser jumps to the top of the page, in absence of any other indication of a section where it should jump to. This could be an undesirable effect when you are using the anchors as Time Markers. In order to prevent this behavior, you can add a call to event.preventDefault() to the onclick attribute, as follows:
<a href="#" onclick="event.PreventDefault(); WavePlayer.setCurrentTime(132);"></a>
The difference between the default behavior and the one when event.preventDefault() is used can be observed by clicking the first two markers and the last two markers in the previous table.