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"> </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"> </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 %}}