Getting A Music Player In Your Sidebar

Just had an interesting issue getting a music player in the side bar to actually fit.

Adding is easy enough from your WordPress Dashboard > Appearance > Widgets.

I just added a text widget into the sidebar. This enables you to add text and/or html script into the sidebar.

The script to show a music player is very simple:


<audio controls="controls">
<source src="YOUR MUSIC SOURCE FILE LOCATION">
</source>

The problem was this script led to a player bar which wanted to be around 450 pixels wide. However, the sidebar is only 200 pixels wide so half the player bar overflowed further to the right.

Fortunately, the WordPress sidebar will also recognise more sophisticated html so I was able to include an inline css command at the beginning of the widget – HOWEVERWIDEYOUWANTITTOBE=numerical value in pixels:


	<style>
	audio { width: HOWEVERWIDEYOUWANTITTOBEpx; }
	</style>

There doesn’t seem to be any need to include any other html script.

Hope this works for you.

Next, I need to figure out how to get my tag cloud to stay in the sidebar …

This entry was posted in Techie and tagged , , , , . Bookmark the permalink.

One Response to Getting A Music Player In Your Sidebar

  1. That British Bloke says:

    PS: There seems to be an issue with Safari Mobile not rendering some of my sidebar boxes correctly which is irritating although not terminal. So, I guess a solution is still in progress …

Leave a Reply

Your email address will not be published. Required fields are marked *