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)

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!