Overview
Back to table of contents
This tool builds a complete standalone music website from one or more ABC files.
Each tune is embedded directly in the exported HTML and is rendered and played by
the abcjs-eskin-portable JavaScript library. The generated site can include a display/instrument selector, large tunebook navigation, Table of Contents,
individual tune sections, T:* style section headers, playback controls, cursor tracking, autoscroll, decorative
ornaments between tunes, and links back to the Table of Contents.
On desktop browsers, a guided tour showing the creation of a simple tunebook website is available by clicking the Guided Tour button at the top left of the window.
abcjs-eskin Website Builder Zoom Webinar Video
1. Load ABC files
Back to table of contents
- Click Load ABC Files.
- Select one or more
.abc or .txt files.
- Each tune that begins with an
X: field will be added to the collection.
- The Loaded Tunes box shows the files and tunes that will be included in the exported website. The small Clear button beside the Loaded Tunes label removes the current collection after confirmation.
- On desktop computers, you can also drag and drop files onto the Loaded Tunes box:
- ABC files are added as tunes.
- Project files load the saved ABC tunes, settings, and custom theme (if present). Settings are applied immediately.
- Website Builder settings files are applied immediately.
- Custom theme files are saved as the custom theme and the tool switches to the Custom theme.
Files can contain one tune or many tunes. Opening additional files adds their tunes
to the current collection.
Any ABC file header before the first X: is applied to every tune from that
file.
2. Load and save projects
Back to table of contents
A project file is a Website Builder work file that contains both the currently loaded ABC tune records and the current website settings.
If the selected website theme is Custom, the project file also includes the custom theme data.
- Click Load Project to select a previously saved project file. The builder validates the project, replaces the current loaded ABC tunes, and immediately applies the saved settings.
- Click Save Project to save the loaded ABC tunes and all current settings to a project
.txt file. On iPhone and iPad, this opens the iOS share sheet; on other platforms, it uses the browser's normal download behavior.
- You can also drag and drop a project file onto the Loaded Tunes area. This loads the project tunes and immediately applies the project settings.
- After loading a project, you can replace the ABC tunes while keeping the loaded project settings: click the Clear button in the Loaded Tunes area, then use Load ABC Files or drag and drop new ABC files into the Loaded Tunes area.
- Project files are separate from exported websites. Use Build and Save Website when you want the final generated website HTML file.
Back to table of contents
Click Settings to configure the site before building. The settings are divided into four tabs. Each setting label also has a small ? help button that opens this guide directly to the description for that control.
Text & Content
Back to Configure website
- Website title appears in the main header of the exported site.
- Subtitle appears below the title. Leave it blank to remove that space.
- Every entered website text field except Website title accepts
<br/> tags for controlled line breaks and hyperlinks written as <a href="URL">Website</a>.
- Add
target="_blank" when a hyperlink should open in a new browser tab, for example <a href="https://example.com" target="_blank">Website</a>.
- Links use colors derived from the selected website theme. Other HTML is displayed as ordinary text. The website title does not interpret HTML tags.
- Include tune title and meta text above each tune adds the tune title and any available composer or rhythm information above each tune. It is disabled by default.
- The Include text before all the tunes checkbox must be enabled for the optional collection text to appear.
- Text before all the tunes adds centered introductory text before the collection. Press Enter in this field to create multiple lines.
- Print title page and text before tunes controls optional front-matter pages when a standalone generated website is printed from the browser or saved as PDF.
- Disabled is the default. Printing only includes the tune(s).
- Title page only prints the website title and subtitle (if either are not blank) on its own page before the tune(s).
- Text before tunes only prints the text from Text before all the tunes (if enabled and not blank) on its own page followed by the tune(s). No title page is printed.
- Title page including text before tunes prints the title and subtitle (if either are not blank) on its own page with text from Text before all the tunes (if enabled and not blank) on the same page, followed by the tune(s).
- Title page, text before tunes on own pages prints the title and subtitle (if either are not blank) on one page, then text from Text before all the tunes (if enabled and not blank) on a separate page, followed by the tune(s).
- In Multiple tune display mode, if the generated website has Tune Sections, title-page options append the currently displayed Tune Section name to the printed website title.
- This setting applies only to Standalone website exports. Embedded website exports intentionally do not include Website Builder print CSS because the host page's layout and print styles can affect pagination and visibility.
Style & Options
Back to Configure website
- Music genre visual theme selects the complete visual theme for the exported site including colors and graphic decorations.
- Notation / tablature display selects the notation or tablature layout for the exported site.
- Standard notation displays ordinary music notation without tablature.
- Mandolin, GDAD Bouzouki, Standard Guitar, and DADGAD Guitar tablature with notation display tablature together with Standard notation.
- Mandolin, GDAD Bouzouki, Standard Guitar, and DADGAD Guitar tablature without notation display standalone stringed-instrument tablature.
- Tin Whistle (D) tablature with notation renders a D whistle fingering line below the Standard notation using the same approach as the ABC Transcription Tools.
- Playback cursor color selects the translucent block playback cursor color.
- Green is the default.
- Blue uses a bright blue cursor.
- Red uses a bright red cursor.
- Player controller position places the player controls above or below the notation.
- Notation width relative to page body controls how much of the page width is used by both the notation and its player.
- Maximum website body width controls the overall maximum width of the exported site.
Digital music stand use-case tip: For vertically short/square tunes that already render in a fixed number of notation lines, such as a six-line tune, try 700 px or lower when building a website for tablet landscape viewing. The 700 px, 650 px, 600 px, 550 px, and 500 px choices can make the rendered notation more compact vertically, which may help the complete tune fit on one screen without scrolling.
Use the widest of these values that still lets the full tune fit comfortably, because lower values also make the notation smaller. Always preview representative tunes on the target tablet, since title length, metadata, lyrics, chords, annotations, and notation spacing can affect the final height.
- Include table of contents controls whether the exported site includes the tune-navigation Table of Contents.
- Disabled omits the Table of Contents and the Table of Contents buttons in tune and section-header panels.
- Enabled displays the Table of Contents.
- Enabled (+ search bar) is the default and adds a search box directly below the Table of Contents heading in the generated website. Typing in the search box immediately filters the Table of Contents entries by case-insensitive title text, and the small x button clears the search.
- Enabled (+ search bar + search all button) adds the same search box plus a small Search all sections button inside the search area. Search all sections is only available on generated websites that also have a Tune Section selector. It searches all tune sections, shows a custom styled result list of up to 50 matching tune entries with their tune section names, and reports when only the first matches are shown. Choosing a result switches the Tune Section selector to that tune's section and jumps directly to the tune. If Large tune collection grouping is Disabled, this setting is automatically forced back to Enabled (+ search bar) because there is no Tune Section selector to search across.
- Simple drop-down menu replaces the normal Table of Contents tune tiles and search controls with a tune dropdown below the Table of Contents heading. Selecting a tune behaves the same as selecting that tune's normal Table of Contents tile. In Single tune display mode, the selected tune remains shown in the dropdown until another tune is selected or the menu is rebuilt by changing Tune Section. In Multiple tune display mode, the dropdown resets after each selection. Tune-number prefixes are included when tune numbers are shown. When a generated website also has a Tune Section selector, the dropdown is rebuilt to contain the tunes in the newly selected tune section.
- When a generated website also has a Tune Section selector, the Table of Contents title reflects the currently selected tune section name for all Table of Contents styles. With Simple drop-down menu, the tune dropdown is also rebuilt for the selected section.
When Tune Display is set to Single, the Table of Contents is always available so visitors can choose which tune to display. The Disabled option remains visible in the selector, but if it is selected while Tune Display is Single, the builder immediately changes the Table of Contents setting back to Enabled. If older saved settings or a project use Single tune display with the Table of Contents hidden, the builder automatically changes the Table of Contents setting to Enabled.
- Maximum table of contents columns controls the maximum number of tune columns used by the generated website Table of Contents (if enabled).
- 1 keeps the Table of Contents in a single column at all screen widths.
- 2 caps it at two columns on wide screens.
- 3 caps the Table of Contents at three columns on wide screens.
- 4 is the default and allows up to four columns on wide screens.
The generated website still uses responsive CSS for tablets and phones. For example, a four-column Table of Contents steps down to fewer columns as the screen narrows, and all multi-column choices eventually become one column on phone-width screens. This setting does not affect Simple drop-down menu.
- Tune numbers in table of contents and tune sections controls whether the exported site shows numbered badges for ordinary tunes. The default is Show.
- Table of contents gap size controls the spacing between tune entries in the generated website Table of Contents.
- Small uses a
10px gap.
- Medium is the default and uses a
12px gap.
- Large uses a
15px gap.
- Larger uses a
18px gap.
- Extra Large uses a
21px gap.
This setting does not affect Simple drop-down menu.
- Tune order controls the order used inside generated website groups.
- Keep original order is the default.
- Sort by title, ignoring leading articles sorts by title while ignoring the same known article set used by the title article reverser. This includes leading forms such as
The Kesh and trailing forms such as Kesh, The, along with the other supported articles.
- If Large tune collection grouping is set to Alphabetical by title (groups of 100), or the equivalent label for another batch size, the builder forces Tune order to Sort by title, ignoring leading articles.
- If Large tune collection grouping is set to Manual T: section headers (groups of 100), or the equivalent label for another batch size, the builder forces Tune order to Keep original order.
- Tune Display controls whether generated websites render only one selected tune at a time or multiple visible tunes at once.
- Single creates a single-tune website mode. On launch, only the first tune is rendered. When a visitor chooses another tune from the Table of Contents or a Search all sections result, playback stops, the current tune is cleared, and the selected tune is rendered and made ready to play.
- Multiple is the default. All visible tunes in the selected tune section are rendered and ready to play.
- If Single is selected, the exported website includes a Table of Contents because it is needed to choose which tune is displayed.
- In Single mode, T:* style section-header panels are not displayed with the selected tune. Their links in the Table of Contents and Search all sections results are no-ops and do not stop playback, change the displayed tune, or scroll the page.
- Single mode is useful for very long tunes, such as classical arrangements, where it makes sense to show and prepare only one tune at a time.
In Single mode, the Table of Contents cannot be disabled because it is needed to choose the tune to display. If Include table of contents is set to Disabled and you change Tune Display to Single, the builder changes the Table of Contents setting to Enabled. The Disabled choice remains visible, but if it is selected while Tune Display is Single, the builder immediately changes the setting back to Enabled.
To create a website with one tune and no Table of Contents, load only that tune, set Tune Display to Multiple, and set Include table of contents to Disabled. Multiple mode does not require a Table of Contents, so the one tune is displayed directly.
- Large tune collection grouping adds a Tune Section selector to the generated website for very large collections.
- Disabled is the default.
- Groups of 100 tunes breaks the ordinary tunes into simple sequential groups.
- Alphabetical by title (groups of 100) creates alphabetical title groups using the selected Large tune collection grouping batch size as a hard maximum for finite batch sizes. If one starting letter contains more tunes than the selected size, that single letter is split into explicit range subgroups such as A · 1–50, A · 51–100, and A · 101–150.
- R: Rhythm tag (groups of 100) creates rhythm groups and splits any rhythm group larger than the selected batch size into sequential subgroups without alphabetical sorting.
- R: Rhythm tag + alphabetical subgroups (groups of 100) creates rhythm groups and splits large rhythm groups into alphabetical subgroups. Automatic alphabetical splitting uses the selected batch size as a hard maximum for finite batch sizes; if one starting letter contains more tunes than the selected size inside a rhythm group, it is split into the same explicit range subgroups.
- Manual T: section headers (groups of 100) uses existing
T:* section-header tunes as group boundaries, preserves the loaded tune order, and splits any manual section larger than the selected batch size into sequential subgroups.
- The Groups of 100 and (groups of 100) value in the options listed above will be replaced by the batch size currently selected in the Large tune collection grouping batch size control below.
- In generated websites that use the Tune Section selector, the visitor's most recent Tune Section choice is saved in a website-specific localStorage key and restored the next time that generated website is opened.
- With grouping Disabled,
T:* section-header tunes are shown normally in the generated website. Other automatic grouping modes omit them. Manual T: section headers uses them only as Tune Section names.
- If an R: Rhythm tag grouping option is selected and some ordinary tunes do not have
R: tags, the builder warns before saving. If you continue, tunes without rhythm tags are placed in an Other rhythm group.
- Large tune collection grouping batch size controls the target size used by large tune collection grouping modes that split tunes into batches.
- Choose 25, 50, 100, 150, 200, 250, 300, or Unlimited.
- 100 is the default.
- Unlimited disables batch splitting while still allowing the selected grouping mode to create its main groups.
- Display/Instrument selector dropdown adds a Display / Instrument selector at the top of the exported website just below the title and subtitle. It is shown by default.
- Hide does not add a Display/Instrument selector dropdown to the website header.
- Show includes the standard display and melody-instrument choices.
- Show (add Bass & Chords Only) behaves like Show and also adds a final Bass & Chords Only selector choice.
- When shown, it also enables Inject soundfont and MIDI settings for the exported website so every tune receives the selected soundfont plus the selected melody, bass, and chord MIDI programs and volume values.
- The first selector choice is the selected Melody instrument from the Playback & Sounds tab, with its label shortened to a generic instrument family name, and it uses the current Notation / tablature display setting for notation or tablature rendering.
- The user can also choose Mandolin, Tenor Banjo, GDAD Bouzouki, Standard Guitar, DADGAD Guitar, Tin Whistle, Irish Flute, Uilleann Pipes, Accordion, Concertina, Fiddle, Harp, or Hammered Dulcimer for all tunes.
- With Show (add Bass & Chords Only), the user can also choose Bass & Chords Only from the bottom of the instrument selector.
- Bass & Chords Only mutes the melody and only plays the bass and chords. If this instrument is selected and there are no chords in a tune, that tune will play only silence.
- Choices that need tablature re-render all tunes with the matching tablature style, and every selector choice updates the melody MIDI program used for playback.
- The generated website stores the visitor's most recent selector choice in a website-specific localStorage key and restores it the next time that generated website is opened.
- Add ABC Transcription Tools buttons to each tune optionally adds a button above the top left of each ordinary tune on wider screens; on narrow/mobile phone screens, the tune action buttons stack neatly above the title. These buttons are not added to T:* style section headers.
- Disabled does not add ABC Transcription Tools buttons to the exported website.
- Add Open in Player buttons adds a button labeled Play in ABC Transcription Tools, which opens the tune in the ABC Transcription Tools Player.
- Add Open in Editor buttons adds a button labeled Edit in ABC Transcription Tools, which opens the tune in the ABC Transcription Tools ABC editor.
- Add Open in Full Screen buttons adds a button labeled Open in ABC Transcription Tools, which opens the tune in the ABC Transcription Tools full-screen view.
- The opened tune can be played, used for tune training, edited, transposed, or displayed using the available instrument tablature options.
- If the generated share link for a tune would be longer than 8100 characters, the generated website will show a message when the button is clicked instead of opening the tune in the ABC Transcription Tools.
- Add "Back to Top-of-Tune" buttons below each tune adds an extra Top of Tune button below each tune. Clicking the button stops playback, hides all play cursors, and returns to the top of the tune. Disabled is the default.
- Add "Table of Contents" buttons below each tune adds an extra Table of Contents button below each tune when a Table of Contents is included. This is useful for very long scores, such as classical music arrangements, where visitors may finish far below the top of the tune panel. If Include table of contents is set to Disabled, this setting is automatically forced to Disabled. Disabled is the default.
- Playback autoscroll view ahead controls whether the generated website autoscrolls during playback and how much upcoming music it tries to keep visible below the playback cursor.
- Disable autoscroll keeps the playback cursor visible but prevents page and notation autoscrolling during playback.
- Small keeps the cursor visible with a compact view-ahead area.
- Medium keeps more upcoming music visible below the cursor.
- Large keeps still more upcoming music visible below the cursor. (Default)
- Larger and Extra Large use progressively larger view-ahead areas.
- Medium, Large, Larger, or Extra Large can be helpful for classical scores or other music where the player needs to see upcoming music near the bottom of the screen.
- On very short screens, such as phone landscape orientation, generated websites use a centered cursor fallback to reduce up/down autoscroll bouncing with tall cursors.
- Show decorative ornament between tunes controls whether the selected theme ornament appears between tune sections and above the footer.
- Hide separates tunes with comfortable blank spacing instead and omits the ornament above the footer.
- Show is the default and displays the selected theme ornament between tunes and above the footer.
- Title and Table of Contents label font size controls the responsive font sizes of the main website title and the Table of Contents heading on the generated website.
- Small uses a compact website title and Table of Contents heading. This can be useful when conserving vertical space on tablets or when the website title is long.
- Medium is the default and provides a balanced size between the compact and original presentation.
- Large is a larger size than Medium and matches older version of the tool's default website title and Table of Contents font sizes.
- This setting does not change tune titles or
T:* style section-header titles.
- Stringed instrument tablature names controls whether generated Mandolin, GDAD Bouzouki, Standard Guitar, and DADGAD Guitar tablature displays its instrument name label in the rendered notation.
- Hide is the default and hides the stringed-instrument tablature name labels.
- Show displays the labels.
- This applies both to the main Notation / tablature display setting and to stringed-instrument choices made with the exported website's Display / Instrument selector.
- Automatically reverse title articles controls whether known trailing title articles are moved to the front of ordinary tune titles.
- Disabled leaves titles exactly as loaded.
- Kesh, The -> The Kesh is the default.
- The supported article set is also used when sorting titles for large tune collection grouping.
- The setting affects only displayed titles in the loaded tune list, Table of Contents, and tune metadata headings in the exported website.
- The ABC text itself is not changed, title text inside the rendered notation is not changed, and T:* style section headers are never article-reversed.
- Deployment target controls whether the exported HTML is optimized as a complete standalone page or as HTML that may be pasted directly into another website builder or content-management page.
- Standalone website is the default and produces the same standalone export style used by previous versions. Use this when the exported HTML file will be opened directly, uploaded as its own page, or embedded with an iframe.
- Embedded website (experimental) adds a defensive CSS compatibility layer and an outer wrapper around the visible site content to reduce interference from host-page styles when the exported HTML is directly pasted and embedded into another page, for example on Squarespace, WordPress, or other hosted CMS services.
- Embedded website mode is experimental. It can help protect fonts, form fields, search bar sizing, buttons, and tune panel layout from host-page CSS, but it cannot guarantee perfect isolation from every website platform or theme. Iframe embedding remains the safest option when complete style isolation is required.
Playback & Sounds
Back to Configure website
- Enable Inject soundfont and MIDI settings to replace the corresponding sound
directives in every tune with the selected values. This is also enabled automatically in the exported website whenever Display/Instrument selector dropdown is set to Show or Show (add Bass & Chords Only).
- Melody instrument selects the main MIDI program used for tune melody playback. When the Display/Instrument selector is shown, the selector's first choice uses this selected melody instrument and injects that same MIDI program for playback.
- Soundfont selects the soundfont collection used by the injected playback settings.
- Bass instrument selects the MIDI program used for generated bass accompaniment. Selecting Mute writes
mute for that MIDI program.
- Bass volume (0–127) selects the injected bass accompaniment volume.
- Chord instrument selects the MIDI program used for generated chord accompaniment. Selecting Mute writes
mute for that MIDI program.
- Chord volume (0–127) selects the injected chord accompaniment volume.
- When soundfont and MIDI injection is enabled, Standard Guitar and DADGAD Guitar tablature add %%MIDI transpose -12 so playback sounds in the expected guitar octave. This applies to both notation-with-tablature and standalone tablature, and is also used when those display modes are opened from the generated website in the ABC Transcription Tools.
When injection is enabled, the tool inserts these directives after any shared ABC file header. For standalone tablature, the automatically selected %%staffsep directive is placed after the shared header and before these sound and MIDI directives:
%soundfont <soundfont>
%%MIDI program <program>
%%MIDI bassprog <program>
%%MIDI bassvol <0–127>
%%MIDI chordprog <program>
%%MIDI chordvol <0–127>
If neither a tune nor its shared ABC file header already contains a %reverb directive, the exported tune automatically receives:
%reverb chamber 0.95 0.05
The automatic reverb directive is placed after the shared ABC file header, any injected %%staffsep, and any injected soundfont and MIDI program or volume directives. An existing %reverb directive is preserved and prevents the default from being added.
When injection is enabled, existing soundfont and matching MIDI program or volume
directives in the source tunes are removed before the selected settings are inserted.
Disable injection to preserve each tune's original sound settings.
Manage Settings
Back to Configure website
- Load Settings opens a saved settings file and loads those values into the settings dialog. Loading a settings file does not apply those settings to the tool. Click Apply to use the loaded settings, or Cancel to leave the currently applied settings unchanged. When loaded settings are applied, the default exported website filename is reset from the loaded website title.
- On desktop computers, you can also drag a saved Website Builder settings
.txt file, or a custom theme .txt file, onto any tab in the settings dialog. Dropped settings are loaded into the dialog and the visible controls are refreshed, but the live website settings are not changed until you click Apply. Dropped custom themes are validated and saved as the current custom theme, but the theme menu is left unchanged.
- Save Settings prompts for a filename and saves the settings currently displayed in the settings dialog in the file, even if those settings changes have not been applied yet. On iPhone and iPad, this opens the iOS share sheet; on other platforms, it uses the browser's normal download behavior. Saving a settings file does not apply those settings to the tool.
- Import Custom Theme loads a custom theme file generated by the abcjs-eskin Website Theme Builder tool. After import, the theme menu switches to Custom - Imported theme name.
- Imported custom themes are saved immediately in the browser, even if you close the settings dialog without clicking Apply. Click Apply to use the imported custom theme for exported websites, or Cancel to leave the currently applied theme unchanged.
- If no custom theme is loaded, the theme menu shows Custom - No theme loaded. Choosing it displays a message asking you to import a custom theme first.
- Reset all Settings returns every website setting to its factory default and also removes any imported custom theme.
Custom themes are intended for advanced/developer use. Contact the developer if you need help creating or refining a custom theme.
4. Saved settings
Back to table of contents
Website settings are stored in this browser using localStorage when
Apply is clicked. Saving a settings file or loading a settings file into the dialog, including by drag and drop onto the settings dialog, does not update the browser's stored settings unless you click Apply. Stored settings (but not any loaded tunes) are restored automatically the next time the tool is opened.
- Use Manage Settings > Save Settings to save the current settings from the open Settings dialog to a reusable settings
.txt file. On iPhone and iPad, the file is offered through the iOS share sheet.
- If a built-in theme is selected, the saved settings file contains only the website settings.
- If Custom is selected and a custom theme is loaded, the saved settings file includes both the website settings and the custom theme data needed to use that theme later.
- If Custom is selected but no custom theme is loaded, the settings file is not saved and the tool displays a warning.
- Loading a settings file that includes custom theme data loads that theme into the Settings dialog and updates the Custom theme option shown there.
- Loaded settings and any included custom theme do not become the active browser-stored settings until you click Apply.
- Dropping a standalone custom theme file onto the settings dialog saves the custom theme immediately, but does not change the selected website theme unless you choose Custom and click Apply.
5. Preview the website
Back to table of contents
After loading at least one tune and applying all the settings for the website, click Preview to generate the website with the currently loaded ABC and applied settings and open it in a new browser tab. Click Close Preview at the top right of the previewed website to close the tab and return to the Website Builder.
6. Build and save the website
Back to table of contents
- Optionally use Preview before saving to check the generated website in a new browser tab.
- After loading at least one tune, click Build and Save Website.
- Enter the desired website HTML filename in the dialog. If you enter a filename, that filename is reused for later website saves during the same browser session only. Loading and applying a saved settings file resets this default filename from the loaded website title.
- The tool creates a complete HTML file and either downloads it or, on iPhone and iPad, opens the iOS share sheet.
The exported file contains:
- All tune ABC source directly in the HTML.
- Optional tune titles and composer/rhythm meta text above each tune.
- An optional Table of Contents using tune-navigation tiles, searchable tune-navigation tiles, or a simple tune dropdown menu.
- An optional Table of Contents button near the top of every tune that returns to the top of the Table of Contents when the Table of Contents is included.
- Optional additional Table of Contents buttons below tunes. These are especially useful for very long scores, such as classical music arrangements, where visitors may finish far below the top of the tune panel.
- Optional ABC Transcription Tools link buttons for each tune.
- An optional global Display/Instrument selector dropdown.
- T:* style section headers if present.
- Optional decorative ornaments between tune sections.
- Independent playback controls for every tune.
- Click-the-notation pause and resume behavior.
- A wide translucent playback cursor with smooth autoscroll.
- Links to the required portable JavaScript and audio CSS libraries.
The ABC is not fetched from a separate file. It remains embedded in the generated
website so the page can be moved or uploaded as a single HTML document.
7. Using the generated website
Back to table of contents
- If the Table of Contents is included, choose a tune from its tiles or simple dropdown menu to stop current playback, hide all play cursors, and jump directly to that tune.
- Use the player controls to start, pause, restart, and change playback speed. Click or tap the tempo percentage field in any tune's player to open a small tempo entry dialog. Enter a value from 5 to 400 or choose one of the preset percentages to preload the entry field, then choose Apply to update that tune's play controller or Cancel to leave it unchanged.
- If the Display/Instrument selector is shown, use the Display / Instrument selector near the top of the page to re-render the currently selected tune section with another display style or melody instrument before playing. If no value has been chosen yet, the website uses the first item in the selector: the Melody instrument selected when the website was built. If the selector includes Bass & Chords Only, that choice mutes the melody and only plays the bass and chords; tunes with no chords will play only silence. The selected value is remembered for that generated website.
- If large tune collection grouping is enabled, use the Tune Section selector near the top of the generated website to choose the current group. Only the selected group is shown and rendered. For every Table of Contents style, the Table of Contents heading changes to the selected tune section name. With Simple drop-down menu, the dropdown is also rebuilt with the tunes in the selected section. The selected Tune Section value is remembered for that generated website and restored the next time the website is opened. Most grouping modes start tune numbers at 1 in each group; Groups of 100 tunes keeps tune numbers continuous across all groups.
- If the generated website includes both a Table of Contents search bar and the Search all sections button, the ordinary search field continues to filter only the currently selected tune section. Click Search all sections to search across every tune section without changing the currently displayed Table of Contents. The custom result list shows at most 50 matches, includes each match's tune section name, and reports when only the first matches are shown. Choosing a result switches to that tune section and jumps directly to the selected tune.
- Click the notation itself to pause or resume playback. Tunes marked with
%website_builder_no_play_controller do not show a play controller and do not support click-to-play-or-pause notation behavior.
- During playback, the cursor follows the music and the page scrolls smoothly as needed.
- If the Table of Contents is included, use a tune's Table of Contents button to stop playback, hide all play cursors, and return to the top of the Table of Contents. If Add "Table of Contents" buttons below each tune is enabled, the same button is also shown below each tune, below the play controller when the controller is below the notation. If Add "Back to Top-of-Tune" buttons below each tune is enabled, the lower Top of Tune button also stops playback, hides all play cursors, and returns to the top of the current tune.
8. Printing the generated website
Back to table of contents
Standalone generated websites include print-only CSS for browser printing and saving to PDF.
- Each printed tune starts on a new page.
- Only the rendered notation area is printed for each tune.
- In Single tune display mode, only the notation for the one tune currently displayed is printed.
- In Multiple tune display mode, the notation for all tunes currently displayed on the page is printed. If the website uses a Tune Section selector, only the tunes in the currently displayed section are printed.
- When printing in Multiple tune display mode from a website with Tune Sections, any enabled print title page appends the current Tune Section name to the website title. For example, My Tune Book becomes My Tune Book - M 1-25 while the M 1-25 section is displayed.
- Print title page and text before tunes can optionally print the website title/subtitle, included text before the tunes (if enabled), or both before the notation pages.
- Rendered staff systems are kept intact when possible so a line of notation is not split across two printed pages. Longer tunes can continue onto additional pages between staff systems.
- Any page headers or footers added by the browser itself, such as a URL, date, or page number, are controlled by the browser's print dialog and are not part of the generated website. Turn those browser options off when a notation-only page is required.
Embedded website exports intentionally do not include the Website Builder's full print layout. Printing and pagination can inherit rules from the host website. Use a standalone generated website when consistent notation-only pagination and optional print front matter are required.
9. Clearing the current collection
Back to table of contents
Click the small Clear button beside the Loaded Tunes label to remove all currently loaded files and tunes from the builder.
You will be asked to confirm the operation.
This does not erase saved website settings.
Back to table of contents
The Website Builder uses abcjs-eskin-portable for notation rendering and playback,
but neither the portable library nor this Website Builder includes every feature of the full
ABC Transcription Tools application.
Some of the more complex ABC Transcription Tools features are implemented by application code
outside the abcjs library. Those features are not automatically available in exported websites.
This includes P: tag based parts playback, where the ABC Transcription Tools
application interprets the part structure and controls the playback sequence.
Tunes with multiple parts using P: tags that also have a %play_flatten_parts annotation will
play following the indicated parts order in the ABC Transcription Tools player if an optional ABC Transcription Tools button is present on the tune and clicked. Such tunes will show Open in ABC Transcription Tools for correct P: parts order playback below the tune on the website.
The Website Builder also recognizes %website_builder_no_play_controller.
Place this annotation inside a specific tune to suppress that tune's play controller in the generated website.
The notation for that tune is still rendered, but clicking or pressing Enter/Space on the notation does not start or pause playback,
and the Click the notation to pause or resume playing status text is not shown.
To apply the same behavior to every tune in an ABC file, place
%website_builder_no_play_controller in the ABC file header before the first X: tag.
If the ABC file header contains a PDF Tunebook Features block beginning with
% Start of PDF Tunebook Features and ending with
% End of PDF Tunebook Features, most of that block is intended only for PDF export
from ABC Transcription Tools and is not copied into each tune in the exported website.
The start and end marker lines are also removed.
Six compatible annotations from that block are kept because they can still be useful when a tune
is opened back in ABC Transcription Tools for PDF export from an optional per-tune button:
%pageheader specifies plain page-header text for PDFs exported from ABC Transcription Tools.
%pagefooter specifies plain page-footer text for PDFs exported from ABC Transcription Tools.
%urlpageheader specifies a PDF page-header hyperlink and its displayed text.
%urlpagefooter specifies a PDF page-footer hyperlink and its displayed text.
%add_all_playback_links allows tune titles in PDFs exported from ABC Transcription Tools to be clickable playback links.
%add_all_playback_volumes supplies the playback volume values used with those clickable PDF tune-title links.
Other PDF-only annotations in that block, such as Table of Contents, index, QR-code, PDF-quality,
and spacing directives, are excluded from the per-tune ABC header injection used by the generated website.
11. abcjs-eskin Website Theme Builder
Back to table of contents
The abcjs-eskin Website Theme Builder
is a companion tool for creating custom visual themes that can be imported into this Website Builder.
abcjs-eskin Website Theme Builder Demo Video
- Use the Theme Builder to start from an existing built-in theme, adjust colors, fonts, header decoration, shadows, rounded corners, and optional custom CSS, then export a custom theme file.
- In this Website Builder, open Settings > Manage Settings and choose Import Custom Theme to load the exported theme file.
- After a successful import, the theme menu switches to Custom - Imported theme name. Click Apply to use the imported theme for exported websites.
- Imported custom themes are saved in this browser immediately, even if you close the settings dialog without clicking Apply. Resetting all settings removes the imported custom theme.
12. Launching from other ABC tools
Back to table of contents
This Website Builder can also be opened directly from compatible abcjs-eskin tools without first saving an ABC file.
For example, ABC Transcription Tools can send the complete current ABC editor contents, and thesession.org Power Tools
can send its generated ABC tune settings directly to the Website Builder.
- When the transfer succeeds, the status line and Loaded Tunes panel will show the source reported by the sending tool, such as ABC Transcription Tools or thesession.org Power Tools.
- If your browser blocks the new tab or window, allow popups for the sending tool and try again.
- If the direct transfer does not complete, save the ABC from the sending tool as a file and use Load ABC Files here instead.
Tunes received directly from another tool replace any tunes currently loaded in the Website Builder.
After the transfer, you can still use Load ABC Files to add additional ABC files to the collection before building the website.
13. Notes
Back to table of contents
- The exported website requires internet access to load the linked abcjs-eskin-portable
JavaScript library and related CSS files unless those files are later hosted locally and the links are changed.
- Playback requires internet connectivity to read the instrument notes from the remote soundfont repositories.
- The builder uses the included pako deflate library to load ABC tunes from a
def= share-link parameter. When optional ABC Transcription Tools tune links are enabled, the generated website loads pako.min.js and creates the matching share link when the visitor clicks a tune's ABC Transcription Tools button. If the generated website has a Display / Instrument selector, the link is created from the currently selected display and instrument choice, including the matching format, MIDI program, volume, and octave-transpose settings.
- Very large tune collections can produce large HTML files and may take longer to render.
- ABC syntax or playback problems in a source tune will also appear in the exported site.
- On iPhone and iPad, Build and Save Website opens the iOS share sheet with the generated HTML file. Choose Save to Files, AirDrop, Mail, or another available destination. If file sharing is unavailable, the tool falls back to the normal browser download method.
- On other platforms, saving continues to use the browser's normal file-download behavior.
- The visual styles affect the page presentation; they do not alter the tune data.
- Use
<br/>, <br />, or <br> in any entered website text field except the title to force a line break in the displayed text.
- Use hyperlinks such as
<a href="https://example.com">Website</a> in the subtitle, footer, or optional text fields. Add target="_blank" to open the link in a new tab. HTTP and HTTPS protocols are supported; unsafe link protocols are shown as ordinary text.
14. Developer Customization
Back to table of contents
Customizing the generated website CSS
Back to Developer Customization
The generated website CSS includes self-documenting comments for the main developer customization points. In the exported .html file, search for these labels to find the safest places to edit:
Theme customization: main CSS variables for colors, rounded corners, and panel shadows.
Page width customization: maximum content width for the exported website.
Header styling customization:, Header subtitle customization:, and Header selector label color customization: top banner background and header text colors.
Table of Contents card customization:, TOC search customization:, and TOC link grid customization: TOC panel, search field, and tune-link layout.
Tune card customization:, Tune card gap customization:, and Mobile card spacing customization: spacing and styling for tune panels.
Section header panel spacing customization:, Section header title side padding customization:, and Responsive section header customization: T:* section-header layout.
Print front matter customization: print-only title/subtitle and text-before-tunes page layout, and Standalone website print CSS: notation-only tune print/PDF rules for standalone exports.
Changing responsive font-size maximums in an exported website
Back to Developer Customization
The generated website CSS also includes self-documenting comments immediately before each responsive font-size:clamp(...) rule. In the exported .html file, search for Font size customization: to find the rules for the website title, Table of Contents title, T:* style section headers, tune metadata titles, and the centered Working... overlay message.
For each rule, change the last value in clamp() to adjust the maximum font size. Use a smaller value to make the text smaller on wider screens, or a larger value to allow a larger maximum. The first value is the minimum size, and the middle value controls how the font scales responsively between the minimum and maximum. The current defaults use slightly smaller maximums so long titles fit better across built-in themes.
Built-in and custom theme behavior
Back to Developer Customization
These font-size defaults are part of the generated website CSS template, not individual built-in theme definitions, so the smaller maximums apply to all built-in themes. They also apply to imported custom themes unless that custom theme includes Additional Custom CSS, preserved special CSS, or manually edited exported CSS that overrides these same selectors later in the stylesheet.
CSS variables
Back to Developer Customization
Controls broad theme colors, rounded corners, and panel shadows from one place:
:root { --bg:...; --panel:...; --ink:...; --muted:...; --primary:...; --secondary:...; --accent:...; --line:...; --radius:...; --shadow:...; }
Change these first when you want the whole exported website to use different colors, border colors, corner roundness, or a flatter/more shadowed card style.
Page width
Back to Developer Customization
Controls the maximum width of the exported website content:
.page-width { width:min(1120px, calc(100% - 34px)); margin:0 auto; }
Increase the pixel value for a wider page, decrease it for a narrower page. The generated value reflects the selected website width setting.
Back to Developer Customization
Controls the top banner background, vertical padding, alignment, and accent border:
.hero { padding:44px 0 38px; color:#fff; background:...; text-align:center; border-bottom:6px solid var(--accent); }
Adjust padding to make the header taller or shorter. Change background to customize the header color or gradient.
After changing the header background, use these selectors to change header text colors for contrast:
.hero h1 { color:#fff; } changes the website title color.
.hero-copy { color:#fff; } changes the subtitle color.
.site-instrument-selector label { color:#fff; } changes the Display / Instrument: and Tune Section: label colors when either selector is present.
Table of Contents styling
Back to Developer Customization
Controls the TOC panel, optional search field, and tune-link grid:
.table-of-contents, .toc-search, .toc-search input, .toc-search-all-button, .toc-search-all-results, .toc-links, and .toc-links a
Change TOC padding for a roomier or more compact card. Use the Maximum table of contents columns setting to choose the normal maximum column count and the Table of contents gap size setting to choose the spacing between TOC entries before exporting. For manual CSS edits after export, change the documented .toc-links rule and its related media queries together so the responsive tablet and phone behavior stays intact.
Card spacing
Back to Developer Customization
Controls the spacing inside and between tune cards:
.score-panel { padding:32px 34px 30px; ... } and .score-panel + .score-panel { margin-top:24px; }
Increase padding for more whitespace around notation and controls; decrease it for a denser tune list. Mobile spacing is documented separately in the @media (max-width:760px) block.
Back to Developer Customization
Controls T:* section divider panel spacing, title size, side padding, and responsive stacking:
.section-header-title, .section-header-panel, .section-header-panel .section-header-title, and the @media (max-width:900px) section-header rules.
The Table of Contents title and section headers use separate rules so they can be customized independently.
Website title
Back to Developer Customization
The Title and Table of Contents label font size setting provides Small, Medium, and Large responsive presets for the main website title. For manual sizing beyond those presets, edit the generated CSS block labeled Title and Table of Contents label font size override and change the font-size value for .hero h1.
Table of Contents title
Back to Developer Customization
The Title and Table of Contents label font size setting also provides the responsive size preset for the Table of Contents heading above the tune links. For manual sizing beyond those presets, edit the generated CSS block labeled Title and Table of Contents label font size override and change the font-size value for .table-of-contents h2.
Back to Developer Customization
Controls only section header titles created from T: tags whose trimmed text starts with *:
.section-header-title { color:var(--ink); font-size:clamp(1.7rem,4vw,2.2rem); font-weight:800; line-height:1.1; margin:0; text-align:center; }
Tune metadata titles
Back to Developer Customization
Controls the tune title shown at the top of each tune panel:
.tune-header h2 { margin:0; padding:0 155px; font-size:clamp(1.5rem,3.7vw,2.1rem); text-align:center; line-height:1.15; }
For example, change 2.1rem to 1.8rem to make tune metadata titles smaller.
Working overlay message
Back to Developer Customization
Controls the centered Working... message shown while the exported website is changing display/instrument settings or preparing audio:
font-size:clamp(1.15rem, 3vw, 1.55rem);
Print CSS
Back to Developer Customization
Standalone generated websites include documented print CSS after the theme and custom-theme CSS. The Standalone website print CSS block hides normal non-notation website content, hides the playback cursor, preserves the current Single/Multiple and Tune Section visibility state, and starts each visible tune on a new printed page.
The Print front matter customization block controls the print-only title/subtitle and text-before-tunes pages generated by Print title page and text before tunes. The selected setting and available Text & Content values determine which hidden print-front-matter sections are generated. The print stylesheet shows those sections only when printing; no print-specific runtime JavaScript is used.
The notation print layout allows longer tunes to continue onto additional pages between rendered staff systems and keeps each staff-system SVG intact when possible. Embedded website exports intentionally omit the Website Builder print CSS because host-page layout and print styles can change visibility and pagination.
Adding or removing instruments from the Display / Instrument selector
Back to Developer Customization
Open the exported .html file in a text editor and search for
const instrumentChoices = { and <select id="site-instrument-selector".
- Find the selector markup containing
<select id="site-instrument-selector".
- Each instrument shown to visitors is one
<option> line. To remove an instrument, delete its option line.
- To add an instrument, add a new option with a unique
value.
- Find
const instrumentChoices = { and add or remove the matching entry with the same unique name.
For example, an option and matching entry must use the same id:
<option value="fiddle">Fiddle</option>
fiddle: {
displayMode: "notation",
program: "110",
format: "noten"
}
The builder's Show (add Bass & Chords Only) setting automatically adds this option at the end of the generated selector:
<option value="backupOnly">Bass & Chords Only</option>
It also adds this matching selector entry. The previous entry in instrumentChoices must end with a trailing comma before adding backupOnly:
backupOnly: { displayMode: "notation", program: "mute", format: "noten" }
Changing the instrument sound
Back to Developer Customization
In const instrumentChoices = {, change the program value for the instrument.
Program numbers are General MIDI program numbers, with the additional abcjs-eskin portable instruments
available in this tool's instrument list. For example, to make Tenor Banjo use the Mandolin sound,
change its program from "105" to "141":
tenorBanjo: { displayMode: "mandolinNotation", program: "141", format: "mandolin" }
Guitar-family entries can also include transpose: "-12" so playback sounds an octave lower.
Leave transpose out when no octave shift is wanted.
Changing tablature style or showing notation only
Back to Developer Customization
In each instrumentChoices entry, the displayMode value controls how the tune is redrawn.
You can change that value to any display mode supported by the generated website:
notation — standard notation only.
mandolinNotation or mandolinOnly — mandolin tablature with or without notation.
bouzoukiNotation or bouzoukiOnly — GDAD bouzouki tablature with or without notation.
guitarNotation or guitarOnly — standard guitar tablature with or without notation.
dadgadGuitarNotation or dadgadGuitarOnly — DADGAD guitar tablature with or without notation.
whistleNotation — tin whistle style tablature with notation.
For example, to keep the Mandolin sound but show notation only, change the Mandolin entry to:
mandolin: { displayMode: "notation", program: "141", format: "noten" }
- To make the Mandolin entry open in the ABC Transcription Tools using mandolin tablature formatting, keep
format: "mandolin".
- If the entry shows notation only, use
format: "noten".
- Guitar formats use
guitare for standard guitar and guitard for DADGAD.
- Tin whistle style entries use
whistle.
- GDAD bouzouki entries use
gdad.
Changing injected soundfont and MIDI accompaniment settings
Back to Developer Customization
When Inject soundfont and MIDI settings is enabled, the exported website includes ABC sound
directives for the selected soundfont, melody instrument, bass instrument, bass volume, chord
instrument, and chord volume. Websites with the Display / Instrument selector handle these
values differently from websites without the selector.
Exported websites with the Display / Instrument selector
Back to Developer Customization
In a selector-enabled exported website, search for const defaultSoundSettings = {.
This block controls the shared sound settings used whenever a visitor changes the selector:
const defaultSoundSettings = {
injectSounds: true,
soundfont: "fatboy",
bassProgram: "0",
bassVolume: "64",
chordProgram: "0",
chordVolume: "64"
};
Available soundfont names:
fluid — Fluid
musyng — Musyng Kite
fatboy — FatBoy
canvas — Canvas
mscore — MScore
arachno — Arachno
fluidhq — FluidHQ
- Change
soundfont to select the soundfont used by the generated website. Use one of the soundfont names listed above.
- Change
bassProgram to set the injected %%MIDI bassprog value for all selector choices.
- Change
bassVolume to set the injected %%MIDI bassvol value. Use a value from 0 to 127.
- Change
chordProgram to set the injected %%MIDI chordprog value for all selector choices.
- Change
chordVolume to set the injected %%MIDI chordvol value. Use a value from 0 to 127.
- Use General MIDI program numbers, or the abcjs-eskin portable program numbers shown in this tool's instrument list. Use
"mute" when you want to mute a bass or chord part.
In selector-enabled websites, the melody instrument is controlled separately for each selector entry.
Search for const instrumentChoices = { and edit the program value in the
desired entry:
mandolin: { displayMode: "mandolinNotation", program: "141", format: "mandolin" }
- Change
program: "141" to another instrument program to change the melody sound for that selector choice.
- For guitar-family selector choices, keep
transpose: "-12" if the playback should sound one octave lower.
- If you add a new selector entry, set its
program value there as well.
- The built-in
backupOnly selector entry uses program: "mute" to mute the melody and leave only bass and chord playback. If a tune has no chords, this choice will play only silence for that tune.
Exported websites without the Display / Instrument selector
Back to Developer Customization
In an exported website without the selector, the injected sound settings are written directly into
each embedded ABC tune. Search for %soundfont or for a tune block such as
<script type="text/plain" id="...-abc">, then edit the sound directives near
the top of each tune:
X:1
%soundfont fatboy
%%MIDI program 0
%%MIDI bassprog 0
%%MIDI bassvol 64
%%MIDI chordprog 0
%%MIDI chordvol 64
- Change
%soundfont fatboy to one of the available soundfont names listed above.
- Change
%%MIDI program to set the melody instrument.
- Change
%%MIDI bassprog and %%MIDI chordprog to set the bass and chord instruments.
- Change
%%MIDI bassvol and %%MIDI chordvol to set the bass and chord volumes from 0 to 127.
- For generated guitar and DADGAD guitar sites, keep the injected
%%MIDI transpose -12 line when you want playback to sound in the expected guitar octave.
Changing background animation speed
Back to Developer Customization
Some built-in themes include CSS background animation, such as the drifting shamrock layers in the Flying Shamrocks theme. These animations are controlled by normal CSS animation declarations in the generated website CSS.
To change the speed in an exported website, search the exported .html file for animation: near the theme's preserved custom CSS. The duration value is usually written in seconds, such as 104s or 144s. A larger duration makes the animation slower; a smaller duration makes it faster.
For example, to make a drifting shamrock layer about half as fast, double the duration:
animation: irishPubShamrockDriftOne 144s linear infinite;
Set it to double the duration:
animation: irishPubShamrockDriftOne 208s linear infinite;
If a theme has multiple animated layers, adjust each related animation: line by the same ratio so the layers keep their relative motion. Do not rename the animation unless you also rename the matching @keyframes block.
The generated CSS also includes a @media (prefers-reduced-motion: reduce) rule for animated background themes. Leave that rule in place so users who request reduced motion do not get the background animation.
15. Tip Jars
Back to table of contents
This tool was created by
Michael Eskin
If the tool has been useful to you, please consider supporting ongoing
development by tossing a few bucks into one of my online tip jars.
Venmo
@MichaelEskin
16. Source Code on GitHub
Back to table of contents
The source code for this tool is available on GitHub.