95-Audio players on the WordPress blogs

Update 13 August 2014 

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.

12 Jan 2013

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…

21 Feb 2010

The coolest news (well, it was news) was that Soundcloud (which I’ve written admiringly of elsewhere) 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)

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, 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 and Roberto was my tio…

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)…

It’s just sort of a minor annoyance that a person can’t change the volume from the widget. (Note that wordpress has fixed this as of this writing .) 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.

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 20140813