Global Audio Player

Let’s say you want to display a track listing on your page separate from the audio player itself. Basically using one global audio player for all the tracks on the page. The true audio player can handle that.

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​

We add helper classes to the tmplayer-parent element to help you style it based on its song’s current state. Note by default no helper classes are applied.
Class nameDescription
.is-playingThe song is currently playing
.is-pausedThe song is currently paused
.is-currentThe 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​

If you use ajax to dynamically load tmplayer-parent elements. You can add the tmplayer-dynamic-content="name-of-global-player" attribute to the wrapper element to monitor when new tmplayer-parent elements are added and automatically load their songs into the global player.
<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>

Need help? Contact us at info@upliftwebdesign.com