WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
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. – Ramnath Aug 4 '12 at 21:59
Which plugin you are using ? – amit Aug 4 '12 at 22:08
I am using HTML5 jQuery Audio Player. wordpress.org/extend/plugins/html5-jquery-audio-player – Ramnath Aug 4 '12 at 22:14
up vote 0 down vote accepted

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.

share|improve this answer
Thank you. This is perfect and is the exact thing i have been looking for. – Ramnath Aug 5 '12 at 23:54

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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