This tutorial will guide you, on how to add extra buttons to the play, pause, forward, and rewind the WordPress audio player created by Amazing Audio Player.
The online demo is as follows. You can click the buttons to control the player.
After you add an audio player to your webpage, insert the following code anywhere on the same webpage as the player to create a play button:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').playAudio();return false;"><button>Play</button></a>
In the above code snippet, ensure you replace the number 2 in amazingaudioplayer-2 with the ID of your own Amazing Audio Player.
To pause the player, add the following code to your webpage:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').pauseAudio();return false;"><button>Pause</button></a>
To forward the playback by 30 seconds, add the following code to your webpage:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').audioPlayer.html5Object.get(0).currentTime+=30;return false;"><button>Forward 30 Seconds</button></a>
To rewind the playback by 30 seconds, add the following code to your webpage:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').audioPlayer.html5Object.get(0).currentTime-=30;return false;"><button>Rewind 30 Seconds</button></a>
To jump to the previous song, add the following code to your webpage:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').audioRun(-2,true);return false;"><button>Play Previous</button></a>
To jump to the next song, add the following code to your webpage:
<a href="#" onclick="jQuery('#amazingaudioplayer-2').data('object').audioRun(-1,true);return false;"><button>Play Next</button></a>