is dependent game upon famous buzz javascript Library for html5 Audio Sound.
this game is designed to keep infants in mind, who are in their early age to learn alphabets graphically.
<title>buzz/README.md at master · jaysalvat/buzz</title><link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta content="authenticity_token" name="csrf-param" />
<link href="https://a248.e.akamai.net/assets.github.com/assets/github-136f905f03a0a6ce0292d2e017a31c4fe548e2d0.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a248.e.akamai.net/assets.github.com/assets/github2-2326d6d1fbc034bffa9b37cad622815f40671037.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://a248.e.akamai.net/assets.github.com/assets/frameworks-eee761b9d5e06efb064aaaf528c44ef8e1601e71.js" type="text/javascript"></script>
<script src="https://a248.e.akamai.net/assets.github.com/assets/github-69e35ef6c3d5b779e39f65bd04a4e43ff670991e.js" type="text/javascript"></script>
<link rel='permalink' href='/jaysalvat/buzz/raw/b391453015d2816bee748b3bda839bba10654110/README.md'>
<meta property="og:title" content="buzz"/>
<meta property="og:type" content="githubog:gitrepository"/>
<meta property="og:url" content="https://github.com/jaysalvat/buzz"/>
<meta property="og:image" content="https://secure.gravatar.com/avatar/93468d34c43eaae3fa56f7efbe0a3f4a?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"/>
<meta property="og:site_name" content="GitHub"/>
<meta property="og:description" content="buzz - Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade gracefully on non-modern browsers."/>
<meta name="description" content="buzz - Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade gracefully on non-modern browsers." />
<div class="header header-logged-in true">
<div class="container clearfix">
<a class="header-logo-blacktocat" href="https://github.com/organizations/Dashboard-X">
<div class="divider-vertical"></div>
<ul class="top-nav">
<li class="explore"><a href="https://github.com/explore">Explore</a></li>
<li><a href="https://gist.github.com">Gist</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="http://help.github.com">Help</a></li>
</ul>
<ul id="user-links">
<li>
<a href="https://github.com/denno-secqtinstien" class="name">
<img height="20" src="https://secure.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" width="20" /> denno-secqtinstien
</a>
</li>
<li>
<a href="/new" id="new_repo" class="tooltipped downwards" title="Create a new repo">
<span class="mini-icon mini-icon-create"></span>
</a>
</li>
<li>
<a href="/settings/profile" id="account_settings"
class="tooltipped downwards"
title="Account settings ">
<span class="mini-icon mini-icon-account-settings"></span>
</a>
</li>
<li>
<a href="/logout" data-method="post" id="logout" class="tooltipped downwards" title="Sign out">
<span class="mini-icon mini-icon-logout"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="site hfeed" itemscope itemtype="http://schema.org/WebPage">
<div class="hentry">
<div class="pagehead repohead instapaper_ignore readability-menu">
<div class="container">
<div class="title-actions-bar">
<ul class="pagehead-actions">
<li class="subscription">
<form accept-charset="UTF-8" action="/notifications/subscribe" data-autosubmit="true" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="UsH/pcuDlDKfGF2KrNEYH2Hscf+rFuaWpUP7A9ADtOY=" /></div> <input id="repository_id" name="repository_id" type="hidden" value="1873461" />
Watch
<div class="context-pane js-menu-content">
<a href="#" class="close js-menu-close"><span class="mini-icon mini-icon-remove-close"></span></a>
<div class="context-title">Notification status</div>
<div class="context-body pane-selector">
<ul class="js-navigation-container">
<li class="selector-item js-navigation-item js-navigation-target selected">
<span class="mini-icon mini-icon-confirm"></span>
<label>
<input checked="checked" id="do_included" name="do" type="radio" value="included" />
<h4>Not watching</h4>
<p>You will only receive notifications when you participate or are mentioned.</p>
</label>
<span class="context-button-text js-context-button-text">
<span class="mini-icon mini-icon-watching"></span>
Watch
</span>
</li>
<li class="selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<label>
<input id="do_subscribed" name="do" type="radio" value="subscribed" />
<h4>Watching</h4>
<p>You will receive all notifications for this repository.</p>
</label>
<span class="context-button-text js-context-button-text">
<span class="mini-icon mini-icon-unwatch"></span>
Unwatch
</span>
</li>
<li class="selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<label>
<input id="do_ignore" name="do" type="radio" value="ignore" />
<h4>Ignored</h4>
<p>You will not receive notifications for this repository.</p>
</label>
<span class="context-button-text js-context-button-text">
<span class="mini-icon mini-icon-mute"></span>
Stop ignoring
</span>
</li>
</ul>
</div>
</div>
<li class="js-toggler-container js-social-container starring-container ">
<a href="/jaysalvat/buzz/unstar" class="minibutton js-toggler-target starred" data-remote="true" data-method="post" rel="nofollow">
<span class="mini-icon mini-icon-star"></span>Unstar
</a><a href="/jaysalvat/buzz/star" class="minibutton js-toggler-target unstarred" data-remote="true" data-method="post" rel="nofollow">
<span class="mini-icon mini-icon-star"></span>Star
</a><a class="social-count js-social-count" href="/jaysalvat/buzz/stargazers">415</a>
</li>
<li>
<a href="/jaysalvat/buzz/fork_select" class="minibutton js-toggler-target lighter" rel="facebox nofollow"><span class="mini-icon mini-icon-fork"></span>Fork</a><a href="/jaysalvat/buzz/network" class="social-count">67</a>
</li>
</ul>
<h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public">
<span class="repo-label"><span>public</span></span>
<span class="mega-icon mega-icon-public-repo"></span>
<span class="author vcard">
<a href="/jaysalvat" class="url fn" itemprop="url" rel="author">
<span itemprop="title">jaysalvat</span>
</a></span> /
<strong><a href="/jaysalvat/buzz" class="js-current-repository">buzz</a></strong>
</h1>
</div>
- Code
- Network
- Pull Requests 2
- Graphs
<li><a href="/jaysalvat/buzz/issues" highlight="repo_issues">Issues <span class='counter'>4</span></a></li>
<div class="context-menu-container js-menu-container js-context-menu">
<a href="#"
class="minibutton bigger switcher js-menu-target js-commitish-button btn-branch repo-tree"
data-hotkey="w"
data-ref="master">
<span><em class="mini-icon mini-icon-branch"></em><i>branch:</i> master</span>
</a>
<div class="context-pane commitish-context js-menu-content">
<a href="#" class="close js-menu-close"><span class="mini-icon mini-icon-remove-close"></span></a>
<div class="context-title">Switch branches/tags</div>
<div class="context-body pane-selector commitish-selector js-navigation-container">
<div class="filterbar">
<input type="text" id="context-commitish-filter-field" class="js-navigation-enable js-filterable-field js-ref-filter-field" placeholder="Filter branches/tags">
<ul class="tabs">
<li><a href="#" data-filter="branches" class="selected">Branches</a></li>
<li><a href="#" data-filter="tags">Tags</a></li>
</ul>
</div>
<div class="js-filter-tab js-filter-branches">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type=substring>
<div class="commitish-item branch-commitish selector-item js-navigation-item js-navigation-target selected">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/master/README.md" class="js-navigation-open" data-name="master" rel="nofollow">master</a>
</h4>
</div>
<div class="commitish-item branch-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/release/README.md" class="js-navigation-open" data-name="release" rel="nofollow">release</a>
</h4>
</div>
</div>
<div class="no-results">Nothing to show</div>
</div>
<div class="js-filter-tab js-filter-tags " style="display:none">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type=substring>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.5/README.md" class="js-navigation-open" data-name="v1.0.5" rel="nofollow">v1.0.5</a>
</h4>
</div>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.4/README.md" class="js-navigation-open" data-name="v1.0.4" rel="nofollow">v1.0.4</a>
</h4>
</div>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.3/README.md" class="js-navigation-open" data-name="v1.0.3" rel="nofollow">v1.0.3</a>
</h4>
</div>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.2/README.md" class="js-navigation-open" data-name="v1.0.2" rel="nofollow">v1.0.2</a>
</h4>
</div>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.1/README.md" class="js-navigation-open" data-name="v1.0.1" rel="nofollow">v1.0.1</a>
</h4>
</div>
<div class="commitish-item tag-commitish selector-item js-navigation-item js-navigation-target ">
<span class="mini-icon mini-icon-confirm"></span>
<h4>
<a href="/jaysalvat/buzz/raw/v1.0.0/README.md" class="js-navigation-open" data-name="v1.0.0" rel="nofollow">v1.0.0</a>
</h4>
</div>
</div>
<div class="no-results">Nothing to show</div>
</div>
</div>
</div><!-- /.commitish-context-context -->
</div>
<div id="js-repo-pjax-container" class="container context-loader-container" data-pjax-container>
<div class="frame-meta">
<p title="This is a placeholder element" class="js-history-link-replace hidden"></p>
<div class="breadcrumb">
<span class='bold'><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/jaysalvat/buzz" class="js-slide-to" data-direction="back" itemscope="url"><span itemprop="title">buzz</span></a></span></span> / <strong class="final-path">README.md</strong> <span class="js-clippy mini-icon mini-icon-clippy " data-clipboard-text="README.md" data-copied-hint="copied!" data-copy-hint="copy to clipboard"></span>
</div>
<a href="/jaysalvat/buzz/find/master" class="js-slide-to" data-hotkey="t" style="display:none">Show File Finder</a>
Jay Salvat
July 01, 2011
<div class="participation">
<p class="quickstat"><a href="#blob_contributors_box" rel="facebox"><strong>1</strong> contributor</a></p>
</div>
<div id="blob_contributors_box" style="display:none">
<h2>Users on GitHub who have contributed to this file</h2>
<ul class="facebox-user-list">
<li>
<img height="24" src="https://secure.gravatar.com/avatar/93468d34c43eaae3fa56f7efbe0a3f4a?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" width="24" />
<a href="/jaysalvat">jaysalvat</a>
</li>
</ul>
</div>
</div><!-- ./.frame-meta -->
<div class="frames">
<div class="frame" data-permalink-url="/jaysalvat/buzz/raw/b391453015d2816bee748b3bda839bba10654110/README.md" data-title="buzz/README.md at master · jaysalvat/buzz · GitHub" data-type="blob">
<div id="files" class="bubble">
<div class="file">
<div class="meta">
<div class="info">
<span class="icon"><b class="mini-icon mini-icon-text-file"></b></span>
<span class="mode" title="File Mode">file</span>
<span>24 lines (18 sloc)</span>
<span>0.711 kb</span>
</div>
<ul class="button-group actions">
<li>
<a class="grouped-button minibutton bigger lighter tooltipped leftwards"
title="Clicking this button will automatically fork this project so you can edit the file"
href="/jaysalvat/buzz/edit/master/README.md"
data-method="post" rel="nofollow">Edit</a>
</li>
<li><a href="/jaysalvat/buzz/raw/master/README.md" class="minibutton grouped-button bigger lighter" id="raw-url">Raw</a></li>
<li><a href="/jaysalvat/buzz/blame/master/README.md" class="minibutton grouped-button bigger lighter">Blame</a></li>
<li><a href="/jaysalvat/buzz/commits/master/README.md" class="minibutton grouped-button bigger lighter" rel="nofollow">History</a></li>
</ul>
</div>
Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade properly on non-modern browsers.
var mySound = new buzz.sound( "/sounds/myfile", {
formats: [ "ogg", "mp3", "acc" ]
});
mySound.play()
.fadeIn()
.loop()
.bind( "timeupdate", function() {
var timer = buzz.toTimer( this.getTime() );
document.getElementById( "timer" ).innerHTML = timer;
});
</div>
</div>
</div>
<a href="#jump-to-line" rel="facebox" data-hotkey="l" class="js-jump-to-line" style="display:none">Jump to Line</a>
<div id="jump-to-line" style="display:none">
<h2>Jump to Line</h2>
<form accept-charset="UTF-8" class="js-jump-to-line-form">
<input class="textfield js-jump-to-line-field" type="text">
<div class="full-button">
<button type="submit" class="classy">
Go
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="context-overlay"></div>
</div>
<div id="footer-push"></div><!-- hack for sticky footer -->
</div><!-- end of wrapper - hack for sticky footer -->
<!-- footer -->
<div id="footer">
<dl class="footer_nav">
<dt>GitHub</dt>
<dd><a href="https://github.com/about">About us</a></dd>
<dd><a href="https://github.com/blog">Blog</a></dd>
<dd><a href="https://github.com/contact">Contact & support</a></dd>
<dd><a href="http://enterprise.github.com/">GitHub Enterprise</a></dd>
<dd><a href="http://status.github.com/">Site status</a></dd>
</dl>
<dl class="footer_nav">
<dt>Applications</dt>
<dd><a href="http://mac.github.com/">GitHub for Mac</a></dd>
<dd><a href="http://windows.github.com/">GitHub for Windows</a></dd>
<dd><a href="http://eclipse.github.com/">GitHub for Eclipse</a></dd>
<dd><a href="http://mobile.github.com/">GitHub mobile apps</a></dd>
</dl>
<dl class="footer_nav">
<dt>Services</dt>
<dd><a href="http://get.gaug.es/">Gauges: Web analytics</a></dd>
<dd><a href="http://speakerdeck.com">Speaker Deck: Presentations</a></dd>
<dd><a href="https://gist.github.com">Gist: Code snippets</a></dd>
<dd><a href="http://jobs.github.com/">Job board</a></dd>
</dl>
<dl class="footer_nav">
<dt>Documentation</dt>
<dd><a href="http://help.github.com/">GitHub Help</a></dd>
<dd><a href="http://developer.github.com/">Developer API</a></dd>
<dd><a href="http://github.github.com/github-flavored-markdown/">GitHub Flavored Markdown</a></dd>
<dd><a href="http://pages.github.com/">GitHub Pages</a></dd>
</dl>
<dl class="footer_nav">
<dt>More</dt>
<dd><a href="http://training.github.com/">Training</a></dd>
<dd><a href="https://github.com/edu">Students & teachers</a></dd>
<dd><a href="http://shop.github.com">The Shop</a></dd>
<dd><a href="/plans">Plans & pricing</a></dd>
<dd><a href="http://octodex.github.com/">The Octodex</a></dd>
</dl>
<hr class="footer-divider">
<p class="right">© 2013 <span title="0.08011s from fe2.rs.github.com">GitHub</span> Inc. All rights reserved.</p>
<a class="left" href="https://github.com/">
<span class="mega-icon mega-icon-invertocat"></span>
</a>
<ul id="legal">
<li><a href="https://github.com/site/terms">Terms of Service</a></li>
<li><a href="https://github.com/site/privacy">Privacy</a></li>
<li><a href="https://github.com/security">Security</a></li>
</ul>
Keyboard Shortcuts (see all)
<div class="column middle" style='display:none'>
<h3>Commit list</h3>
<dl class="keyboard-mappings">
<dt>j</dt>
<dd>Move selection down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>k</dt>
<dd>Move selection up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>c <em>or</em> o <em>or</em> enter</dt>
<dd>Open commit</dd>
</dl>
<dl class="keyboard-mappings">
<dt>y</dt>
<dd>Expand URL to its canonical form</dd>
</dl>
</div><!-- /.column.first -->
<div class="column last js-hidden-pane" style='display:none'>
<h3>Pull request list</h3>
<dl class="keyboard-mappings">
<dt>j</dt>
<dd>Move selection down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>k</dt>
<dd>Move selection up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>o <em>or</em> enter</dt>
<dd>Open issue</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="platform-mac">⌘</span><span class="platform-other">ctrl</span> <em>+</em> enter</dt>
<dd>Submit comment</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="platform-mac">⌘</span><span class="platform-other">ctrl</span> <em>+</em> shift p</dt>
<dd>Preview comment</dd>
</dl>
</div><!-- /.columns.last -->
<h3>Issues</h3>
<div class="columns threecols">
<div class="column first">
<dl class="keyboard-mappings">
<dt>j</dt>
<dd>Move selection down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>k</dt>
<dd>Move selection up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>x</dt>
<dd>Toggle selection</dd>
</dl>
<dl class="keyboard-mappings">
<dt>o <em>or</em> enter</dt>
<dd>Open issue</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="platform-mac">⌘</span><span class="platform-other">ctrl</span> <em>+</em> enter</dt>
<dd>Submit comment</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="platform-mac">⌘</span><span class="platform-other">ctrl</span> <em>+</em> shift p</dt>
<dd>Preview comment</dd>
</dl>
</div><!-- /.column.first -->
<div class="column last">
<dl class="keyboard-mappings">
<dt>c</dt>
<dd>Create issue</dd>
</dl>
<dl class="keyboard-mappings">
<dt>l</dt>
<dd>Create label</dd>
</dl>
<dl class="keyboard-mappings">
<dt>i</dt>
<dd>Back to inbox</dd>
</dl>
<dl class="keyboard-mappings">
<dt>u</dt>
<dd>Back to issues</dd>
</dl>
<dl class="keyboard-mappings">
<dt>/</dt>
<dd>Focus issues search</dd>
</dl>
</div>
</div>
<h3>Issues Dashboard</h3>
<div class="columns threecols">
<div class="column first">
<dl class="keyboard-mappings">
<dt>j</dt>
<dd>Move selection down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>k</dt>
<dd>Move selection up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>o <em>or</em> enter</dt>
<dd>Open issue</dd>
</dl>
</div><!-- /.column.first -->
</div>
<h3>Network Graph</h3>
<div class="columns equacols">
<div class="column first">
<dl class="keyboard-mappings">
<dt><span class="badmono">←</span> <em>or</em> h</dt>
<dd>Scroll left</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="badmono">→</span> <em>or</em> l</dt>
<dd>Scroll right</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="badmono">↑</span> <em>or</em> k</dt>
<dd>Scroll up</dd>
</dl>
<dl class="keyboard-mappings">
<dt><span class="badmono">↓</span> <em>or</em> j</dt>
<dd>Scroll down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>t</dt>
<dd>Toggle visibility of head labels</dd>
</dl>
</div><!-- /.column.first -->
<div class="column last">
<dl class="keyboard-mappings">
<dt>shift <span class="badmono">←</span> <em>or</em> shift h</dt>
<dd>Scroll all the way left</dd>
</dl>
<dl class="keyboard-mappings">
<dt>shift <span class="badmono">→</span> <em>or</em> shift l</dt>
<dd>Scroll all the way right</dd>
</dl>
<dl class="keyboard-mappings">
<dt>shift <span class="badmono">↑</span> <em>or</em> shift k</dt>
<dd>Scroll all the way up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>shift <span class="badmono">↓</span> <em>or</em> shift j</dt>
<dd>Scroll all the way down</dd>
</dl>
</div><!-- /.column.last -->
</div>
<div class="columns threecols">
<div class="column first">
<dl class="keyboard-mappings">
<dt>j</dt>
<dd>Move selection down</dd>
</dl>
<dl class="keyboard-mappings">
<dt>k</dt>
<dd>Move selection up</dd>
</dl>
<dl class="keyboard-mappings">
<dt>o <em>or</em> enter</dt>
<dd>Open notification</dd>
</dl>
</div><!-- /.column.first -->
<div class="column second">
<dl class="keyboard-mappings">
<dt>e <em>or</em> shift i <em>or</em> y</dt>
<dd>Mark as read</dd>
</dl>
<dl class="keyboard-mappings">
<dt>shift m</dt>
<dd>Mute thread</dd>
</dl>
</div><!-- /.column.first -->
</div>
<div id="markdown-help" class="instapaper_ignore readability-extra">
Headers
# This is an <h1> tag ## This is an <h2> tag ###### This is an <h6> tag
Text styles
*This text will be italic* _This will also be italic_ **This text will be bold** __This will also be bold__You can combine them
Images
Links
http://github.com - automatic! GitHub
Blockquotes
As Kanye West said:We're living the future so the present is our past.
Syntax highlighting with GFM
```javascript function fancyAlert(arg) { if(arg) { $.facebox({div:'#foo'}) } } ```
Or, indent your code 4 spaces
Here is a Python code example without syntax highlighting:def foo: if not bar: return true</pre> </div> <div class="col"> <p>Inline code for comments</p> <pre>
I think you should use an
<addr>
element here instead.
<div id="ajax-error-message" class="flash flash-error">
<span class="mini-icon mini-icon-exclamation"></span>
Something went wrong with that request. Please try again.
<a href="#" class="mini-icon mini-icon-remove-close ajax-error-dismiss"></a>
</div>
<span id='server_response_time' data-time='0.08153' data-host='fe2'></span>