<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>The CodeUnit of Craig &#187; mark boas</title>
	<atom:link href="http://www.codeunit.co.za/tag/mark-boas/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codeunit.co.za</link>
	<description>Software, Code, Technology and Tutorials</description>
	<lastBuildDate>Fri, 03 Sep 2010 08:43:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
	<atom:link rel='hub' href='http://www.codeunit.co.za/?pushpress=hub'/>
		<item>
		<title>jPlayer: Playing MP3 Audio with jQuery</title>
		<link>http://www.codeunit.co.za/2010/02/03/jplayer-playing-mp3-audio-with-jquery/</link>
		<comments>http://www.codeunit.co.za/2010/02/03/jplayer-playing-mp3-audio-with-jquery/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 07:01:50 +0000</pubDate>
		<dc:creator>Craig Lotter</dc:creator>
				<category><![CDATA[Technology & Code]]></category>
		<category><![CDATA[audio]]></category>
		<category><![CDATA[happyworm]]></category>
		<category><![CDATA[jplayer]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[mark boas]]></category>
		<category><![CDATA[mark panaghiston]]></category>
		<category><![CDATA[mp3]]></category>
		<category><![CDATA[ogg]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://www.codeunit.co.za/?p=1883</guid>
		<description><![CDATA[Loading and playing an Ogg or MP3 file using jQuery has just become easy, thanks to the very customizable and functional jPlayer jQuery plugin <a href="http://www.codeunit.co.za/2010/02/03/jplayer-playing-mp3-audio-with-jquery/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.codeunit.co.za%2F2010%2F02%2F03%2Fjplayer-playing-mp3-audio-with-jquery%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.codeunit.co.za%2F2010%2F02%2F03%2Fjplayer-playing-mp3-audio-with-jquery%2F&amp;source=craiglotter&amp;style=normal&amp;service=bit.ly&amp;space=1" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://www.codeunit.co.za/wp-content/uploads/2010/02/jplayer-logo.gif"><img class="alignright size-full wp-image-1887" title="jplayer-logo" src="http://www.codeunit.co.za/wp-content/uploads/2010/02/jplayer-logo.gif" alt="" width="220" height="80" /></a>Loading and playing an Ogg or MP3 file using jQuery has just become easy, thanks to the very customizable and functional <a href="http://www.happyworm.com/jquery/jplayer/" target="_blank">jPlayer</a> jQuery plugin, brainchild of <a href="http://www.happyworm.com" target="_blank">Happyworm&#8217;s</a> Mark Boas and Mark Panaghiston.</p>
<p>Simply put, jPlayer is a plugin that allows you to play and control audio files on a webpage, create and style and audio player using only HTML and CSS and add sound effects to your jQuery projects. It technically also allows for faster audio streaming when using HTML5 with the alternative Ogg support.</p>
<p>And all of this is done without the help of visible Flash.</p>
<p>Implementing jPlayer is as easy as downloading the package and running this little bit of code to get things started:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> global_lp <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
 	<span style="color: #003366; font-weight: bold;">var</span> global_ready <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#jquery_jplayer&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">jPlayer</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		ready<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setFile</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'big_alarm.mp3'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">play</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>There are naturally a host of control functions that comes with the jplayer object that allows you to play, pause, stop, change volume, etc. as well as some important control events like onProgressChange and onSoundComplete which allow you to control the way in which the audio being played and handled on your page.</p>
<p>Admittedly, adding the extra styling and functionality in order to throw a little audio player up on your page does involve quite a bit more work, but thankfully though jPlayer comes with quite a few handy <a href="http://www.happyworm.com/jquery/jplayer/0.2.5/demos.htm" target="_self">demos</a> which should have most developers up and running in no time.</p>
<p>In other words, well worth taking a look (or should that be listen) then! :)</p>
<p>Related Link: http://www.happyworm.com/jquery/jplayer/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.codeunit.co.za/2010/02/03/jplayer-playing-mp3-audio-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
