In prep for Tuesday’s You Show workshop session on audio I worked feverishly about 4 hours Monday night and 3 hours Tuesday morning to create the newest SPLOT tool, the Sound Pool.

This is a place to share audio clips, tracks, either MP3 audio either found on the web (via a URL) or uploaded to the pool. Last night I decided to add support for SoundCLoud tracks. It’s a direct followup from the Image Pool with a few new enhancements.

This is done as a WordPress child theme of the Baskerville theme, another elegant gem by Anders Noren.

Beyond clean design, responsive layout, a total lack of Theme Bloat, Baskerville makes full use of WordPress Post Formats, a feature I’ve never much paid attention to. But it allows a post layout (or its representation on the front page or archive) to display slightly differently depending on the format (based on media)– if you use a video format and provide a URL for YouTube or vimeo, the video is embedded on the front page of Baskerville and at the top of the post. If you use audio, then it embeds a sound player.

Editing this post by hand, you would choose audio as a format in the bottom right (I actually hid the other 7 formats not used in this site), and then enter the URL for the audio in the top right.

This means on the front page, all of the media can be played without even having to click to the post.

To enable uploads of media, I am using the same approach as not only the Image Pool but also the TRU Writer. This is topic of a future post, but it means that I have to secretly, invisibly log a visitor into a secret Author account (to make available the media uploader, and for the Writer, the rich text editor).

As an example, Jon Fulton uploaded a one called Splotsquelch – it is his example of taking a single recorded sound (the puff of an inhaler) and editing it into a musical composition:

On the form used to add content (it currently does not require a pass phrase to access), we collect info (name of person sharing the sound, name of the person/entity to give it credit, and a license under which it was found or will be shared, if original).

This provides the basis for a new feature, cut and paste attribution text, one with HTML:

I’m trying to simplify the web form for sharing a new sound, the only required items are a title, the sound itself and a license.

Clicking the “upload sound” button opens the media uploader; a file can be dragged and dropped to send to the server. When a choice is made, the URL gets inserted into the field below.

But sounds can also be added simply by entering a URL for an MP3 file or, as of last night, a soundcloud track. I use a pair of functions; one that does a string match looking for “soundcloud.com” in a variable to detemrine if it is from SoundCloud, and another that can add a check to make sure the URL ends in “.mp3″

[sourcecode lang=”php”]
function url_is_audio ($url) {
// tests urls to see if they point to an audio type, either an mp3 URL or Soundcloud page

// if we have a SoundCloud URL, activate the green light
if ( url_is_soundcloud ( $url ) ) return true;

// otherwise let’s look at the file extension on the URL
$fileExtention = pathinfo ( $url, PATHINFO_EXTENSION ); // get file extension for url
$allowables = array( ‘mp3’); // allowable file extensions

// check the url file extension to ones we will allow
return ( in_array( strtolower( $fileExtention) , $allowables ) );
}

function url_is_soundcloud ( $url ) {
if ( strpos( $url, ‘soundcloud.com’) === false ) {
return (false);
} else {
return (true);
}
}
[/sourcecode]

Next we allow choices of categories, free form tagging, and a caption — what becomes the body of the post. I heard you critics, there is no longer a requirement of a caption. This is sad, because you may end up with the contextless flow of stuff that typifies tumblr. Captions are important (to me).

Last are the names of the person sharing the audio (take credit or stay Anonymous), and fields to add the name of who to credit for it (optional) and a license choice (not optional, I am holding this line).

Once cleared of some basic form content checking, the info is added as a new “post” and adjusted to reflect all the things in the form (adding categories and tags, custom post data, setting the post format to audio).

The URL that identifies the sound file is added as post meta data, and my code adds the other bits:

The theme has a configuration screen for the site admin, where you can make access require a code word to use the upload form. I don’t have email notification built in now, it could be an option to turn on/off in future.

One of the first things I added to the theme was options to download the audio (for mp3 uploads or links) inspired by a tweet comment by Ken Bauer — the native WordPress audio player never provides a link to download.

I put it in thrice, adding a link to the front page (as an icon) and in sinle post, below the content, and in the bottom post data:

This is east to do since it is stored as the post meta data value for audio_url. Since I added the ability to embed SoundCloud (see below), my logic has to work only if the post represents an MP3. In the content-audio.php template which formats the content just for the audio post-formats, I use ($audio_url is fetched earlier from the post meta data).

[sourcecode lang=”php”]
if ( $audio_url and !$is_soundcloud ) {
echo ‘Download‘;
}
[/sourcecode]

Note the use of download inside the link tag! This makes sure the link just downloads, rather than opening in a new tab. I had to create some new icons to present on the front page and the grey background box, just had to do some copying of the styles done use for the rest of the theme.

I had not planned to make Soundcloud an options, but I am also helping Bryan Jackson on a new site for his Talons #IntroGuitar class; he took my suggestion to try Baskerville. He asked me last night why no sound played when he put a SoundCloud URL in for the audio field– that’s because the theme is not designed for it! The mods I made on his site, came into play for the Sound Pool.

On both the content-audio.php (formats an entry for the front page) and single.php (formats a single post), I do the same thing. At the top, I fetch the value of the audio URL, and then run that against my function so I know if it is SoundCloud or not.

[sourcecode lang=”php”]
ID, ‘audio_url’, true);
$is_soundcloud = url_is_soundcloud ($audio_url);
?>
[/sourcecode]

And when it comes time to display the audio, if the URL is for SoundCloud, I use the function that embeds the player. If the URL is for an MP3, we use the native audio player.

[sourcecode lang=”php”]

[/sourcecode]

The one different I do for the single.php is to add an option to the embed so it makes the player a small size vertically on the page:

[sourcecode lang=”php”]
240) );?>
[/sourcecode]

Once I can test out a few more things, this will be made available on my github site– I have a heap of documentation to write for all these SPLOTS!

And the next iteration will be using this theme for a “Pool” that would have options to share images, audio, video, and quotes (all built-in post-format types).

SPLOT Fever! Take a dip in the sound pool and tell me what you hear.