New Export to HTML Settings (featuring Display of Lyrics)

Development Export
1

Latest Version is 1.3 (Posted July 15, 2011)
(see next post)

Online Sample (v.1.1) <<<

(Please keep in mind the 'play track' links won't work in this sample, and the approx. 10mb file containing some 5000 song's lyrics may take a minute or more to initially load on slow internet connection.)

What it is:

These export settings will output an HTML list of all selected tracks (sorted by Artist, Album-Year, Album, Disc & Track Number >> i.e. All Tracks Chronologically per Artist) that is made user-collapsible (accordion fashion) in a variety of ways when browser Javascript is enabled.

It probably is worth mentioning that all sorting is based on tag data alone. It does not matter how your tracks are arranged in folders. I noticed that most of the .mte's here tend to assume all the tracks in one folder are on the same album. This one does not. Your whole collection can be in a single folder if you like. It won't affect the output.

There is a navigation menu at the top which allows you to filter the entire list by various levels of detail (ex: hide everything, show only the names of the artists, or also show all their albums, or also show all of those album's tracks, or also show all of those track's lyrics).

There is also included the ability to sort the list by First Letter of the Artists' or Band's names, making the list much shorter and easier to deal with if you have a large collection.

There is a further option to filter the list based on whether a track has any lyrics (in the tag) or not, which might be helpful as you edit the lyrics tags of your files.

You can play any track by clicking its [►] play link.

These export settings create a list of your selected collection that is sorted by the following method:

