How to add time marks to WordPress audio player

Last updated on

This tutorial will guide you how to add time marks to a WordPress audio player created with the plugin Wonder Audio Player. When clicking on the time mark, the player will jump to the specified time and start playing.

The tutorial will also guide you how to add play, pause, rewind and forward buttons to the player.

There are two steps in this tutorial:

  • Step 1 - Create an audio player with Wonder Audio Player plugin
  • Step 2 - Add time marks to the audio player

A created demo is as follows:

00:30 01:30 03:30 Play Pause Forward 10 Seconds Rewind 10 Seconds

Step 1 - Create an audio player with Wonder Audio Player plugin

Wonder Audio Player is a WordPress plugin that helps you create responsive HTML5 audio player for your WordPress websites. It is compatible with popular WordPress page builders or editors, for example, WordPress Classic Editor, WordPress Block Editor, WPBakery Page Builder, Elementor, Divi Builder, SiteOrigin Page Builder, Beaver Builder etc.

You can view the following document for how to create an audio player: Wonder Audio Player Help Document.

You can also view the quick start YouTube video: How to create a WordPress audio player.

Step 2 - Add time marks to the audio player

After you create an audio player, you can add the following code to your webpage to create a time mark. You can place the code anywhere on the same webpage as the player.

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').playAudio(90);return false;">01:30</a>

In the above code snippet, make sure to change the number 61 in the code wonderpluginaudio-61 to the ID of your own Wonder audio player. The number 90 in the code playAudio(90) specifies the seconds to start playing.

You can also add the following code to create a play button and a pause button:

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').playAudio();return false;">Play</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').pauseAudio();return false;">Pause</a>

You can add the following code to rewind or forward the playing:

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').rewind(10);return false;">Rewind 10 Seconds</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').forward(10);return false;">Forward 10 Seconds</a>

If you only want to jump to the specified time without changing the playing status, you can change the code to:

<a href="#" onclick="jQuery('#wonderpluginaudio-61').data('object').setSeconds(90);return false;">01:30</a>

By using the above code, if the player is playing, it will continue to play, if the player is not playing, it will only jump to the specified time.