Sonaar proudly introduces the Lazy Load feature for MP3 Audio Player Pro version 4.9, a sophisticated solution designed specifically for professionals who manage extensive (even unlimited) tracks in their audio player playlists. But first, let’s dive into understanding what lazy load truly means.

What is the Lazy Load? #

In its default configuration, MP3 Audio Player Pro retrieves and loads all items upon the initial page load. For instance, if you have a playlist with 200 tracks but display only 20 tracks per page, the system will still preload all 200 tracks when the page loads. For sites with a vast amount of audio content, this approach has an impact on performance, leading to slower page load times or, in extreme cases, server-related issues.

This is where our Lazy Load feature steps in. Instead of overwhelming your server by loading all items simultaneously, Lazy Load fetches and displays content page-by-page, using AJAX. So, when a user switches between pages of a playlist, use the filter or search for a track, only the content for that specific query is loaded. This ensures your site remains swift and responsive, even if you have thousands of tracks.

In the transition between queries, users might notice a brief loading animation — this is the magic of Lazy Load in action, ensuring that the next set of content is seamlessly pulled from the database.

[SCREENSHOT COMING SOON WITHOUT LAZYLOAD / WITH LAZYLOAD]

How can I enable lazy load? #

Using Elementor Page Builder: edit your player’s tracklist and go to the Style Tab > Pagination > Enable Lazy load.
You can set the tracks per page, scroll to top offset, and the shimmer animation colors.

Using shortcode: use the attributes: lazy_load=”true” tracks_per_page=”10”. Make sure that show_playlist=”true” is also set.

Example:

[sonaar_audioplayer category="all" show_playlist=”true” lazy_load=”true” tracks_per_page=”10”]

In version 4.9, lazyload is not yet available for the Gutenburg block.

Implication of using Lazy load #

When you activate lazy load, the tasks of retrieving, searching, and filtering playlists are managed by the server instead of the browser. Consequently, tables with lazy loading function differently compared to those without it. Everytime you search, filters, re-order or switch to another page, a request is made to the server.

When Lazy load is disabled one request is made to the server in the first place, then everything is handled in the browser. We recommend using Lazy Load when you have more than 20 different posts loaded in your playlists.

Table sorting is limited

The column order won’t work on the album, artist name, podcast show, categories, and tags columns. To column order those fields, you must create a custom field using ACF. The column orders will work on custom fields.

Title column ordering

When you click the Title column header to order the tracks, the tracks will be reordered by post title (not the track titles). Ensure your post titles are labeled with the same name as your track titles shown in the tracklist.

Search with keywords

You can search for multiple keywords at the same time when you use the comma separator (eg: Taylor Swift, John Lennon).

The search engine will search through what you have indexed by using our Track Indexation tool.

You must index (register) your posts for the lazyload engine on some occasions.

Go to WP-Admin > MP3 Player > Tools > TRACKS INDEXATION

You need to Rebuild Index if:

• You are using Lazyload Pagination for the first time.
• You have changed a MP3 Filename, ID3 Title, ID3 Album, ID3 Artist for a particular media through the media library.
• After importing new posts or products with an importer tool or plugin.

* You don’t need to use the tracks indexation tool whenever you add or edit a specific post. The post will be re-indexed automatically when you save the post.
* Only products and sr_playlist CPT are indexed

Before clicking on the ‘Rebuild Index’ button, make sure you have SAVED the checked fields above, by clicking the ‘Save Change’ button down the page.

Filter Widget

When you aim to filter by several values simultaneously, choosing the right selection type in the filter widgets is crucial. For instance, if you wish to display tracks associated with ALL selected values versus displaying tracks that only match certain tags, the selection type you opt for makes a difference. The available options are:

Single Select: This allows you to choose one value at a time.
Multiple Select – Relation (ALL): This lets you select multiple tags, and it will display tracks related to all the chosen tags.
Multiple Select – Relation (OR): This lets you select multiple tags, and it will display tracks that match any of the selected tags.

In essence, the difference lies in how the tracks are filtered: “ALL” requires tracks to match every selected tag, while “OR” displays tracks that correspond to any of the chosen tags.

Things to know #

• Use only 1 track per post. If you have multiple tracks set in a post, this will make the pagination and search not work correctly.
• The carousel slider won’t work in combination with a tracklist when lazyload is activated.
• Lazyload is only available as an option when your player’s source set to All Posts / Categories. If your player’s source is not set to All Posts/Categories (if you use shortcode, the category attribute must be set), otherwise the option to enabled Lazyload in Audio Player > Style > Pagination wont be displayed (also, make sure that pagination is enabled indeed).

In conclusion, when using MP3 Audio Player Pro with a tracklist, there are two distinct methods for querying tracks. For non-lazy loaded playlists, the search is handled client-side, directly in the browser, scanning the contents that is loaded on the current page, and displaying the results queried.

However, for lazy loaded tracklists, the query taps into WordPress’s built-in capabilities, working server-side. This means that while you can quickly search on thousands of tracks based on track names and descriptions, searching by categories, tags or other custom fields might be limited. Choose the method that best fits your needs and the size of your playlist.