Global Audio Player
Name your audio player
The global audio player needs to have a name so that outside elements know how to target it. You’ve used the tmplayer-init attribute before to initialize a player. Add a unique name value to the attribute to create a named audio player: tmplayer-init="my-global-player".
<div tmplayer-init="my-global-player">
</div>Link outer element to global player
Use the tmplayer-parent attribute to link your outer element to the global player we’ll use tmplayer-parent="my-global-player" to link to our global player named “my-global-player”. Then place a tmplayer-elmenent="audio" element inside of it to add the audio file to the global player.
<div tmplayer-parent="my-global-player">
<div tmplayer-element="audio" class="tap-track">
<div tmplayer-meta="audio-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3</div>
<div tmplayer-meta="title">Cae Keys</div>
<div tmplayer-meta="artist">Truemuzic</div>
<div tmplayer-meta="album">True Volume 2</div>
<div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png</div>
</div>
</div>Adding play/pause button to the outer element
Use the tmplayer-action="toggle" attribute to add audio play/pause functionality to any element. Note: when a tmplayer-action="toggle" element or its children are clicked, the song will either player or pause depending on its current state.
<div tmplayer-parent="my-global-player">
<button tmplayer-action="toggle">Play</button>
<div tmplayer-element="audio" class="tap-track">
<div tmplayer-meta="audio-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3</div>
<div tmplayer-meta="title">Cae Keys</div>
<div tmplayer-meta="artist">Truemuzic</div>
<div tmplayer-meta="album">True Volume 2</div>
<div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png</div>
</div>
</div>Make the whole element clickable
You can add play/pause click functionality to the entire tmplayer-parent element by adding the tmplayer-action="toggle" attribute to the tmplayer-parent element. Now when any part of the tmplayer-parent is clicked, the song will either play or pause depending on its current state.
<div tmplayer-parent="my-global-player" tmplayer-action="toggle">
</div>Ignore play/pause click functionality
In some cases, you may want a certain child element of tmplayer-action="toggle" to ignore click events. You can do this by adding the tmplayer-action="none" attribute to the desired element.
<div tmplayer-parent="my-global-player" tmplayer-action="toggle">
<div>Song name</div>
<button tmplayer-action="none">Add to cart</button>
</div>Adding song duration to the outer element
Use the tmplayer-interaction="populate-duration" attribute to populate an element with the total duration of the song. Whatever text is placed inside the element will be used as the default value.
<div tmplayer-parent="my-global-player">
<div tmplayer-interaction="populate-duration">00:00</div>
</div>State helper classes
| Class name | Description |
|---|---|
| .is-playing | The song is currently playing |
| .is-paused | The song is currently paused |
| .is-current | The element is the current song shown in the global player. This class can be present alongside other helper classes. |
You can also make any child element of tmplayer-parent adopt state helper classes by adding the tmplayer-interation="monitor-state" attribute to it.
<div tmplayer-parent="my-global-player" tmplayer-action="toggle">
<div tmplayer-interation="monitor-state">Song name</div>
<button tmplayer-action="none">Add to cart</button>
</div>Now our helper classes will be added to the div element containing “Song name” anytime the parent tmplayer-parent element changes state.
Initializing dynamically loaded elements
<div tmplayer-dynamic-content="my-global-player">
<!-- Imagine that the following elements were loaded via ajax -->
<div tmplayer-parent="my-global-player">
<!-- Song details display -->
<div tmplayer-element="audio">
<div tmplayer-meta="audio-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/New-York-Vibe.mp3</div> <!-- Audio url (Required) -->
<div tmplayer-meta="title">Bright Lights</div> <!-- Audio title -->
<div tmplayer-meta="artist">Truemuzic</div> <!-- Audio artist name -->
<div tmplayer-meta="album">True Volume 2</div> <!-- Audio album name -->
<div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-37.png</div> <!-- Audio thumbnail -->
</div>
</div>
<div tmplayer-parent="my-global-player">
<!-- Song details display -->
<div tmplayer-element="audio">
<div tmplayer-meta="audio-url">https://upliftwebdesign.com/wp-content/uploads/2022/05/Caelon-Keys.mp3</div> <!-- Audio url (Required) -->
<div tmplayer-meta="title">Cae Keys</div> <!-- Audio title -->
<div tmplayer-meta="artist">Truemuzic</div> <!-- Audio artist name -->
<div tmplayer-meta="album">True Volume 2</div> <!-- Audio album name -->
<div tmplayer-meta="thumbnail">https://upliftwebdesign.com/wp-content/uploads/2022/05/Rectangle-38.png</div> <!-- Audio thumbnail -->
</div>
</div>
</div>