diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/index.html')
| -rwxr-xr-x | docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/index.html | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/index.html new file mode 100755 index 0000000..b1ccdc4 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/jsAMP-preview/index.html @@ -0,0 +1,241 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>jsAMP MP3 Player v0.99a.20071010 - Technology Preview Demo</title> +<meta name="robots" content="noindex" />
+<meta name="author" content="Scott Schiller" />
+<meta name="language" content="en-us" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="keywords" content="javascript sound library api" />
+<meta name="description" content="Demo page for soundmanager mp3 player" />
+<link rel="stylesheet" type="text/css" href="css/player.css" title="dark" media="screen" />
+<link rel="alternate stylesheet" type="text/css" href="css/player-light.css" title="light" media="screen" />
+<style type="text/css">
+
+#demo-info {
+ position:relative;
+ padding:1em;
+ background:#000;
+ opacity:0.75;
+ filter:alpha(opacity=75);
+ color:#fff;
+ max-width:51em;
+}
+
+#demo-info h1 {
+ margin:0px 0px 2em 0px;
+ font-size:1.5em;
+ color:#99ccff;
+}
+
+#demo-info p {
+ line-height:1.5em;
+}
+
+#demo-info a {
+ color:#99ccff;
+}
+
+#demo-info a:hover {
+ color:#fff;
+}
+
+#close {
+ position:absolute;
+ right:0px;
+ top:0px;
+ display:block;
+ width:1em;
+ line-height:1em;
+ padding:0.1em;
+ margin:0.5em;
+ height:1em;
+ text-decoration:none;
+ color:#fff;
+ border:1px solid #666;
+ text-align:center;
+ overflow:hidden;
+}
+
+#close:hover {
+ background:#333;
+}
+
+#demo-info.closed * {
+ display:none;
+}
+
+#demo-info.closed .minimal {
+ display:block;
+ margin:0px;
+ padding:0px;
+}
+
+#demo-info.closed .minimal * {
+ display:inline;
+}
+
+</style>
+<script type="text/javascript">
+function setActiveStyleSheet(title) {
+ var i, a, main;
+ for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+ if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+ a.disabled = true;
+ if(a.getAttribute("title") == title) a.disabled = false;
+ }
+ }
+}
+</script>
+<script type="text/javascript" src="../../script/soundmanager2-nodebug-jsmin.js"></script>
+<script type="text/javascript" src="script/jsamp-preview.js"></script>
+
+</head>
+
+<body>
+
+<div>
+
+ <!-- skin / control stuff -->
+ <div id="demo-info">
+
+ <h1>jsAMP: Example SoundManager 2 Application</h1>
+<pre style="font-size:1.25em">
+ ---------------------------------------------------------
+
+ * GENERAL DISCLAIMER: jsAMP is UNSUPPORTED DEMO CODE. *
+
+ jsAMP is provided "as-is" and as an example application
+ using the API functionality provided by SoundManager 2.
+ (It's also a dev. sanity QA check / API test suite.)
+
+ I don't recommend throwing it on your band/label's site
+ expecting it to "just work" - you have been warned. ;)
+
+ You are welcome to use this in your own projects, but
+ be aware jsAMP may be buggy, use at your own risk etc.
+
+ If you are looking for a JS/DHTML/Flash MP3 player,
+ check the related projects section of the SM2 project
+ page for other resources.
+
+ ---------------------------------------------------------
+</pre>
+ <p>jsAMP is a JavaScript MP3 player which uses the <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 project home">SoundManager 2 API</a> to provide JS-driven audio. It's an example of the kind of stuff you could build using SoundManager. All player logic is handled via Javascript, but SoundManager 2 (JS + Flash) provide the actual sound layer. It's also convenient in that no Flash knowledge is needed, it's all handled by SM2.</p>
+ <p>jsAMP picks up all <a> elements linking to MP3 files in the page, and creates a playlist (view source for details.) It gets ID3 information when loading local/same-domain files or as permissions allow, as well.</p>
+ <p>To see the playlist, click the "down arrow" <img src="image/sec-right-arr0.png" alt="Playlist toggle" title="Playlist toggle" /> at right on the UI.</p>
+ <p>Click and drag the title bar to move the player around. When a track is loaded, click to seek or drag and drop the slider to a given position. (Safari seems to have a few minor UI issues in this version, FYI.) IE 6 also receives a somewhat-degraded, GIF-based experience.</p>
+
+ <p><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2 Project Home</a></p>
+
+ <p class="minimal">Skin: <a href="#" onclick="setActiveStyleSheet('light');return false">light</a> | <a href="#" onclick="setActiveStyleSheet('dark');return false">dark</a> || <a href="#" onclick="bg.getRandom();return false">this background sucks</a></p>
+
+ <a id="close" href="#" title="close" onclick="document.getElementById('demo-info').className='closed';return false">-</a>
+
+ </div>
+
+
+ <div id="player-template" class="sm2player">
+
+ <!-- player UI (bar) -->
+
+ <div class="ui">
+
+ <div class="left">
+ <a href="#" title="Pause/Play" onclick="soundPlayer.togglePause();return false" class="trigger pauseplay"><span></span></a>
+ </div>
+
+ <div class="mid">
+
+ <div class="progress"></div>
+ <div class="info"><span class="caption text">%{artist} - %{title} [%{album}], (%{year}) (%{time})</span></div>
+ <div class="default">jsAMP Technology Preview v0.99a.20071010 (Seriously alpha - use at own risk! :))</div>
+ <div class="seek">Seek to %{time1} of %{time2} (%{percent}%)</div>
+ <div class="divider"> --- </div>
+ <a href="#" title="" class="slider"></a>
+ </div>
+
+ <div class="right">
+ <div class="divider"></div>
+ <div class="time" title="Time">0:00</div>
+ <a href="#" title="Previous" class="trigger prev" onclick="soundPlayer.oPlaylist.playPreviousItem();return false"><span></span></a>
+ <a href="#" title="Next" class="trigger next" onclick="soundPlayer.oPlaylist.playNextItem();return false"><span></span></a>
+ <a href="#" title="Shuffle" class="trigger s1 shuffle" onclick="soundPlayer.toggleShuffle();return false"><span></span></a>
+ <a href="#" title="Repeat" class="trigger s2 loop" onclick="soundPlayer.toggleRepeat();return false"><span></span></a>
+ <a href="#" title="Mute" class="trigger s3 mute" onclick="soundPlayer.toggleMute();return false"><span></span></a>
+ <a href="#" title="Volume" onmousedown="soundPlayer.volumeDown(event);return false" onclick="return false" class="trigger s4 volume"><span></span></a>
+ <a href="#" title="Playlist" class="trigger dropdown" onclick="soundPlayer.togglePlaylist();return false"><span></span></a>
+ </div>
+
+ </div>
+
+ <div class="sm2playlist-box">
+
+ <!-- playlist / controls -->
+ <div id="playlist-template" class="sm2playlist">
+
+ <div class="hd"><div class="c"></div></div>
+ <div class="bd">
+ <ul>
+ <!-- playlist items created, inserted here
+ <li><a href="/path/to/some.mp3"><span>Artist - Song Name, etc.</span></a></li>
+ -->
+ </ul>
+ </div>
+ <div class="ft"><div class="c"></div></div>
+ </div>
+
+ <!-- close container -->
+ </div>
+
+ </div>
+
+ <div style="position:absolute;left:0px;top:-9999px;width:30em">
+
+ <p>This is a normal list of HTML links to MP3 files, which jsAMP picks up and turns into a playlist.</p>
+
+ <ul>
+
+ <li><a href="audio/going_outside.mp3">Going Outside</a></li>
+ <li><a href="audio/office_lobby.mp3">Office Lobby Entrance</a></li>
+ <li><a href="../_mp3/mak.mp3">Angry cow sound?</a></li>
+ <li><a href="audio/walking.mp3">Walking</a></li>
+
+ <!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
+
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Rain 3.mp3">Rain 3</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Frogs @ Yahoo!.mp3">Frogs @ Yahoo!</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Walking past sprinklers, mailbox.mp3">Walking past sprinklers, mailbox</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Cup of Coffee.mp3">Cup of Coffee</a></li>
+ <li><a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl (featureblend.com)</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></li>
+ <li><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></li>
+ <li><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></li>
+
+ </ul>
+
+ </div>
+
+</div>
+
+<script type="text/javascript">
+var bg = {
+ images: ['bg1','bg2','bg3'],
+ i: 0,
+ getRandom: function(n) {
+ this.i = (typeof n != 'undefined'?n:(++this.i>=this.images.length?0:this.i));
+ document.body.style.background = "#000 url(backgrounds/"+this.images[this.i]+".jpg) no-repeat 0px 0px";
+ }
+}
+
+bg.getRandom(parseInt(Math.random()*bg.images.length));
+</script>
+
+<script type="text/javascript">
+if (window.location.toString().match(/flash9/)) soundManager.flashVersion = 9;
+soundManager.url = '../../swf/';
+</script>
+
+</body>
+</html>
|