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!
Hi @danpastori as requested i have put together an example, to ensure everything is easily understood i use one of the example from the documentation I just added few modifications
For this example i use wave js for visualization and lyricer js for song lyrics click Demo to have a look.
Since lyricer js does not have a cdn i can’t run it on codepen, I think I have to send file to you
Note:
buttons on top of the player toggle between lyric, visualization and image
This is awesome! Thank you so much for sharing!
To be honest, I’ve never heard of LyricerJS but holy cow, that is amazing. I’d love to make some integration instructions with it. I was going to work on time callbacks to do this, but I think LyricerJS would be a pretty sweet integration.
Also, did you make that visualization?
No I didn’t make the visualization I use Wave js. I was able to pass an id to the Amplitude audio element before binding to the wave js instance.
Wow, I’ve never seen Wave.js before! Definitely want to some integration instructions. Thanks for pointing that out!