Help - Search - Members - Calendar
Full Version: New Export to HTML Settings (featuring Display of Lyrics)
Mp3tag Forums > Mp3tag - International > Development > Export
Flskydiver
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):

CODE
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
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 smile.gif

-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 ... )
foo_peter
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
Flskydiver
QUOTE (foo_peter @ Jun 8 2011, 06:17) *
forgive my bad english


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...
Flskydiver
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).
Flskydiver
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!
Flskydiver
[Updated post and attachment with improved and simplified version of what I posted here previously today:]

QUOTE (Flskydiver @ Jun 13 2011, 20:34) *
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!


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

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


to this a bit more complicated one:

CODE
$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
QUOTE (Flskydiver @ Jun 15 2011, 21:43) *
By changing the alpha-section loops from this simple "check first character" string:

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


to this a bit more complicated one:

CODE
$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)


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?
DetlevD
QUOTE (Flskydiver @ Jun 16 2011, 07:09) *
Hmm. I should point out replacing this loop makes the export CRAWL. Very slow. ...

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
Flskydiver
QUOTE (DetlevD @ Jun 16 2011, 02:43) *
Following export script as excitation for your development ...


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.
DetlevD
QUOTE (Flskydiver @ Jun 16 2011, 09:21) *
Yep, that got 'er done in about half the time, only about 20 minutes of deep thought for the same data set. ...

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
Flskydiver
QUOTE (DetlevD @ Jun 16 2011, 03:48) *
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.


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.
Flskydiver
QUOTE (DetlevD @ Jun 16 2011, 02:43) *
$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')']'


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...
Flskydiver
Final follow up on the regexps you provided:

QUOTE (DetlevD @ Jun 16 2011, 03:48) *
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.


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.
DetlevD
QUOTE (Flskydiver @ Jun 20 2011, 00:52) *
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 ...

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,&nbsp;I,J,&nbsp;J)
to ...
'&nbsp;'%groupartist%

DD.20110620.0638.CEST
Flskydiver
QUOTE (DetlevD @ Jun 20 2011, 00:35) *
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,&nbsp;I,J,&nbsp;J)
to ...
'&nbsp;'%groupartist%

DD.20110620.0638.CEST


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?)
DetlevD
QUOTE (Flskydiver @ Jun 21 2011, 18:58) *
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? ...

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
Flskydiver
QUOTE (DetlevD @ Jun 21 2011, 13:16) *
Excerpt from the Regexp Replace Format String Syntax:
\l ... Next output character in lower case.
\u ... Next output character in upper case.
\L ... All subsequent output characters lower case, until \E is found.
\U ... All subsequent output characters in upper case, until \E is found.
\E ... Terminates a \L or \U sequence.


DD.20110621.1915.CEST


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

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.
Beluna
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
Flskydiver
QUOTE (Beluna @ Jul 12 2011, 11:17) *
I like your template and need your assistance in making a few modifications.


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:

CODE
<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:

CODE
<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:

CODE
<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:

CODE
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.
Beluna
[quote name='Flskydiver' date='Jul 12 2011, 17:41' post='56772']
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:

CODE
<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.


Modifications looks great. I want to make a few more changes to your suggestions. Is it possible to align the Media Format to the Right and add a line break between Artist and Album.

Here's the way it looks in HTML.

Beniot-Freeman Project
1994 • The Beniot/Freeman ProjectCD (Original Media)
1 [▶] Reunion • 05:07
2 [▶] When She Believed In Me • 05:27
3 [▶] Mediterranean Nights • 06:58
4 [▶] Swept Away • 04:58
5 [▶] The End Of Our Season • 04:19
6 [▶] After The Love Has Gone • 04:20
7 [▶] Smartypants • 05:44
8 [▶] It's The Thought That Counts • 06:05
9 [▶] Mirage • 06:01

Billy Preston
1982 • The BestCD (Original Media)
1 [▶] Outa-Space • 04:15
2 [▶] Will It Go Round In Circles • 03:50
3 [▶] That's The Way God Planned It (Live) • 04:18

Blondie
1981 • The Best Of BlondieCD (Original Media)
1 [▶] Heart Of Glass • 04:29
2 [▶] Dreaming • 03:04
3 [▶] The Tide Is High • 04:36
4 [▶] In The Flesh • 02:30
5 [▶] Sunday Girl • 03:01

Bob Marley
2004 • The Best Of Bob MarleyCD (Original Media)
1 [▶] Trench Town Rock • 02:53
2 [▶] Mr. Brown • 03:29
3 [▶] How Many Times • 02:24
4 [▶] Soul Rebel • 03:45
5 [▶] Treat You Right • 02:12

Bobbi Humphrey
1992 • The Best OfCD (Original Media)
1 [▶] New York Times • 06:53
2 [▶] Uno Esta • 06:45
3 [▶] Harlem River Drive • 07:51

I would like to change it to where the Media type is aligned to the right, and a line space between Albums. So it display as follows:


Beniot-Freeman Project

1994 • The Beniot/Freeman Project ------------- CD (Original Media)

