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 
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? 
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 
tutorial-req-amp. We can now start tracking our tutorial requests 
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
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!