Help with shortcode for song lyrics

I am trying to implement a lyrics functionality. I request you to see a demo in this GIF file first. The live page is available here Blog single (guitarx.com). If you inspect the source code, you can see that the following is the HTML Markup for the lyrics:

<!-- Song Lyrics -->
<div id="song-lyric" class="no-column position-relative overflow-auto">
	<div id="song-lyric-pre" class="pre">
		<div class="chord_lyric_line"><span class="hopamchuan_lyric">I </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">see you I </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">feel </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">you </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">That is how I </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">know you go </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">on </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">Far across the </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">distance </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_lyric">And </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">spaces bet- </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">ween </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">us </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">You have come to </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">show you go on</span></div>
		<div class="chord_lyric_line empty_line">&nbsp;</div>
		<div class="chord_lyric_line"><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">Am</span><i>]</i></span><span class="hopamchuan_lyric">Near </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">far where </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">ever you </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">are </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_lyric">I be-</span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">Am</span><i>]</i></span><span class="hopamchuan_lyric">lieve that the </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">heart does go </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">on </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">Am</span><i>]</i></span><span class="hopamchuan_lyric">Once </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">more you </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">open the </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">door </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_lyric">And you're </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">Am</span><i>]</i></span><span class="hopamchuan_lyric">here in my </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">Em</span><i>]</i></span><span class="hopamchuan_lyric">heart </span></div>
		<div class="chord_lyric_line"><span class="hopamchuan_lyric">And my </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric">heart will go </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric">on and </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">C</span><i>]</i></span><span class="hopamchuan_lyric">on </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span><span class="hopamchuan_lyric" style="width: 15px;"> </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">F</span><i>]</i></span><span class="hopamchuan_lyric" style="width: 15px;"> </span><span class="hopamchuan_chord_inline"><i>[</i><span class="hopamchuan_chord">G</span><i>]</i></span></div>
		<div class="chord_lyric_line empty_line">&nbsp;</div>
	</div>
</div>
<!-- / Song Lyrics -->

The button click basically invokes a change in class name, which results in different styling of those letters (implemented using jQuery).

What I am trying to achieve

This is my way of implementation(thinking). Feel free to suggest any other. Assuming I have a lyrics shortcode, how can I produce the above output by writing something like this:

{{% lyrics %}}
I [F]see you I [C]feel [G]you 
[C]That is how I [G]know you go [F]on 
[C]Far across the [G]distance 
...
{{% /lyrics %}}

Use a JS library to parse your ChordPro files/content.

Thanks for that @jmooring . I think this is what will get my job done. But how do I integrate this with Hugo ?

I know that something called npm exists but have never used it. I have used only vanilla JS. In fact, I love Hugo due to this reason (no JS complexity). Can you/anyone tell me how exactly can I integrate this with my workflow. Currently I use the basic hugo serve to preview website locally & hugo to deploy site to production.

What should I do, so that my shortcode is processed both in my local server & also during the final deployment ?

This is a non-trivial effort. Perhaps you could post a help wanted topic in the “services” section of this forum, presuming you have a reasonable budget.

Thanks @UtkarshVerma for implementing the shortcode.

1 Like