View more screenshots

Download Audiobar
Audiobar on WordPress.org

Thank you for visiting the Audiobar web site!

After several thousand downloads, six months of usage and no bug reports, Audiobar is has been released as stable! Carlo Capocasa says thank you very much to everyone involved in this success story and is really excited. Many thanks especially to all who have helped out with their feedback and their bug reports!

About

Audiobar is a way to keep listening while you browse.

It adds play buttons and an audio player bar to your site or blog.

When you continue browsing, playback continues in the audio player bar. When the song ist over, the player loops through all the songs that were on the page once.

Audiobar is a WordPress plugin.

News

November 3, 2011

And the first bugfix release is here! I’m proud to announce version 1.0.1 introduces a far superior way of extracting track titles than was available before. This will speed up busy sites tremendously, and fixes an issue that certain types of MP3 files could cause pages to stop loading. Thanks to the brave bug reporters, I couldn’t make Audiobar great without your help!

A quick note about forum replies… they’ve been a bit thin lateley, but every issue I can track down will get fixed. I’m sorry, but I can’t say exactly when, though, as life has a nasty habit of keeping one from programming.

In further news, there is now an official road map! I am also now officially looking for help. Are you a design Guru? Are you a JavaScript Ninja? Want to be part of something truly great? Want to change the way musicians make a living forever, and put them in control? Want to end the endless drivel played on commercial radio by making it obsolete? Want to have tomorrow’s Superstars shower you on end with gratitude? Want to have someone to talk to about creating your own lucrative online business? Drop me a line at carlo@carlocapocasa.com.

July 23, 2011

Wow, we’ve done it; a stable release! I feel humbled by the expierence, all those people working at what they love; Linux developers, PHP developers, WordPress developers, and here I am and can build on that and make something useful. My heartfelt thanks to everyone in the Free Software Community.

Features

  • Keep listening while you browse
  • Easy to insert files
  • Song titles come from the file
  • The page becomes the playlist
  • Simple and classy design
  • Configurable look
  • Cross Browser compatible
  • Fast loading speed
  • No popup window

Requirements

  • WordPress 3.0 or later
  • JavaScript enabled for user’s browser

Installation

  1. Download audiobar to your computer
  2. In the WordPress admin backend, select ‘Plugins’, then ‘Add New’, then ‘Upload’. Select the downloaded file and click ‘Upload’.
  3. Watch the plugin install, then click ‘Activate’.

How Audiobar Works

Audiobar works by adding a fancy player bar to your blog, and by taking all the links to songs you put on your blog or web pages and transforming each one into a play button that plays the song in the player. (It also adds one or more download buttons). That’s right, you put an ordinary song link into your WordPress content, both blog posts and pages work fine, and they will get turned into great-looking play buttons automatically. It’s like blogging yourself your own iPod. Of course, and that’s kind of the point of Audiobar, the bar keeps on playing no matter where visitors go on your blog.

When a song is up, Audiobar remembers what other songs were on the page when the play button was clicked, and plays that, until all songs got played or your happy site visitor clicks another play button. When that happens, the song plays, and when its up Audiobar remembers that new list of songs. That’s it!

It is true that the way this works could be made a little more obvious both to you and users. I’m working on it! But for now, I think it works pretty darn well :) Until I come up with some genius plan on how really smooth out the playlists, think of it as a pleasant surprise for your users. Click one song you love, get a whole list you didn’t even expect.

Uploading Songs

In your WordPress editor, there is a little button that looks like this: 

Click it.

Then a window pops up where you can upload your song. Upload it, and click insert into post. This creates a link to your Song, which is exactly what Audiobar will convert into a play button. Publish your page or post, and open a new browser tab to look at it on your site, like your visitors see it, in all its glory: Audiobar turned your simple text link into a shiny download button! Now ain’t that nice :)

So while you’re editing your post or page in your WordPress backend it’s a link to an uploaded song, when you save and look at it on your actual site it’s a player button. That simple!

You can put as many player buttons in one page or post as you like.

Blog Browsing

If you have a lot of blog posts on one page, like for a month, or the latest 5 etc., Audiobar will play back all the links in all the posts it can see when the user clicks a play button. So you have a lot of options on how to use that behavior for what you have in your mind for your site. Nobody can decide on how to do that but you, so give it some thought :) For example, you could put all your songs one one page for an epic overview of your work, or you could put all songs belonging to an album on one page, or if your more the music blogger kind of person you could go for an exciting jumble option and put all your songs randomly in blog posts and use the latest five as the front page. You see, with Audiobar the sky’s the limit, but you have to decide how you’re going to be using it.

Personally, I put all my songs on my front page, and use the rest of my site for other content.

Getting help

If you need help with Audiobar, please try these:

  1. Look through this page if you find the answer
  2. Search the Audiobar forum at WordPress.org
  3. If you can’t find a solution anywhere else, post at the Audiobar forum at WordPress.org

If you have a personal message you can email the author. If it’s about Audiobar please use the Audiobar forum at WordPress.org instead, so everyone can look up the answer.

License

Audiobar is licensed under the terms of the GPL2, which is the same license as WordPress.

Customization

If you like, you can customize the colors in the WordPress admin backend under ‘Settings’ -> ‘Audiobar’.

You may also disable the subtle ‘Audiobar’ link if you wish, which is completely fine to do if you’re not comfortable with it.

Autoplay

Automatic playback when the page loads (“Autoplay”) is not supported by audiobar for good reason.

  • Sound playback is not what most users expect to happen when visiting a web page
  • Web pages can get opened automatically, such as when restoring several browsing tabs