Artist (%artistsort% if it exist, and if not, %artist%)
Year (%year% - to arrange the Artists' Albums chronologically)
Album (%albumsort if it exist, and if not, %album%)
Disc Number
Track

These export settings create a list that is displayed in the following fashion (but formatted with CSS, so you can customize it's appearance):

Artist 1
     Year · Album 1
          Disc #: Track #  [►] Track 1 Title · Track Time
               Track 1 Lyrics (centered)
          Disc #: Track #  [►] Track 2 Title · Track Time
               Track 2 Lyrics (centered)
     Year · Album 2
          Disc #: Track #  [►] Track 3 Title · Track Time
               Track 1 Lyrics (centered)
          Disc #: Track #  [►] Track 4 Title · Track Time
               Track 2 Lyrics (centered)
Artist 2
     Year · Album 3
          Disc #: Track #  [►] Track 5 Title · Track Time
               Track 1 Lyrics (centered)
          Disc #: Track #  [►] Track 6 Title · Track Time
               Track 2 Lyrics (centered)

etc...

However, when you open first load the HTML, the list will be collapsed down to just lists of the artists. You can pick any letter (or number or symbol) in the alpha-menu to collapse it further so only artists or bands who's names start with that letter are shown.

Click on any artist to see that artist's Albums; Click any album to see that album's tracks; Click any track with lyrics to see that track's lyrics. Click any of them a second time to re-collapse that part of the list.

There is also a menu at the bottom of the screen that helps you when you're working with just the titles of a specific alpha-group, but you can hide it. It also provides a count of the total number of artists, albums, and tracks in the collection.

I've considered users who might prefer working on a narrow browser window (such as half a wide screen monitor, or a small monitor in portrait) so there are a couple of different ways to arrange the menus and buttons provided.

Click the "P" Button (added v.1.3) to hide all sorting menus and format your list for printing from your web browser.

All menus and buttons update dynamically, based on what you've just done.

Finally, there are also buttons (fixed to the bottom right corner of the screen) that always allow you to easily jump to the top or bottom of whichever list you are viewing.

You can view a working sample output generated from part of my personal collection (tag update still in progress) online here right now.

Keep in mind the links to play tracks won't work, as I'm not hosting my collection on the web. Also bear in mind that the sample provided list 6,560 tracks, of which over 5,000 have complete lyrics info. That results in a file of just under 10 MB. Big file for an HTML page, so it may take a few seconds to load. I've used no html tables for the lists and tried very hard to keep my output file size down as much as possible.

I hope you folks like it and can give me some good feedback!

I should point out that I wrote this first to help me as I imported lyrics to my collection (it's super for being the source in a copy - paste operation) and then as I realized I would need to learn how to work with HTML, CSS, Javascript, jQuery, and not the least of all, Mp3tag's export scripting, as motivation to do the same.

I've taken advice from others so far to heart, and I appreciate the help that has been offered.

I've uploaded 4 different versions of the .mte for you all:

First, there's the "Lite" version that is "Fully Escaped" ... meaning I followed DetlevD's advice and made sure to bracket in apostrophe's everything not needing execution by Mp3tag. This is the one you'd probably want to use. It (and the other "Lite" versions) needs the jQuery .js file installed locally so I've included it and a handy little command script written by DetlevD that will put the javascript file where it belongs.

Second, there is the un-escaped "Lite" version. I included this in case you want to make any changes, as it seems (at least to me, when using Notepad++) easier to find you way around in.

I also included a fully annotated version in which I provided a lot of mark-up text to hopefully explain what I was doing, and might be helpful to some.

All 3 of these will result in the exact same file being output ... except the annotated one will be a bit bigger because of all the markup text being repeated for every track loop.

The fourth version is self-contained. It does not require the local installation of the javascript file -- as I've also included that in the .mte. Other than the changes required to escape it so it can be pushed through Mp3Tag's export process, it is unchanged for the included .js. It's probably more efficient to use an external .js file, but I have to admit I've never noticed a difference.

I've tested this quite a lot on my own so I'm pretty sure this works as intended at this point.

DetlevD referred to my previous effort as "a conglomeration of professional and beginner ideas and code work" ... which as a beginner, didn't offend me all that much. I hope this improves on things a bit!

I should note I also included a copy of my custom XML "User Defined Language" file for the Notepad++ Text Editor. DetlevD provided me with one (when I didn't even know they existed!) and I found it very valuable. I've since made some modifications to his that help me work on the Mp3Tag stuff and the HTML, CSS, and Javascript stuff all at the same time.

HTML tags (I listed them all, I think) are highlighted in red.
CSS related tags in a pale blue-greenish color.
Javascript in Purple.
Mp3Tag variables in Blue.
Mp3Tag commands in Green (Loops in Brown).

Do check it out if you use Notepad++!

I think that's about it. I'll reserve the next post to point out a few things I may want to improve on in a future update, and ask for some advice on an issue I have encountered. And I'll always update the top of this first post with the latest version (if I release any others).

Thanks for reading!

Edited to Add:

Forgot to mention that if an album is labeled as a compilation album, than the track artists' or bands' names will be appended to the list after the track title (in parenthesis), as long as it is different from the album artist's name. I guess this assumes use of the Artist Sort tag as the Album Artist's name and the Artist tag as the Track Artist name. Let me know if this is an issue for anyone.

FLskydiver__s_____Lyrics_to_HTML______v1.0_.zip (78.9 KB)

FLskydiver__s_____Lyrics_to_HTML______v1.1_.zip (80.8 KB)

FLskydiver__s_____Lyrics_to_HTML______v1.3__F_Lite__Annotated_.zip (37.8 KB)

2

NEW IN VERSION 1.3:

  • Added "P" (Print Mode) Button for Beluna. Click this button when you have your list sorted the way you like it to hide all the sorting menus and format the list for printing from you web browser (if for example you want a hard copy or .pdf).
  • The improved sorting method introduced in 1.2 could make exports very slow.

    To speed up the export time dramatically, you should now run the custom action (included) on all your tracks prior to export. The action will create a new custom tag "GroupArtist" and populate it with either "123" or a letter from "A" to "Z", based on the first Alpha-numeric character in the band or artist's name, to be used later during export when building the sort menu. You only need to do this once (unless you change the Artist's or Band's names. Thanks to DetlevD.

    Much discussion about this below.

  • Numerous updates and improvements to underlying code.

I only included the annotated version for 1.3. It's the easiest to work with and I don't have time to make the other versions at the moment.

=================================================

Ok, this is the bit where I ask for help :slight_smile:

-1-

I figured out a way to break down a long list into nice, manageable chunks by using a counter, or in this case, the first letter in the last name of the artist, or band name.

I can't figure out how to consolidate all the numbers into one chunk. I don't have lots of bands whosw names start with numbers, so I'd rather they just be all in one section. More so for those who start with symbols (.38 Special, 'Til Tuesday). I'd appreciate any ideas. SOLVED

-2-

Can someone check if the anchor links (top of page, bottom of page buttons) work in their copy of IE? I can't figure out why they don't work for me in IE9. Anchors are basic, basic html in use since day one, and I don't think they've been deprecated in HTML 4, right? SOLVED

Thanks!

Future Intentions:

(To be based on feedback, and lacking that, whim. Nothing solid yet. I'd like to add a "Play Whole Album" or "Play All by Artist" feature, maybe. Perhaps link to external cover art ... )
3

Thanks for this good and great work

Now it is true my collection 1 Album Artist and 53 shown by year correctly!

Thanks again for the good work

forgive my bad english

4

No worries, I'm afraid it's much better than my German!

Luckily, Google seems to do a fair job translating, so you can reply in German if you like.

Thanks for the reply. Best regards...

5

Updated to Version 1.1

New Feature: "One-At-A-Time" Mode.

In this new optional view mode, when you expand the the list to reveal the albums of any given artist; or the tracks of any given album; or the lyrics of any given track ... all other artists, albums, or track lyrics on that view-level are automatically collapsed.
Improved Feature: Menu Toggle
Switch between the wide and narrow window modes by double-clicking the "X" button. Single click the "X" button in either mode to toggle the visibility of menus in the footer.
Fixed:
Top of List & Bottom of List buttons didn't work in IE9.
Updated:
Help & Info tab. Underlying CSS and Javascript coding. Online sample output (to v.1.1).
6

Finally downloaded all the official export settings posted here and tried them out. Definitely some neat work there. Giving me more ideas. Thanks for those who shared!

I thought it would be worth mentioning that my .mte doesn't pay any attention to the way your tracks are arranged on your file system (in folders). All my sorting is done based on the tag data alone. This means people who have their entire library of tracks in a single folder will get the same results as someone who uses different folders for each artists and different subfolders for each album.

I noticed that a lot of the official .mte's treated all tracks in a given folder as being part of the same album, and this doesn't work for me because I don't store my tracks that way.

I guess a possible down-side to my method of sorting is that you have to make sure your tracks are properly tagged with correct and consistent %artistsort% (and/or %artist%) and %album% names. If they aren't already, well, get to work! That's what Mp3Tag is for!

Please, anybody have any ideas on how to approach a solution to the first question I posted above (post # 2)? I've wracked my little brain, and can't think of anything. Thanks!
7

[Updated post and attachment with improved and simplified version of what I posted here previously today:]

OK, never mind, I figured it out.
By changing the alpha-section loops from this simple "check first character" string:

$loop($left($if2(%artistsort%,%artist%),1),1)

to this a bit more complicated one:

$loop($ifgreater($strchr(.'',$left($if2(%artistsort%,%artist%),1)),0,
$if($isdigit($mid($if2(%artistsort%,%artist%),2)),123,$upper($mid($if2(%artistsort%,
%artist%),2))),$if($isdigit($left($if2(%artistsort%,%artist%),1)),123,
$upper($left($if2(%artistsort%,%artist%),1)))),1)

I wrote a loop that groups all Artists whose names start with the same letter (uppercase or lowercase, no matter) together (under "A" or "B" or "C", etc.), while also grouping all artists whose names start with a number together as well (under "123").

In addition, any artists whose names start with a symbol (ex: .38 Special, 'Til Tuesday) will be grouped based on the next character. For example, .38 Special will be grouped with the numbers (based off the "3"), and 'Til Tuesday with the "T"s.

  • only periods and apostrophes are symbols currently accounted for, but you can add others as needed. What other characters should be included?

Will include the updates in the next version (1.2) but in case anyone wants to manually swap out the new code, or (if you are, like me, new to scripting too and want to see how it works) check out the (revised) attachment.

FLskydiver__s_____Lyrics_to_HTML______v1.2__Alpha_Menu_Loop__Annotated__Revised.txt (3.46 KB)

8
QUOTE (Flskydiver @ Jun 15 2011, 21:43) <{POST_SNAPBACK}>
By changing the alpha-section loops from this simple "check first character" string: 
$loop($left($if2(%artistsort%,%artist%),1),1)

to this a bit more complicated one:

$loop($ifgreater($strchr(.'',$left($if2(%artistsort%,%artist%),1)),0,
$if($isdigit($mid($if2(%artistsort%,%artist%),2)),123,$upper($mid($if2(%artistsort%,
%artist%),2))),$if($isdigit($left($if2(%artistsort%,%artist%),1)),123,
$upper($left($if2(%artistsort%,%artist%),1)))),1)<!--QuoteEnd--></div><!--QuoteEEnd-->

Hmm. I should point out replacing this loop makes the export CRAWL. Very slow. I made a test file containing nothing but this loop, and it's definitely the culprit. It does work fine, eventually, but it isn't something you want to sit around waiting for if you are working with lots of files. Is this script just (almost) too complex for Mp3Tag, or is it just time for me to get a better computer?

Some details: Tested on 6,560 tracks. Mp4Tag took 40 minutes thinking it over before beginning the export, which then took about 4 minutes. So, it processed only about 2.7 tracks a second.

It didn't crash, however, and did the job perfectly. Just very slowly. Click that link to see.

Anyone up to the challenge of further streamlining the loop?

9

Yes, that's the way how Mp3tag prepares the output data in the background.

Following export script as excitation for your development ...

$filename($getEnv('USERPROFILE')'\Desktop\Mp3tag.Report.Artist.ByFirstLetter.txt',UTF-8) '=== Mp3tag Report === Sorted by First Letter of Artist ===' $loop($regexp($regexp($if2(%ARTIST%,%ARTISTSORT%),'^[\W]*(.).*$','\U$1',1),'\d','0-9'),1) '['$regexp($regexp($if2(%ARTIST%,%ARTISTSORT%),'^[\W]*(.).*$','\U$1',1),'\d','0-9')']' $loop($if2(%ARTIST%,%ARTISTSORT%),1)$if2(%ARTIST%,%ARTISTSORT%) $loopend()$loopend()

DD.20110616.0845.CEST

10

Yep, that got 'er done in about half the time, only about 20 minutes of deep thought for the same data set.

Need to get some sleep now but definitely will look more closely at this later on. I'm wondering if you so quickly figured out a way to do it that's twice as fast, or if the time difference is accounted for in the fact that my script makes Mp3Tag process the alpha-sort twice (once to build the menu, and a second time to build the individual "pages" divs).

Restricted to building the output HTML 100% linearly, I haven't figured out a better way to make the menu yet. I might have to resort to doing the sorting after-the-fact, in browser, with a lot more jQuery calls.

Thanks for taking a look. I'd really like to hear what you think of my progress so far. Attached the build I made sample 2 with.

FLskydiver__s_____Lyrics_to_HTML______v1.2b_.zip (35.6 KB)

11

Nearly the same here. While running my short script from above post #9, Mp3tag needs about 21 minutes to think over, then additional about 5 minutes to export data of about 3200 text lines, which gives an overall speed of about 8.9 tracks per second, or 2 Artists per second, which is not so much, even on a 2 GB 2 GHz Pentium CPU.

One take into account, not alone for the very Mp3tag beginner, the process looks like frozen machine at 100 percent CPU load, no updating of the status window for long long time, no running indicator, simply a rather frustrating situation.

Once the sort character is available in a tag-field, for example MY_ARTISTSORT, then the export code is simpler and the process runs quicker.

$filename($getEnv('USERPROFILE')'\Desktop\Mp3tag.Report.Artist.By.MY_ARTISTSORT.txt',UTF-8) '=== Mp3tag Report === Sorted by MY_ARTISTSORT ===' $loop(%MY_ARTISTSORT%,1) '['%MY_ARTISTSORT%']' $loop($if2(%ARTIST%,%ARTISTSORT%),1)$if2(%ARTIST%,%ARTISTSORT%) $loopend()$loopend()

While running this short script, evaluating the preset tag-field, Mp3tag needs about 3 minutes to think over, then additional about 4 minutes to export data of about 3200 text lines, which gives an overall speed of about 33 tracks per second, or 7.5 Artists per second.

DD.20110616.1112.CEST

12

Indeed! I myself thought I must have messed something up and cancelled the export thinking I had crashed Mp3Tag half a dozen times before I finally waited to see what happened. Couldn't figure out why it worked on just a few files but didn't seem to at all on a lot of them. Or why the scripts I'd written before kept working while the software otherwise seemed buggy. I did a few unnecessary reboots and almost reinstalled the software before discovering it actually worked.

My 1.1 version, that just plucks first characters and makes sure the are uppercased, takes just a short time in "deep thought" (1 minute or so) but does give feedback right away. Obviously, I'm asking a lot more of Mp3Tag in the new version. Using a custom tag field might be the way to go, at least for my own testing purposes. I'll not want to force folks to do that just to use the export themselves though. I guess I'll include a warning and instructions how to make the sort a little less precise when added speed is desired.

Thanks.

13

I'm starting to find your mastery of regular expressions really annoying. But thanks, this is, of course, a much cleaner way to do it. Blue skies...

14

Final follow up on the regexps you provided:

After some experimentation I've confirmed this is definitely the way to go: If I run this action first, on all tracks:

Name of action group: Create and Format New Tag ''GROUPARTIST''

Action type: Format value
Field: GROUPARTIST
Formatstring: $regexp($regexp($if2(%artistsort%,%artist%),'^[\W](.).$','\U$1',1),'\d','123')

It allows me to change my working script from:

$loop($regexp($regexp($if2(%artistsort%,%artist%),'^[\W]*(.).*$','\U$1',1),'\d','123'),1)

to:

$loop(%groupartist%,1)

and the menu links from:

$replace($regexp($regexp($if2(%artistsort%,%artist%),'^[\W]*(.).*$','\U$1',1),'\d','123'),I,&nbsp;I,J,&nbsp;J)

to

$replace(%groupartist%,I,&nbsp;I,J,&nbsp;J)

And the export now takes no time at all. In fact, the combined time to run the custom tag action AND export is still dramatically lower than processing the regexp during export, which I don't quite understand, because they both accomplish the same thing. And considering the custom action need only be done once, this makes every subsequent export even quicker. Grand idea.

15

It should be possible to simplify (?) the Regular Expression a bit ...
from ...
Formatstring: $regexp($regexp($if2(%artistsort%,%artist%),'^[\W](.).$','\U$1',1),'\d','123')
to ...
Formatstring: $regexp($regexp($if2(%artistsort%,%artist%),'^\W*(.).*$','\u$1',1),'\d','123')

Also maybe ...
from ...
$replace(%groupartist%,I, I,J, J)
to ...
' '%groupartist%

DD.20110620.0638.CEST

16

If I knew exactly how those regular expressions worked, I might be able to comment. But since I don't know exactly what the "\U" (non-uppercase words) and "\u" (uppercase words) bits do in the context of the whole expression, I don't know what the change would effect. Can you elaborate?

As for the replace "I" and "J" with " I" and " J", I only add the space to the I and J because the non-serif font I use makes those particular two letters very skinny and hard to click on. I think adding the space for all letters isn't as necessary, and wouldn't look as nice in general.

(Couldn't reply sooner as it seems the forum was down yesterday?)

17

Excerpt from the Regexp Replace Format String Syntax:

\l ... Next one output character in lower case.

\u ... Next one output character in upper case.
\L ... All subsequent output characters in lower case, until \E is found or until next casing switch or until end of replace string.
\U ... All subsequent output characters in upper case, until \E is found or until next casing switch or until end of replace string.
\E ... Terminates a \L or \U sequence.

DD.20110621.1915.CEST

18

Ok, I'm thinking this should make it all clear to me, but ... nope. Still clueless. Sorry. :slight_smile:

Like, I know this:

$regexp($regexp($if2(%artistsort%,%artist%),'^[\W](.).$','\U$1',1),'\d','123')

works just as my non-regexp script did, because I tested it; except better because it doesn't require one to specify specific non-alphanumeric characters to skip over.

I know what the "$if2(%artistsort%,%artist%)" bit gets because I wrote that early on.

I know that the "$regexp($if2(%artistsort%,%artist%),'^[\W](.).$','\U$1',1)" bit replaces this part:

'^[\W](.).$'

of the artist name with:

'\U$1',1

And I know from the way I designed the action you wrote this regexp for, and watching your regexp work, that the first part picks the first alphanumeric character in the name somehow, and the second part must capitalize that plucked character.

I'm slightly fuzzy on the particulars. lol.

I do undertand that the outer regexp takes that capitalized, plucked character and, if it is a number (0-9), replaces it with the text string "123".

Soooo, I guess I still need to figure out why the '^[\W](.).$','\U$1',1 bit works the way it does.

Using the Mp3Tag help, I decode the first bit as:

Non-Word Character at Start of line repeated any number of times including zero (any single character) any single character repeated any number of times including zero at end of line.

I don't understand the second bit ... '\U$1',1 ... at all so don't know what replacing the \U with \u would do or why that would make it simpler.

19

I like your template and need your assistance in making a few modifications.

  1. I'm looking to use the template to print my mp3 collection to carry with me (as paper, HTML, or PDF). I'm always on the search for music and often end up buying the same music over because I can't remember what I already have, is the album missing tracks and what format is it (Vinyl, Cassette, CD, etc.)

So, I'm looking to create a list that I can take with me.

The following changes I would like to make to the template is

To remove the lyrics, comments and strip it down to the following Example:

B.B. King Vinyl

     1983 · Move To The Groove (Featuring Pat Metheny & Dave Brubeck) 
                         01  [▶]  Move To The Groove · 07:20
                         02  [▶]  Lover Man · 07:29
                         03  [▶]  Blue Rondo · 07:08
                         04  [▶]  Ol` Bill Basie · 06:25
                         05  [▶]  The Thrill Is Gone · 04:59
                         06  [▶]  Guess Who? · 05:48
                         07  [▶]  Paying The Cost To Be Boss · 06:10

Where in the script do I remove the Lyrics information?

Last, if possible, am I able to scale the font to where I can get 2 columns. I've got a large selection

if you know of a better suggestion let me know.

Thanks

20

Thanks for the feedback!

This bit in the code writes the lyrics sections, so first delete this if you don't want them included in the html at all:

<div id="Title $get(TITLE)" class="db shl" align="center">
<div class="lyr">$iflonger(%unsyncedlyrics%,5,<pre>$cutLeft(%unsyncedlyrics%,5)</pre>,)</div>
</div>

There is some other code which generates the css and javascript formatting for the lyrics you could also take out, but leaving it in won't hurt anything.

Do note that if using this HTML as intended with browser javascript enabled, however, you can easily hide display of all the lyrics sections simply by pressing "Hide Lyrics" at the top. If you then print only what is visible at that time, you should have a printout or pdf (depending how you print with your browser) with no lyrics.

I'm not sure what tag you are storing the format types (ex: "vinyl") in, but if you wanted to add that tag after the album name, search for this string:

<div class="alb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; %year% · <a href="java script:showhideA(''Album $put(ALBUM,$add($get(ALBUM),1))'')">%album%</a></div>

and change it to something like this:

<div class="alb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; %year% · <a href="java script:showhideA(''Album $put(ALBUM,$add($get(ALBUM),1))'')">%album%</a> · %YOUR FORMAT TAG%</div>

You can experiment with different font sizes relatively easy by adjusting the numbers in this bit of CSS at the top of the document:

 div.art { font-size:0.875em; text-align:left; line-height:1.5; }
 div.alb { font-size:0.813em; text-align:left; line-height:1.5; }
 div.trk { font-size:0.813em; text-align:left; line-height:1.3; }
 div.lyr { font-size:0.938em; text-align:center; width:90%%; }

where "art" is the name of the ARTIST or BAND, "alb" is the name of the ALBUM, "trk" is the name of the SONG, and "lyr" (which you'll have deleted) are the LYRICS. An "em" is the height of a standard letter "m" in your browser. Bigger numbers result in larger fonts. The "line-height" figures adjust the spacing between lines.

[Edited to add:] I should probably point out that you can also use the standard font size adjustment features of your browser, to increase or decrease the font sizes of all text in the document at once, in scale. For example, by pushing control and scrolling the mouse wheel.

Breaking the list into two or more columns displayed at the same time is more difficult and not something I can offer a solution to at this moment. I've kinda been side-tracked away from working on this the last few weeks but do plan on adding some more features in the future, and tidying up the sorting changes discussed previously above.