Export configuration template with the ability to sort, filter, display cover art, and play local songs in your browser

Development Export
, ,
1

Based on this idea here, I enhanced my example Export configuration script.

MyColumnsExport (with Filter, Sort, Player, Cover) v1.2.mte (37,9 KB)
(download it and place it in %appdata%\Mp3tag\export)

Speed-optimized v2.0:

This Mp3tag export script creates a HTML-page for all selected tracks.

Features:

a) Sort your tracks by any column (by clicking on the column header) in ascending or descending order, by size in MB/KB, or alphabetically or numerical

b) Filter your tracks by entering any character that your filtered track TITLE has to include

c) Play your local track by clicking anywhere on the row. The embedded HTML5 browser-player controls include Play/Pause, Volume, Mute and Position, which you can access via the large slider.

d) Display the track cover. If you export the covers for your selected tracks with an Action "Export Cover to file" and the Format string .\Covers\$num(%track%,2) - %title% hovering over the TITLE column displays such covers. When you click on a song to play it, an existing cover art will remain in the top right-hand corner.

Mp3tag Export Script

Important:
Such a HTML page is not a replacement for Foobar, VLC, or any Jukebox or Media Manager!
This template only demonstrates the potential of an HTML page enriched with JavaScript code.
Those interested can take a look inside the .mte. I have documented all its functions and styles. You might get an idea of what is possible with File -> Export and some JavaScript skills.

Final hint: This script has been tested in Google Chrome, Microsoft Edge, Opera (Blink), Mullvad Browser, and Firefox (Gecko).

All core features work consistently across these browsers. However, due to limitations of the Gecko rendering engine, the HTML5 player supports fewer design and styling options in Firefox and Mullvad Browser than in Blink-based browsers.

2

Holy Moley, this is amazing. All sorts of possibilities to explore. Thanks for sharing this.

One question: Sort time. I'm experimenting with a 4,000 row export, and it takes about 5 seconds to sort. Is this normal for Chrome? Very fast computer (i9, 64GB RAM), very fast HD (SSD). W11, Chrome. The HTML file is about 5MB.

3

You're welcome! I'm glad to hear it.

To be honest: I haven't tried to optimise the sort function for speed yet.
It was fast enough for my "UK Top 100" example. :wink:

On second glance, I don't think the sort itself has a speed issue.
I think it has more to do with the way the DOM is handled.
Every click on a column header performs the following operations for every single comparison:

• 2 x querySelectorAll
• 2 x textContent.trim()
• Optional conversions (time, bytes, numbers)
• And finally 4'000 x appendChild

With 4'000 rows, that results in roughly:
4'000 log⁡(4'000) ≈ 48'000 comparisons
→ 48'000 DOM accesses
→ 48'000 text extractions
→ 48'000 trim operations

All of that is expensive.

This could perhaps be optimised, but as mentioned, "speed" was not the main focus. :innocent:

Maybe I'll find some time later to look into it more closely, but please don't expect it to happen in the next few days.

4

It's fine the way it is, don't spend any effort on the sort. It was more curiosity than complaining.

It is interesting what it goes thru to do a sort!

5

The script version 1.2 works fine for a typical album with 10-20 tracks. It also holds up reasonably well for something like the "UK Top 40" or "UK Top 100" lists. But it becomes too slow once you export thousands of rows.

This is a speed-optimized version v2.0 of the script:

MyColumnsExport (with Filter, Sort, Player, Cover, speed checked) v2.0.mte (43,6 KB)

Changelog:

Performance overhaul
The old version re-searched for cover images and re-scanned all table cells on every sort, filter keystroke, and click - fine for small amount of tracks, but slow at scale. v2.0 caches everything once on page load (row search text, cover paths, sort keys) and reuses that cache everywhere. Sorting now uses a "decorate-sort-undecorate" approach instead of recalculating sort keys during every comparison, and DOM updates are batched via a document fragment instead of moving rows one-by-one. Filtering also got a "debounce" (150ms) so it doesn't re-run on every single keystroke.

Cover detection: guesswork → exact match
v1.2 guessed at cover filenames by brute-force testing 16 filename/extension combinations per track (with/without album folder, raw/cleaned title, four extensions) - slow and unreliable. v2.0 drops the guessing entirely: it now reads the exact cover path and MIME type that Mp3tag already exported per track, so each track needs exactly one lookup instead of up to sixteen.

Hint:
You should export your covers - if you want to see them - with the new Format string in Export Cover to file:
.\Covers\$num(%track%,2) - $trim($regexp($validate(%title%,' '), +,' '))

This should solve some problems with special invalid characters for filenames like * or ? or < > or : and some more.

New: track/filter counters
v2.0 adds a live "Showing X of Y tracks" indicator and cleans up the "missing covers" counter placement, giving better feedback when filtering large libraries.

image
image240×131 3.06 KB

Minor layout/UX polish
Column header text no longer wraps awkwardly around the sort arrow (reserved space added), some spacing/margins around the filter row were tightened, and sorting now also handles the Year column numerically.

This v2.0 is built to comfortably handle ~20'000 tracks, whereas v1.2 was really only comfortable with much smaller amount of exported rows.

Still, I'd like to remind you:

6

Wow, amazing work. Thanks!!