1

I have a post with 2 column layout. The first column has an mp3 player. I am thinking of adding a Lyrics window in the second column. Based on the song selected by the user, the Lyrics window will display the Song Lyrics. (without refreshing the whole page). Is this possible in a self-hosted wordpress site? Thanks for helping.

3
  • The mp3 player is actually a plugin. That's the reason for keeping the Lyrics window in a separate column. I guess it would be more complex to modify the plugin to achieve the result in a single column.
    – Janaaaa
    Aug 4, 2012 at 21:59
  • Which plugin you are using ?
    – Amit Kosti
    Aug 4, 2012 at 22:08
  • I am using HTML5 jQuery Audio Player. wordpress.org/extend/plugins/html5-jquery-audio-player
    – Janaaaa
    Aug 4, 2012 at 22:14

1 Answer 1

0

You can use jquery to accomplish this or javascript, without looking at your code I would hazard a guess at what is required, this might take some effort.

Some things you will need to think about include how you are going to retrieve the lyrics, i.e. are you going to get the information from another site, store the lyrics within your own database or maybe a site has an api which will allow you to get the information.

The following process will most likely be initiated by the user clicking a song or clicking the next button, or choosing a song from a drop down menu depending on your setup. From the Demo page for this plugin it seems more like clicking a song or the next button.

In short you will need to get the text from the div with a class called title (from the music player html output) using jquery or javascript to capture the value.

You will need to use the jquery ajax methods to send the value to your php file which contains the logic. This implies that you would have an sql statement which resembles the following:

select lyrics from musicTable where song-title = '$songTitleRequested'

This can be messy and you might want to find out an easier way to reference songs maybe using a synthetic key or some other technique.

So if this is successful you can return the results from your php file to the jquery ajax request.

You will then target the div in which you want to display the lyrics and use jquery to append the data. Remember to use .empty() before appending a new song.

So a bit of jQuery, ajax, php, sql and you will be fine, especially to avoid page reloads. Hope this somewhat guides you in the right direction. It would be nice to provide code examples, but as you can see this is a ton of work.

Get a useful IDE, utilise xdebug and firebug is your friend.

1
  • Thank you. This is perfect and is the exact thing i have been looking for.
    – Janaaaa
    Aug 5, 2012 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.