Unexpected sound playback can result in users that are disoriented, annoyed, publicly embarrassed, or could even damage equipment or ears.

Who cannot be dissuaded can use this hack to enable autoplay in a way that’s safe as far as the software goes:

Place a file called “audiobar-bar.php” that contains the following contents in your theme directory “/wp-content/themes/your-theme”

1
2
<br />
<?php $autoplay=1; include ABSPATH."wp-content/plugins/audiobar/templates/audiobar-bar.php";<br />

Road Map

Here’s what’s going to get developed!

1.0.x – Current Version

1.1.x – iPhone Support

1.2.x – URLs without the ‘#’ for Firefox, Chrome and Safari

1.9.x – Player-in-a-corner test run (Turn on in backend to participate, no changes for existing installs)

2.0.x – Player-in-a-corner (Chose between bar/corner in backend, no changes for existing installs)

2.1.x – Better playlist usability

Here are a few random design ideas and their status

  • iPhone/Android support – Scheduled, 1.1
  • Skins – Post 2.1
  • Visible playlists – 2.0
  • Repeat/Shuffle/Repeat-1 – 2.0
  • Standalone Audiobar (no wordpress plugin) – Post 2.1
  • Autoplay – Rejected (see below)

Credits

Initial design and development by Carlo Capocasa.

Helpful suggestions and reports by the Audiobar user base, who are making this rough diamond really shine. (And I mean that in a stable way!)

Troubleshooting

If your download links open in the browser, please try making sure the file .htaccess is writable and then deactivate and reactivate the plugin. If that doesn’t work, your web server needs to be configured to set the header “Content-Disposition=attachment” for files with extensions OGG, MP3, FLAC and WAV. Your server admin might be able to help you with this.

Use cases

George is a musician with some technical skill who runs his band’s web site with WordPress. He would like for users to be easily listen to his music while they browse his many merchandising items and get excited about his online liner notes. He installs Audiobar, changes the colors to his liking and links to all his music through the file manager.

Maggie is an avid music blogger who would like for her users to easily be able to loop through all her latest reviewed songs, or all the reviewed songs for a specific month or specific week. She configures her paging so her archive pages display all the songs on one page and instructs her readers to visit an archive page and press play on any song

Sheila is a studio musician who wants to demo her skills. She creates a page with all her tracks along with several pages worth of background information. Producers and A&R persons can listen to her demos while they read.

Jill wants to run a blog service for music bloggers, and wants to give her users a simple way to include a state-of-the-art audio player. Since the ordinary WordPress “Insert-Audio” button is used, her users quickly get the hang of how to use her service.

Fritz produces beat loops and samples and would like to showcase his work. He uses WordPress and Audiobar as his catalog, and asked a tech-savvy friend to put an additional “Buy” button in the template which allows for the purchase of the uncompressed studio quality versions through an external vendor. Fritz understands his professional customers wil shun lossily encoded samples and agrees that no further protection is necessary in this case.

Advanced Customizing

If you are a WordPress theme developer, you can replace Audiobar’s HTML and CSS template files with your own. To do so, you can copy one or more of them from the directory ‘/wp-content/plugins/audiobar/templates’ into your templates directory. Once you have done so, you can edit them to your liking.

Technical Details

Iframe

Audiobar achieves its goal of allowing playback to continue while browsing using no popup window by wrapping the entire site in an IFrame.

In order to make this as small a disadvantage as possible, the following has been done:

  • SEO: The frame page contains the entire standard front page, so search engines have something to find. There is a performance penalty, since the front page is loaded twice, but that only happens when the user first comes to the site, or closes and re-opens the browser window.
    There are conflicting reports on how Audiobar affects SEO. To gather some actual metrics, there are currently three identical test sites: sda s3b and s3c. These are blank wordpress sites with a random themes and some sample content. They are absolutely identical, except: s3a has no audiobar, s3b has ordinary audiobar as it is now, and s3c disables audiobar if the user agent string says it is a Robot. This experiment started on April 7 2013 and the winner will go into the next release.
  • Bookmarks: The URL of the framed page is relayed to the main URL and vice versa. While the bookmarks look a bit different (http://example.org/#/page!anchor instead of http://example.org/page#anchor), they work well.
  • External links: Links that lead off-site have the target=”_top” attribute.

Sound playback is done via HTML 5, with a fallback to the Maxi version of the excellent Flash Mp3 Player. A single modification has been made to the ActionScript source to call a JavaScript callback when playback has ended. This is documented in the ‘assets’ directory in the audiobar plugin directory.

Gradients, button shadows, text shadows and rounded corners are done via CSS. Non-supporting browsers degrade gracefully (See Screenshots).

JavaScript use

  • Provide playlist support
  • Make sure browser history is not affected by pressing the play button
  • Make sure clicking the home link does not create a second audiobar
  • Enable the audiobar when visiting a permalink (set javascript var audiobar_no_auto to true in your template header to disable this)
  • Change all external links to have a target=”_top”
  • Force flash fallback on Firefox if there is no OGG file provided
  • Required on Firefox for the HTML5 audio GUI to work
  • Make sure audiobar height is correct and there is no accidental scrolling

If the user disables JavaScript, basic functionality will work but the user experience will look broken. A notice is displayed in the bar in this case.

Known Issues

  • Must have an audio link on the front page, or the player will not display properly until the first play button is clicked
  • Using audiobar in Internet Explorer 6 causes a click sound at every song change, and two click sounds on pressing play
  • No multisite support
  • Audiobar is known to work with lots and lots of plugins, but not every conceivable one can be tested.
  • Incompatibility reported with plugins:
    • Jetpack
    • Nextgen Gallery
March 2011