How to dynamically define audio playlist within the shortcode

Last updated on

Product:

WonderPlugin Audio Player 4.8 and above

Question:

Can I use the same audio player on multiple pages but with a different playlist on each page?

Answer:

You can define playlist within the plugin shortcode.

Please add a parameter inline=1 to the shortcode and follow the code example to define your own playlist:

[[wonderplugin_audio id=1 inline=1]

<ul class="amazingaudioplayer-audios" style="display:none;">

<li data-artist="pinkzebra" data-title="In the Moment of Inspiration" data-album="" data-info="" data-image="https://www.wonderplugin.com/wp-content/uploads/2014/03/Evening100.jpg" data-duration="154">

<div class="amazingaudioplayer-source" data-src="https://www.wonderplugin.com/wp-content/uploads/2014/03/In-the-Moment-of-Inspiration.mp3" data-type="audio/mpeg" ></div>

</li>


<li data-artist="pinkzebra" data-title="Peaceful Dawn" data-album="" data-info="" data-image="https://www.wonderplugin.com/wp-content/uploads/2014/03/Island100.jpg" data-duration="129">

<div class="amazingaudioplayer-source" data-src="https://www.wonderplugin.com/wp-content/uploads/2014/03/Peaceful-Dawn.mp3" data-type="audio/mpeg" ></div>

</li>
</ul>

[/wonderplugin_audio]]

Since the shortcode filter is running after the wpautop filter, on some WordPress sites, wpautop may add p tags to the beginning and ending of the playlist HTML code which will create some extra space in the player.

In this case, you can add the following CSS code to the plugin, step 3 Options tab, Custom CSS box:

.wonderpluginaudio p {
    display: none !important;
}