Integrate Song Lyrics

i am using amplitude js to power my music player, i will like to know if i can add song lyrics to the player. I tried using rabbit lyrics js seems not to be working

Hey @samueldan,

Thanks for opening your question on here! As of now, we do not support lyrics but we were just talking about adding this feature the other day.

Maybe this is the conversation that opens the discussion of what the feature would look like?

It would be interesting to get @danpastoriā€™s thoughts on this too.

So since we donā€™t have the feature now letā€™s start a discussion on trying to make this feature seem tangible:

  • What would this feature look like to you?
  • Any methods of connection or services that you would like it to support?

From there we can start putting together documentation on it and get it on the road map :grin:

Hi @samueldan,

You could add lyrics a few ways. If you want them to display all at once, you can add a lyrics key to your song element:

{
url: 'http://song.url.com',
lyrics: "These are song lyrics"
}

Then on the page you can add an element with the attribute data-attr-song-info="lyrics" and your lyrics will show within that element.

You could also get tricky and define callbacks that show at certain times within the song.

Oh nice! I wasnā€™t aware of this. So do we still need to track this as a feature request?

Or should we tag this as ā€œsomething that needs to be documentedā€?

Thank you for your quick response. Basically I think they are a lot of libraries out there which support song lyrics on html5 audio tag example Rabbit lyrics js which is initialize by passing the audio source id to rabbits lyrics js class and a div containing the lyrics.
Amplitude js has a function amplitude_song_info which can easily pass song lyrics from a json response to the lyrics div
Just one implementation is missing from the context the id of the html5 audio tag, which enable the lyrics library to work properly. If that can be implemented then we are good

Let us know if you like this option that Dan explained: Integrate Song Lyrics

If that works, then we should be good? :smiley::crossed_fingers:

This is something Iā€™d like to spend some time writing a tutorial on how to do.

@samueldan You can do what Rabbit Lyrics JS does with a time callback on a song object: https://521dimensions.com/open-source/amplitudejs/docs/configuration/song-objects.html#song-specific-visualization. It essentially runs a function whenever that time signature passes in the song. You could hook into these time callbacks and display lyrics on the page as well.

Thanks alot i will give this a try, you all have been really helpful

2 Likes

No problem!

@danpastori: Just an FYI, I tagged this as :open_book:tutorial-req-amp. We can now start tracking our tutorial requests :metal:

Love the tag. Iā€™ll be be adding a few to this list to resolve.

No problem! If you do need access to the actual audio tag, you can run: Amplitude.getAudio() and it will return the audio instance as well (https://521dimensions.com/open-source/amplitudejs/docs/functions/#get-audio). Let us know if you have any more questions!

1 Like

Hi thanks for the initial assistance, I was able to implement lyrics using the time_callbacks and it works. But now i want to fetch this lyrics in to a p tag at the specified time and fade out on next lyric line is this possible?
Secondly I try using jquery selector to get the audio element after exposing the audio element using Amplitude.getAudio() I get an error can you also help with that

Hey @samueldan, great news that you got it working! What error are you getting?

When I fetch the lyrics into a div, I get object response instead of the lyrics

And am not able to select the audio element after exposing the amplitude audio tag using Amplitude.getAudio(), do you have idea how to select amplitude audio tag using either jquery selector or javascript selector

Hi @samueldan,

If youā€™ve gotten the lyrics to appear into a tag at a certain time, to make them fade out, youā€™d have to apply a CSS transition to the element. Iā€™d recommend looking at: https://animista.net/play/entrances/fade-in for all of the necessary keyframes. You can make some really cool UIs with her stuff.

As for using the Javascript audio after you return it, Iā€™d set it up something like this:

let audio = Amplitude.getAudio();
// call methods on audio

What are you trying to do with the returned audio element? You will probably have to call the javascript version of whatever you are trying to do since itā€™s the JS representation of the HTML5 Audio Tag.

Let me know if that helps!

Your question ā€œWhat are you trying to do with the returned audio element?ā€, i have a method I want to bind the instance to. Let me give an example
new parser({
element: document.findElementByTagName(ā€˜audioā€™),
mediaElement: document.findElementById(ā€˜audio-1ā€™)
})
Your assistant is really appreciated

Iā€™d try to do something like this:

new parser({
     element: Amplitude.getAudio(),
     mediaElement: Amplitude.getAudio()
})

Does that work? The document.findElementBy...() should return the JS representation anyway.

Solved!
For clarity Amplitude.getAudio() return the actual html5 audio tag to the web console to work with it requires binding an event to the function like this Amplitude.getAudio().currentTime (check Web console for output) or returning the html5 audio tag back to the document and selecting it using the tag name like this var audioTag = Amplitude.getAudio()
$(ā€™#single-playerā€™).html(audioTag)
Var audioTime = document.getElementsByTagName(ā€˜audioā€™)[0].currentTime
alert(audioTime)
I am willing to provide examples should the need arise thanks, you both( @danpastori and @jaydrogers) have really been helpful

2 Likes

Hi @samueldan,

Iā€™d be really interested in seeing the code you have and how you solved the problem. We are working on 5.3 & 6.0 of AmplitudeJS so if you have any contributions to the documentation or insight that you feel can help other devs, weā€™d love to see it!