95-Audio players on the WordPress blogs

Updated 2019-09-21

SoundCloud has a lot of features, but it’s now a full on commercial application that I can’t afford. I’m back to trying to see how much I can do with WordPress and CSS.

From 2014-08-13

I’m still pretty fond of SoundCloud, but in order to host songs for this site I need to sign up for a premium plan which, although inexpensive, is not in the budget at the moment. Therefore, I’ve got to go back to the basic WordPress audio player (which is discussed below) for most of my tracks.


Since I’m signed up with SoundCloud, and they have such good integration with WordPress, I’m eventually going to use Soundcloud to host some of my music for this site. But the WordPress embeddable players still have their purpose…


The coolest news (well, it was news) was that Soundcloud created a way to embed their very nice audio players into WordPress sites (like this one). For instance, here’s our tune “Fol de Rol” in that format:
or here’s a player pointing to the same file, with the comments and auto-play set to default with width=250:

Nice! Well…I went to all that trouble to customize my own player, but it’s OK since I can still host music here at WordPress. Also, the download option for the Soundcloud player appears to give you the wav option but not the mp3 option. Things are changing all the time over there so don’t take anything you read here as the last word.

WordPress itself offers a nifty little mp3 player…but it only does play mp3s (not OGG format, which is strange since OGG is a supported WordPress format…they say it’s a Flash issue) and its customizability is quite limited.

Use WordPress player

  • mp3s only
  • streaming only: a person can listen but not download
  • doesn’t try to figure out if a file is copyrighted or not

Use Soundcloud player

  • needs to point to uncompressed file (question: do Macs have any problems playing WAV format files?) (update 2010: I think they have changed this so you can use common compressed codecs now)
  • file can be downloaded (a characteristic of the Soundcloud implementation at the moment-this may have been changed by 2010 as well)
  • player is much fancier (includes a way to jump to different parts of the file)
  • unfortunately you need to be signed up with a paid SoundCloud account–more expenses for a site that doesn’t pay for itself anyway.

Here’s what the WordPress player looks like after my tweakage:

“The Horse You Rode In On” (har)
(4:16) from “Songs in Work”
©2008 tim p scott
(click (>) to play)

(notice the use of the “float: left” style in the table tag). Also, keep in mind there’s a bunch of CSS affecting its display as well.

Hey! I didn’t think it had volume control (the slider to the right of the little speaker icon), either I didn’t notice it or it’s been slipped in all quiet-like recently. But that’s very cool. Now you can adjust the volume using the little graduated bar gadget on the left of the player!

[I put the code for this player in here, but unfortunately WordPress sees its HTML and tries to interpret it again…I’m afraid I’m going to have to include it as a popup or something.]

The “sourcecode” feature of WordPress is a nice idea, but it doesn’t always work and doesn’t appear to be able to handle all kinds of code.

For instance it took a whole bunch of HTML lines and stuck them on a single line which makes it impossible to read. You have to select the whole box; copy it to the clipboard, then paste it into some other editor to properly read it. That’s poor.

It also seems to strip out some code, making the whole thing additionally useless. I think it needs more work…

Anyway, back to the mp3 player experiments. I tried using “float:right;margin-left:10px;” and that does what you’d expect (sticks the player over to the right).

“The Elucidatory Apparatus…”
(4:12) a work in progress
©2009 tim p scott
(click (>) to play)

The other thing that dawns on me is that the title of the player should give an indication of the length of the piece so the visitor has an idea of what he or she’d be in for if they wanted to play the whole thing…Once the player opens it does give you the elapsed time but not the remaining time. That would of course be easy to do since I know how long the file is that’s being played…so I’ll try to remember to add the total time as (m:ss) in the title of the player.

Some HTML/CSS experiments…

(This was on the Listen page, but it didn’t make sense to keep it there so I moved it to this page.) OK…my experiment today will be to see if I can get this player (below) to “float” in this block of text; i.e., so the text wraps around it….Cool, it worked. The text was too close to the right side of the player, at first, so I just added some margin space to the player y Roberto es tu tío… (translation: and Bob’s your uncle).

I’ll put the code for this in the “Site stuff area” since it really doesn’t below cluttering up this page, I’m just showing off for a little while.

Whoaaa Nellie…what I had to do above was make the table a 50% width, otherwise the thing stretched all the way across the page.. I’m still fooling around with the HTML, trying to get it to look good if there are one or two players on a page…Things work, they’re just not quite as beautiful as I want them to eventually be.This page will eventually have some sample tunes from each release in the tim p scott catalog. You can also click on a CD cover icon and go to the detail page for that release.And now: tables within tables…below are two players on a line. Basically they’re two td’s within a single table.

I originally experimented with having two players in a table using the same song. But on 25 Jan 2009 I changed the right hand one for “The Elucidatory Apparatus…” which is a piece that’s freshly out of the oven:

from “MMIV”
©2004 tim p scott
(click (>) to play)
“The Elucidatory Apparatus…”
a work in progress
©2009 tim p scott
(click (>) to play)

And that’s how that works.

Cool! Using CSS, I can force the length of the little audio player to 250 px…that allows me to get two players on a line in the current design (see above)…

Originally the WP (WordPress) widget didn’t have a volume control; but that’s fixed now yay. But I see from one of the WordPress FAQs that they want to severely limit the HTML tags and things that a person can do on wordpress.com to avoid people purposely or accidentally crashing the system. That means things like one’s own Javascript or ActiveX is definitely out.

Another little annoyance is that the players don’t appear to know about each other: if you have two on a page and one is playing, setting the other one playing will end up playing them both at the same time. I’d sort of like it if I could force only one to play at a time, maybe I’ll find some cool API hooks that will allow me to do that.

And I also need to figure out how to link to all the other places on the net that have my music files…

The other thing that’s not so excellent is a way to show how many sub-pages are below a given one. You can tell by inspecting the list in the right column, but it’s a little confusing. I may have to hack some more CSS to just list the 10, 20, 30, etc. level pages…

Page#95/last edited 2019-07-22