Are you a coding enthusiast who uses our Audio Player app? If so, this post is just the thing for you!
We are excited to introduce new API methods that empower you to control the behavior of your player via Custom JS field:
-
widget.player.play()- starts/continues playing the current track -
widget.player.pause()- stops playing the current track -
widget.player.stop()- stops playback and resets playback progress to the beginning -
widget.player.stopAutoTrackSwitch()- disables automatic switching to the next track, after the current one is ended
How does it work?
To make these API methods work, you’ll need to call them within your code, triggered by either external or internal events.
External events are events that occur outside of the widget, such as when a user clicks a custom button on your website.
So, if you have a custom button on your website and you want it to start playing the current track when clicked (for example, <button id="player-play" />), you’ll need to link the method call to that button click event. Here’s the complete code for reference:
const playBtn = document.querySelector("#player-play");
playBtn.addEventListener("click", () => widget.player.play());
Internal events are events that happen within the Audio Player widget itself. There are two supported internal events:
-
widget.on('playerAvailable', () => {...})- execute upon the player initialization -
widget.on('trackEnded', () => {...})- execute once the track is ended
If you are going to use internal events, just include the necessary API method within the curly brackets of the event. Here’s an example of code that prevents automatic track switching when it ends:
widget.on("playerAvailable", () => {
widget.player.stopAutoTrackSwitch();
});
This video demonstrates the code above in action:
Faced any difficulties or have further questions? Just drop us a line in the comment - we are always here for you 