How to use your custom Javascript code

This post refers to the old version 2 and some information might not be accurate or up to date.

If you need to interact with the player for any reason, you can use all the methods exposed by WavePlayer.

Your website may load some parts of the page after the page itself has completely rendered. This happens, for example, with themes using AJAX to loads the page content.

A possible scenario is a website loading some parts of the page only after the page itself has completely rendered. This happens, for example, with themes using AJAX to loads the page content (e.g. those themes that make it possible to switch to different posts without reloading the whole page). Since WavePlayer’s script initializes all the instances only upon page load, any instance of WavePlayer incorporated in the page afterward requires a manual initialization.

Another situation where you may need to manually initialize or refresh the player is when some instances are included in hidden content that gets showed only after a visitor clicks on a certain button or tab. In that case, WavePlayer’s initialization fails to detect the correct width of its container (by default, the width of a hidden div is zero) and the waveform does not get properly instantiated.


The WavePlayer global object

Even when you include tens of tracks and player instances on the same page, WavePlayer uses the same single HTML5 Audio Element to playback. This also prevents two different tracks to play simultaneously. You can interact with the player using the WavePlayer object.


Methods

getCurrentTime()Returns the current position of the selected instance
init( params )Initializes the selected instance of the player. Params is provided for future development and not currently in use.
pause()Pauses playback for the selected instance.
play()Starts playback for the selected instance.
refresh()Refreshes the waveform of the selected instance.
reload()Reloads the current track of the selected instance.
setCurrentTime( position )Sets the current position of the selected instance. Position must be the time you want to set, expressed in seconds.
skip( next )Skips to the previous or the next track, depending on next. If next is true or not provided, it skips to the next track. Otherwise, it skips to the previous one.

 

When repeat_all is true for the selected instance, skipping to the next track from the last track of the playlist activates the first track. Similarly, skipping to the previous track from the first track activates the last track.

skipTo( index )Skips to the index-th track of the selected instance (the index of the first track is 0).
stop()Stops the playback of the selected instance, also returning to the first track in the playlist of the selected instance.
toggle()Toggles the playback of the player

Events

getCurrentTime()Returns the current position of the selected instance
0:00
0:00