Skip to content

Commit

Permalink
Home demo/UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott Schiller committed Jan 16, 2011
1 parent 7aad3c2 commit 1d020d0
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 18 deletions.
24 changes: 19 additions & 5 deletions demo/index.css
View file
Expand Up @@ -100,6 +100,20 @@ body.home h4 {
margin-bottom: 0.75em;
}

body.home .demo-more,
body.home .demo-more-abs {
text-align:right;
font-size:x-small;
margin-right:0.25em;
white-space:nowrap;
}

body.home .demo-more-abs {
position:absolute;
right:0px;
bottom:0px;
}

em em {
/* special highlight */
color:#003366;
Expand Down Expand Up @@ -380,7 +394,7 @@ h2 {
.columnar .c1 h2 {
position:relative;
font-size:1.2em;
padding:0.35em 0.5em;
padding:0.37em 0.5em;
vertical-align:middle;
background:#333;
color:#fff;
Expand Down Expand Up @@ -698,8 +712,8 @@ ul.standard ul {
}

.c3 h2 {
height:1.75em;
line-height:1.75em;
height:2em;
line-height:2em;
}

.wedge {
Expand All @@ -717,7 +731,7 @@ ul.standard ul {

.c3 h2 .l,
.c3 h2 .r {
border-top:1.66em solid #333;
border-top:2em solid #333;
}

.wedge .l,
Expand All @@ -729,7 +743,7 @@ ul.standard ul {
width:16px;
height:100%;
margin-left:-16px;
border-top:1.7em solid #333;
border-top:2em solid #333;
}

.wedge .r,
Expand Down
5 changes: 3 additions & 2 deletions doc/getstarted/index.html
View file
Expand Up @@ -16,6 +16,7 @@
<script type="text/javascript" src="../../demo/index.js"></script>
<script type="text/javascript">
soundManager.useFlashBlock = true;
soundManager.bgColor = '#f6f6f6';
soundManager.debugMode = true;
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '../../swf/';
Expand Down Expand Up @@ -125,8 +126,8 @@ <h2>How SoundManager Works</h2>

<h3>SoundManager 2 Tutorial: What, Why, How</h3>

<p><strong>Problem:</strong> Browsers lack good, consistent native audio support. (HTML 5's <code>Audio()</code> is the future, but does not have majority support yet.)</p>
<p><strong>Solution:</strong> Javascript API via Flash + ExternalInterface, works almost everywhere. If HTML5 audio support is enabled, flash fallback used for browsers that don't support "non-free" MP3 + MP4 formats.</p>
<p><strong>Problem:</strong> Browsers lack good, consistent native audio support. (HTML 5's <code>Audio()</code> is the future, but is still in development.)</p>
<p><strong>Solution:</strong> Javascript API using HTML5 Audio() + headless Flash via ExternalInterface, works almost everywhere. If HTML5 is supported but "non-free" MP3/MP4 formats are not, flash is used as a fallback.</p>
<p>SoundManager 2 wraps and extends both the Flash and HTML Audio Sound APIs, providing a single, unified sound API to Javascript; the API is the same, whether HTML or Flash is ultimately used to play sound. (The flash portion is hidden, transparent to both developers and end users.)</p>

</div>
Expand Down
84 changes: 73 additions & 11 deletions index.html
View file
Expand Up @@ -319,9 +319,9 @@ <h3>About SoundManager 2, Features and Live Demos</h3>

<div id="about-sm2">

<div style="position:relative;padding-top:0.5em;padding-bottom:0.75em">
<div style="position:relative;padding-top:0.5em;padding-bottom:1.5em">

<img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 0px 0px" />
<img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 1px 0px" />

<h2 class="special" style="margin-top:0.25em">SoundManager 2 makes it easier to play audio using JavaScript.</h2>

Expand All @@ -333,13 +333,18 @@ <h2 class="special" style="margin-top:0.25em">SoundManager 2 makes it easier to

<div class="header-demo">

<h3>Audio, just about anywhere.</h3>

<!--
<h3 style="float:left;display:inline;margin-top:0.75em;margin-right:0.75em">Audio, just about anywhere.</h3>

<div class="sm2-inline-list" style="float:left;display:inline;margin-top:0.2em">
<div class="ui360"><a href="demo/_mp3/office_lobby.mp3" class="sm2_link norewrite exclude button-exclude inline-exclude">Office lobby sound</a></div>
<div class="ui360" style="float:left;display:inline"><a href="demo/_mp3/mak.mp3" title="360 demo: Angry Cow Sound" class="norewrite exclude button-exclude inline-exclude">Random</a></div>
<div class="ui360" style="float:left;display:inline"><a href="http://freshly-ground.com/data/audio/sm2/water-drop.mp3" title="360 Demo: Water Drop" class="exclude button-exclude inline-exclude">Water Drop</a></div>
</div>
-->

<div style="float:right;display:inline;padding-left:1em;margin-top:-1em">

Expand All @@ -355,6 +360,10 @@ <h3 style="float:left;display:inline;margin-top:0.75em;margin-right:0.75em">Audi

<div>

<h3>Complexity, reduced.</h3>

<!--
<h3 style="float:left;display:inline;margin-right:0.75em">Complexity, reduced.</h3>
<div style="float:left;display:inline;vertical-align:bottom;margin-top:0.85em">
Expand All @@ -366,44 +375,97 @@ <h3 style="float:left;display:inline;margin-right:0.75em">Complexity, reduced.</
&nbsp;&nbsp;
</div>
-->

</div>

<!--
<a href="demo/christmas-lights/sound/glass2.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play &quot;Glass break 3&quot;" style="padding:0px">glass2.mp3</a>
-->

<p style="clear:left;padding-top:1em">Supporting HTML5 audio in modern browsers can be tedious, let alone "legacy" HTML4-based browsers. SoundManager 2 gives you a simple but powerful API that supports both new and old, using HTML5 audio where supported and an invisible Flash fallback where needed. Ideally, when using SoundManager 2, audio "just works."</p>
<p style="clear:left;padding-top:1em">Supporting HTML5 audio in modern browsers can be tedious, let alone "legacy" HTML4-based browsers. IE 6, anyone?</p>
<p>SoundManager 2 gives you a simple but powerful API that supports both new and old, using HTML5 audio where supported and an invisible Flash fallback where needed. Ideally, when using SoundManager 2, audio "just works."</p>

<div>

<div style="clear:both;padding-top:2em"></div>

<!--
<h3 style="float:left;display:inline;margin-top:0px">Big features, small footprint.</h3>

-->

<div style="position:relative;float:right;display:inline;margin-top:0px;margin-left:5em">

<h3 style="margin-top:0px">See and hear, here.</h3>

<div class="sm2-inline-list" style="margin-top:1em">
<div style="margin-top:1em">

<div class="sm2-inline-list" style="min-height:65px;position:relative;float:left;display:inline;margin-right:2em;padding-right:0.75em;border-right:1px solid #eee">
<div class="ui360"><a href="demo/_mp3/office_lobby.mp3" class="sm2_link norewrite exclude button-exclude inline-exclude">Office lobby sound</a></div>
<div class="ui360" style="float:left;display:inline"><a href="demo/_mp3/mak.mp3" title="360 demo: Angry Cow Sound" class="norewrite exclude button-exclude inline-exclude">Random</a></div>
<div class="ui360" style="float:left;display:inline"><a href="http://freshly-ground.com/data/audio/sm2/water-drop.mp3" title="360 Demo: Water Drop" class="exclude button-exclude inline-exclude">Water Drop</a></div>
<div class="demo-more-abs" style="margin-right:1.5em">
<a href="demo/360-player/" title="Play MP3 Links demo">360&deg; UI &raquo;</a>
</div>
</div>

<div style="min-height:45px;position:relative;float:left;display:inline;margin-top:20px;padding-right:15px">
<a href="demo/_mp3/coins.mp3" title="Play &quot;Change&quot;" class="sm2_button exclude inline-exclude norewrite" style="padding:0px">coins.mp3</a>
&nbsp;&nbsp;
<a href="demo/christmas-lights/sound/glass0.mp3" class="sm2_button exclude inline-exclude norewrite" title="Play &quot;Glass break 1&quot;" style="padding:0px">glass0.mp3</a>
&nbsp;&nbsp;
<a href="demo/christmas-lights/sound/glass1.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play &quot;Glass break 2&quot;" style="padding:0px">glass1.mp3</a>
<div class="demo-more-abs">
<a href="demo/mp3-player-button/" title="Play MP3 Links demo">mp3 buttons &raquo;</a>
</div>
</div>

</div>


<div class="sm2-inline-list" style="clear:both;margin-top:1em">
<div class="ui360 ui360-vis"><a href="http://freshly-ground.com/data/audio/sm2/The%20Fugitives%20-%20Graffiti%20Sex.mp3" class="exclude button-exclude inline-exclude" style="position:absolute;color:#333">The Fugitives - Graffiti Sex</a></div>
</div>

<div class="demo-more" style="clear:both">
<a href="demo/360-player/canvas-visualization.html" title="360&deg; UI: JavaScript + Canvas Visualization">360&deg; + spectrum UI &raquo;</a>
</div>


<div style="width:256px">

<ul class="playlist" style="float:right;display:inline;width:256px;min-height:49px;margin-top:2em;padding-bottom:0px">
<ul class="playlist" style="clear:both;float:right;display:inline;width:256px;min-height:49px;margin-top:2em;padding-bottom:0px">
<li><a href="http://freshly-ground.com/data/audio/mpc/20060826 - Armstrong.mp3" class="button-exclude inline-exclude threesixty-exclude">Armstrong Beat</a></li>
<li><a href="http://freshly-ground.com/data/audio/mpc/20090119 - Untitled Groove.mp3" class="button-exclude inline-exclude threesixty-exclude">Untitled Groove</a></li>
<li><a href="http://freshly-ground.com/data/audio/sm2/quail-64kbps-he-aac-from-itunes-renamed-from-mp4.aac" title="48 kbps MPEG4 High-Efficiency AAC test sound: BC Quail" class="button-exclude inline-exclude threesixty-exclude">BC Quail <span class="sidenote">(HE-AAC)</span></a></li>
</ul>

<ul id="muxtape-html5" class="playlist" style="clear:both;margin-top:0px;padding-top:0px">
<li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg" title="OGG sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">Ghosts+Goblins Reconstructed <span class="sidenote">(OGG)</span></a></li>
<li><a href="http://freshly-ground.com/data/audio/sm2/bottle-pop.wav" title="WAV sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">A corked beer bottle <span class="sidenote">(WAV)</span></a></li>
</ul>
<ul id="muxtape-html5" class="playlist" style="clear:both;margin-top:0px;padding-top:0px">
<li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg" title="OGG sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">Ghosts+Goblins Reconstructed <span class="sidenote">(OGG)</span></a></li>
<li><a href="http://freshly-ground.com/data/audio/sm2/bottle-pop.wav" title="WAV sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">A corked beer bottle <span class="sidenote">(WAV)</span></a></li>
</ul>

<div class="demo-more">
<a href="demo/page-player/" title="Muxtape-style UI demo">muxtape-style UI &raquo;</a>
</div>

<h4>Not only do you get the ginsu knife...</h4>

<p>Even more demos and examples using SoundManager 2's API features.</p>

<ul class="standard">
<li><a href="demo/play-mp3-links/" title="Links to MP3 files that play inline">Playable MP3 links</a></li>
<li><a href="demo/mpc/" title="MPC sampler/drum machine demo">MPC sampler/drum machine</a></li>
<li><a href="demo/animation-1/" title="Bouncing ball animation with sound effects">Basic animation + sound</a></li>
<li><a href="demo/christmas-lights/" title="Smashable christmas lights demo (animation and sound)">Smashable christmas lights</a></li>
<li><a href="demo/api/" title="Live API demos using test sounds">Live SoundManager 2 API examples</a></li>
</ul>

</div>

</div>

<h3 style="margin-top:0px">Big features, small footprint.</h3>

<p style="clear:left;padding-top:1em;min-width:30em">SoundManager 2 packs a full-featured API (100 KB of raw code) into as little as 10 KB over the wire. The source is provided in fully-commented, -no-debug and compiler-optimized "minified" versions appropriate for development and production use.</p>

Expand Down

0 comments on commit 1d020d0

Please sign in to comment.