Getting Started
There are two versions of 1 Bit included in the ZIP file download. The WordPress plugin is essentially just a front-end interface for the custom install. This makes it easier to setup on a WordPress blog but if you're comfortable messing with a little JavaScript then you'll get more flexibility using the custom install.
WordPress plugin installation
To install, simple extract the '1bit' folder into your 'wp-content/plugins/' directory. Once extracted, you must activate the plugin within the WordPress Site Admin 'Plugins' section. The 1 Bit Audio Player options will then appear within 'Settings'.
You should make sure your MP3 links are always to absolute paths.
Custom installation
1 Bit can be used on any non-WordPress website simply by uploading the 'Custom Install' files to your web server and adding the following code within the <head> of your pages:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="1bit.js"></script>
<script type="text/javascript">
oneBit = new OneBit('1bit.swf');
oneBit.ready(function() {
oneBit.specify('color', '#000000');
oneBit.specify('background', '#FFFFFF');
oneBit.specify('playerSize', '10');
oneBit.specify('position', 'after');
oneBit.specify('analytics', false);
oneBit.apply('a');
});
</script>
You must then adjust the path to 1bit.swf within the line that creates a new 1 Bit object. All of the oneBit.specify lines are optional, however, oneBit.apply must be called and passed a valid CSS selector. See Reference for more explanation.
Frequently Asked Questions
Why do my MP3s play at the wrong speed/pitch?
Unfortunately Flash only supports sample rates that are a multiple of 44.1kHz (ie, 96000, 44100, 22050 and 11025 samples/second). In order for your MP3s to play back correctly you'll need to ensure they're encoded at one of these sample rates.
Note that it's always best to re-encode from the original uncompressed audio file, not an MP3.
How do I hide the text links?
This isn't the best idea (mainly because it doesn't allow for browsers without JavaScript) but quite a few people have asked how to hide the text links that 1 Bit is applied to. Just use this CSS:
.onebit_mp3 a { display: none; }
Can I set 1 Bit to play automatically?
No – that'd be kind of annoying!
Can I make the text link trigger 1 Bit playback?
It's not possible at the moment, but maybe in a future version. We'd have to add JavaScript control in order to get this working.
Can I use 1 Bit on Blogger?
Yes, a custom install will work fine with a hosted Blogger blog. We've even got proof!
If you're a bit unsure about how to do this then just add the code below right before the </head> tag of your template (Layout > Edit HTML).
<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/
swfobject.js'>
</script>
<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/
1bit.js'>
</script>
<script type='text/javascript'>
oneBit = new OneBit('http://1bit.markwheeler.net/1.4/
1bit.swf');
oneBit.ready(function() {
oneBit.specify('background', '#FFFFFF');
oneBit.apply('a');
});
</script>
Can I customise the icons?
The icons within the 1 Bit Audio Player can be changed easily in the FLA by anyone with a basic knowledge of Flash – simply edit the 'stopped_icon', 'buffering_loop' and 'playing_loop' symbols found in the library.
Reference
This documentation refers to the custom install of 1 Bit – the WordPress front-end should be fairly self explanatory.
Creating a 1 Bit object
var oneBit = new OneBit([pluginPath]);
Once 1bit.js is included, you can create a OneBit object whenever you like. OneBit has one optional argument which is the path to the SWF file, relative to the calling document. This defaults to '1bit.swf'.
Checking if the DOM has loaded
oneBit.ready(function(){ ... });
The ready event is used to trigger a function when the DOM has loaded.
Specifying options
oneBit.specify(option, parameter)
Once the DOM has loaded but before calling apply you may set options using specify. Each of these options is outlined here.
color is a hex value for the color the player icons will be. By default 1 Bit will attempt to match the color of the HTML links automatically.
background is a hex value for the background color of the player. This will also accept a value of 'transparent'. The default is #FFFFFF (white).
playerSize is the size of the Flash player in pixels (the player is always square). By default 1 Bit will estimate the correct size relative to the link it's inserted next to, therefore you shouldn't usually need to set the size manually.
position accepts a value of either 'before' or 'after' which defines the positioning of the 1 Bit player relative to the MP3 link it's being inserted next to. The default is 'after'.
analytics can be set to 'true' to enable the generatation 'hits' in your Google Analytics statistics every time an audio file is played. Ensure you have the newer version of Google Analytics installed and you will begin to see pages with a prefix of /1bit/ appearing amongst your regular page views.
Applying 1 Bit
oneBit.apply(selector)
Once the DOM has loaded, and you have set any options using specify, you can call the apply function to insert 1 Bit. This has one required paramater which is the CSS selector string used to specify the links you want to add 1 Bit to. This supports most CSS2 and some CSS3 selectors, see Wikipedia for some basic reference.
You can repeat the specify and apply process in order to have 1 Bit players with differing options on the same page. Just make sure to target different links with the CSS selector each time.
Output HTML
The HTML generated by apply gives you a few hooks to style things with:
<span class="onebit_mp3">
<a href="file.mp3">Example</a>
<span class="onebit_player" id="oneBitInsert_1">
[1 Bit Flash Player]
</span>
</span>
To Do
These are things we're considering, not definitive plans.- Only one player should be able to play at a time.
- Add option to loop playback.
More Questions?
Feel free to contact me with problems, comments or suggestions.