-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update audiolet to fix crashes when playing audio
- Loading branch information
Showing
8 changed files
with
484 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,112 +1,101 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
||
| <meta charset="utf-8"> | ||
|
|
||
| <meta name="description" content="" /> | ||
| <meta name="author" content="Hakim El Hattab" /> | ||
|
|
||
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> | ||
|
|
||
| <meta name="apple-mobile-web-app-capable" content="yes"> | ||
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | ||
| <meta name="viewport" content="width=device-width"> | ||
|
|
||
| <title>Radar - An audio-visual HTML experiment</title> | ||
|
|
||
| <link href="css/reset.css" rel="stylesheet" media="screen" /> | ||
| <link href="css/main.css" rel="stylesheet" media="screen" /> | ||
|
|
||
| <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
| <h1>Radar</h1> | ||
| <span class="header-instruction">Expand for more info.</span> | ||
|
|
||
| <!-- Extra content that can be expanded --> | ||
| <div class="extra"> | ||
|
|
||
| <!-- Experiment description --> | ||
| <section id="about"> | ||
| <h3>About</h3> | ||
| <p> | ||
| An experiment with real-time audio synthesis.<br> | ||
| Works well in Chrome & Safari but runs slowly in Firefox. <br> | ||
| Thanks to <a href="http://phuu.net">Tom Ashworth</a> for harmonising the sound! | ||
| </p> | ||
| <p class="credits"> | ||
| Created by <a href="http://hakim.se/">Hakim El Hattab</a> | <a href="http://twitter.com/hakimel">@hakimel</a> | ||
| </p> | ||
| </section> | ||
|
|
||
| <!-- Contributors & libs --> | ||
| <section> | ||
| <h3>Tech</h3> | ||
| <p> | ||
| Radar uses <a href="https://github.com/oampo/Audiolet">Audiolet</a> to generate sound and <br> | ||
| the visuals are rendered on HTML5 <canvas>. <br> <br> | ||
| Source code available at <a href="https://github.com/hakimel/Radar">github.com/hakimel/Radar</a>. | ||
| </p> | ||
| </section> | ||
|
|
||
| <!-- Social things --> | ||
| <section id="share"> | ||
| <h3>Share</h3> | ||
| <iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fradar%2F&layout=box_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:60px;" allowTransparency="true"></iframe> | ||
| <div id="retweet-button"> | ||
| <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://lab.hakim.se/radar/" data-text="Radar - an audio-visual HTML experiment from @hakimel" data-count="vertical" data-related="hakimel">Tweet</a> | ||
| <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
| </header> | ||
|
|
||
| <div id="wrapper" class="empty"> | ||
| <canvas></canvas> | ||
| <div class="sidebar"> | ||
| <button class="save">Save</button> | ||
| <button class="reset">Reset</button> | ||
| <ul class="sequencer-input"> | ||
| <li data-key="a" data-scale="min">A minor</li> | ||
| <li data-key="a" data-scale="maj">A major</li> | ||
| <li data-key="d" data-scale="min">D minor</li> | ||
| <li data-key="d" data-scale="maj">D major</li> | ||
| <li data-key="e" data-scale="min">E minor</li> | ||
| <li data-key="e" data-scale="maj">E major</li> | ||
| </ul> | ||
| <ul class="sequencer"> | ||
| <li class="add-key">Add Key</li> | ||
| </ul> | ||
|
|
||
| <div class="main-container"> | ||
|
|
||
| <header> | ||
| <h1>Radar</h1> | ||
| <span class="header-instruction">Expand for more info.</span> | ||
|
|
||
| <!-- Extra content that can be expanded --> | ||
| <div class="extra"> | ||
|
|
||
| <!-- Experiment description --> | ||
| <section id="about"> | ||
| <h3>About</h3> | ||
| <p> | ||
| An experiment with real-time audio synthesis.<br> | ||
| Works well in Chrome & Safari but runs slowly in Firefox. <br> | ||
| Thanks to <a href="http://phuu.net">Tom Ashworth</a> for harmonising the sound! | ||
| </p> | ||
| <p class="credits"> | ||
| Created by <a href="http://hakim.se/">Hakim El Hattab</a> | <a href="http://twitter.com/hakimel">@hakimel</a> | ||
| </p> | ||
| </section> | ||
|
|
||
| <!-- Contributors & libs --> | ||
| <section> | ||
| <h3>Tech</h3> | ||
| <p> | ||
| Radar uses <a href="https://github.com/oampo/Audiolet">Audiolet</a> to generate sound and <br> | ||
| the visuals are rendered on HTML5 <canvas>. <br> <br> | ||
| Source code available at <a href="https://github.com/hakimel/Radar">github.com/hakimel/Radar</a>. | ||
| </p> | ||
| </section> | ||
|
|
||
| <!-- Social things --> | ||
| <section id="share"> | ||
| <h3>Share</h3> | ||
| <iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fradar%2F&layout=box_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:60px;" allowTransparency="true"></iframe> | ||
| <div id="retweet-button"> | ||
| <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://lab.hakim.se/radar/" data-text="Radar - an audio-visual HTML experiment from @hakimel" data-count="vertical" data-related="hakimel">Tweet</a> | ||
| <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
| </header> | ||
|
|
||
| <div id="wrapper" class="empty"> | ||
| <canvas></canvas> | ||
| <div class="sidebar"> | ||
| <button class="save">Save</button> | ||
| <button class="reset">Reset</button> | ||
| <ul class="sequencer-input"> | ||
| <li data-key="a" data-scale="min">A minor</li> | ||
| <li data-key="a" data-scale="maj">A major</li> | ||
| <li data-key="d" data-scale="min">D minor</li> | ||
| <li data-key="d" data-scale="maj">D major</li> | ||
| <li data-key="e" data-scale="min">E minor</li> | ||
| <li data-key="e" data-scale="maj">E major</li> | ||
| </ul> | ||
| <ul class="sequencer"> | ||
| <li class="add-key">Add Key</li> | ||
| </ul> | ||
| </div> | ||
| <span class="instructions">Click on a pin to generate sound</span> | ||
| </div> | ||
| <span class="instructions">Click on a pin to generate sound</span> | ||
|
|
||
| </div> | ||
|
|
||
| <script src="js/libs/audiolet.dependencies.js"></script> | ||
| <script src="js/libs/audiolet.min.js"></script> | ||
|
|
||
| <script src="js/libs/audiolet.js"></script> | ||
|
|
||
| <script src="js/header.js"></script> | ||
| <script src="js/util.js"></script> | ||
| <script src="js/radar.js"></script> | ||
|
|
||
| <!-- Third party tracking and sharing code below --> | ||
|
|
||
| <script type="text/javascript"> | ||
| var _gaq = _gaq || []; | ||
| _gaq.push(['_setAccount', 'UA-15240703-1']); | ||
| _gaq.push(['_trackPageview']); | ||
|
|
||
| (function() { | ||
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| })(); | ||
| </script> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,47 @@ | ||
| /** | ||
| * Controls the showing and hiding of the expandable | ||
| * header. | ||
| * | ||
| * | ||
| * @author Hakim El Hattab / http://hakim.se | ||
| */ | ||
| window.onload = function() { | ||
|
|
||
| var header = document.getElementsByTagName('header')[0]; | ||
| var headerToggleTimeOut = -1; | ||
| var headerMouseDown = false; | ||
|
|
||
| document.addEventListener( 'mousedown', function() { | ||
| headerMouseDown = true; | ||
| }, false ); | ||
|
|
||
| document.addEventListener( 'mouseup', function() { | ||
| headerMouseDown = false; | ||
| }, false ); | ||
|
|
||
| header.addEventListener('mouseover', function() { | ||
| if (!headerMouseDown) { | ||
| // Make sure no previous call to toggle the header are | ||
| // queued up | ||
| clearTimeout( headerToggleTimeOut ); | ||
|
|
||
| // Avoid accidentally opening the header by setting | ||
| // a short time out | ||
| headerToggleTimeOut = setTimeout( function() { | ||
| header.setAttribute( 'class', 'open' ) | ||
| }, 100 ); | ||
| } | ||
| }, false); | ||
|
|
||
| header.addEventListener('mouseout', function() { | ||
| // Make sure no previous call to toggle the header are | ||
| // queued up | ||
| clearTimeout( headerToggleTimeOut ); | ||
|
|
||
| // Avoid accidentally closing the header by setting | ||
| // a short time out | ||
| headerToggleTimeOut = setTimeout( function() { | ||
| header.setAttribute( 'class', '' ) | ||
| }, 100 ); | ||
| }, false); | ||
|
|
||
| }; |
Oops, something went wrong.