1 [▶] Reunion • 05:07
2 [▶] When She Believed In Me • 05:27
3 [▶] Mediterranean Nights • 06:58
4 [▶] Swept Away • 04:58
5 [▶] The End Of Our Season • 04:19
6 [▶] After The Love Has Gone • 04:20
7 [▶] Smartypants • 05:44
8 [▶] It's The Thought That Counts • 06:05
9 [▶] Mirage • 06:01

Billy Preston

1982 • The Best ---------------- CD (Original Media)

1 [▶] Outa-Space • 04:15
2 [▶] Will It Go Round In Circles • 03:50
3 [▶] That's The Way God Planned It (Live) • 04:18

Blondie

1981 • The Best Of Blondie --------- CD (Original Media)

1 [▶] Heart Of Glass • 04:29
2 [▶] Dreaming • 03:04
3 [▶] The Tide Is High • 04:36
4 [▶] In The Flesh • 02:30
5 [▶] Sunday Girl • 03:01

Bob Marley

2004 • The Best Of Bob Marley -------- CD (Original Media)
1 [▶] Trench Town Rock • 02:53
2 [▶] Mr. Brown • 03:29
3 [▶] How Many Times • 02:24
4 [▶] Soul Rebel • 03:45
5 [▶] Treat You Right • 02:12

1992 • The Best Of -------- CD (Original Media)
1 [▶] New York Times • 06:53
2 [▶] Uno Esta • 06:45
3 [▶] Harlem River Drive • 07:51


Last, is there a size limit creating in an HTML. The reason I'm asking is I currently have my database divided into 4 selection: A-I, J-Q, R-S, T-Z. Makes it easier to load and manipulate.

Not sure what would happen if I tried to append all to one file. Probably would be manageble.

Thanks or all your assistance.
Flskydiver
QUOTE (Beluna @ Jul 13 2011, 14:22) *
Modifications looks great. I want to make a few more changes to your suggestions. Is it possible to align the Media Format to the Right and add a line break between Artist and Album.

I would like to change it to where the Media type is aligned to the right,


You could do it with tables, but you'd need to update the CSS.
For example, you could add a "Menu" class to the existing tables and a "Line Item" Class for the new tables. Otherwise, all the albums would be in gray bordered boxes like the menus.

Using tables, the basic idea is to create a two column table for every album title / format line and justify the second to the right. Try changing this
CODE
<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>
to something like
CODE
<table width="50%%"><tr><td><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></td><td align="right"><div class="alb">%YOUR FORMAT TAG%</div></td></tr></table>

You could probably do it more cleanly with with CSS but I wouldn't know how off the top of my head. I specifically tried to avoid using tables because they add so much BLOAT to html code. For example, you might want to keep the left edge of the format types in line (justified left) so that would require you specifying the width of each column. More code. Repeated over and over for every album, it gets to be a lot of overhead.
QUOTE (Beluna @ Jul 13 2011, 14:22) *
and a line space between Albums.
If going the tables route, you could adjust the table cellpadding or margins to push out the surrounding text.

Otherwise, to put a line break before and after each artist name (except before the first one), add a "<br />" tag immediately before the third instance of "$loop" and another immediately before the second instance of "$loopend()".

Do similar if you also want spaces after each album (your example was inconsistent).
QUOTE (Beluna @ Jul 13 2011, 14:22) *
Last, is there a size limit creating in an HTML.
Technically, no, but to keep it relatively responsive in your browser try to keep the output file under 10mb.

My posted example is about that size and has the complete lyrics to over (IIRC) 5000 songs and over 6000 songs in all. By not including lyrics in your list I would think you could easily have 20,000 songs or more. The lyrics definitely make the bulk of my output code.

Hope this helps.
Beluna
[quote name='Flskydiver' date='Jul 13 2011, 20:49' post='56812']
You could do it with tables, but you'd need to update the CSS.
For example, you could add a "Menu" class to the existing tables and a "Line Item" Class for the new tables. Otherwise, all the albums would be in gray bordered boxes like the menus.


Update. I passed on the CSS modification. Actually, could not quite under how to modify, but the Html looks great and I like the layout.

However, I have a problem with printing the document. I can only print the first page.

No matter what the size of the Html wether I'm using IE or Firefox. I did some research and it seems it has something to do with the CSS.

Any Idea what's causing this and how to eliminate the problem.

Thanks
Flskydiver
QUOTE (Beluna @ Jul 15 2011, 10:54) *
Any Idea what's causing this and how to eliminate the problem.


Yeah, I didn't write this with printing in mind. I wrote it to provide me quick, easy access to song lyrics. But looking at it now I can see there could be issues printing it to paper, if someone wanted to do that. I'll have to add a "print mode" button in the next version. Should be easy enough.

In the meantime, you might want to try one of the simpler early versions of my script.

You can try making the edits suggested above to one of the .mte posted here:
http://forums.mp3tag.de/index.php?showtopic=13639
Nevermind, see below.
Flskydiver
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 above.
  • 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.

See post 1 of this thread to download.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.