glenux/wyrian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
wyrian/js/libs/soundmanager/demo/mp3-player-button/index.html

189 lines
5.3 KiB
HTML
Raw Normal View History

Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<!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>SoundManager 2 Demo: Basic MP3 Play Button</title>
<meta name="robots" content="noindex" />
<style type="text/css">
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
/*
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
-------------------------------------------------------------
In-page demo CSS - see external CSS for actual relevant stuff.
--------------------------------------------------------------
*/
#soundmanager-debug {
/* SM2 debug container (optional, makes debug more useable) */
position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
body {
font:75% normal verdana,arial,tahoma,"sans serif";
}
h1, h2, h3 {
font:2.5em arial,tahoma,verdana;
font-weight:normal;
margin-bottom:0px;
}
h1, h2 {
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
letter-spacing:-1px; /* zomg web x.0! ;) */
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
margin-top:0.5em;
}
h2, h3 {
color:#333;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h1 a,
h1 a:hover {
color:#000;
text-decoration:none;
}
h1 a:hover {
text-decoration:underline;
}
ul li {
margin-bottom:0.5em;
}
ul.notes {
margin-left:0px;
padding-left:1.5em;
}
.note {
margin-top:0px;
font-style:italic;
color:#666;
}
pre {
font-weight:bold;
font-size:1.2em;
_font-size:1em;
}
pre code {
color:#228822;
}
#left {
max-width:56em;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mp3-player-button.css" />
<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="script/mp3-player-button.js"></script>
</head>
<body>
<div id="left">
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Inline MP3 Player Button</h1>
<h2 style="display:inline">Basic MP3 Play Button Examples</h2> (also see <a title="MP3 Play Button, Basic Example demo" href="basic.html">basic demo</a>.)
<hr />
<div id="sm2-container">
<!-- flash movie ends up here -->
</div>
<h3>Inline text, with "play" button</h3>
<p>Example code (link with a <b>sm2_button</b> CSS class):</p>
<pre>&lt;p&gt; Spare change <code>&lt;a href="/path/to/coins.mp3" title="Play &amp;quot;coins&amp;quot;" class="sm2_button"&gt;coins.mp3&lt;/a&gt;</code> &lt;/p&gt;</pre>
<p>Renders as:</p>
<div>
<p>Spare change <a href="../../demo/_mp3/coins.mp3" class="sm2_button" title="Play &quot;coins&quot;">coins.mp3</a></p>
<p class="note">Note that the text inside the link is hidden and replaced with an image, but should be descriptive - or at least should say something generic, like "play".</p>
</div>
<h3>Basic MP3 play button, no text</h3>
<p>Code:</p>
<pre><code>&lt;a href="../_mp3/office_lobby.mp3" title="Play &amp;quot;Office Lobby&amp;quot;" class="sm2_button"&gt;Office Lobby&lt;/a&gt;</code></pre>
<p>Renders as:</p>
<p>
<a href="../_mp3/office_lobby.mp3" title="Play &quot;Office Lobby&quot;" class="sm2_button">Office Lobby</a>
</p>
<h2>How It Works</h2>
<p><a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 Javascript Sound API">SoundManager 2</a> intercepts clicks to MP3 links and plays them inline. The script assigns additional CSS classes to the links to indicate their state (playing/paused, etc.)</p>
<h3>Static Examples</h3>
<p>CSS classes are dynamically applied as follows:</p>
<ul>
<li><a href="#" class="sm2_button" title="&quot;Click to play&quot; state">Default: class="sm2_button"</a> Default: class="sm2_button"</li>
<li><a href="#" class="sm2_button sm2_playing" title="&quot;Click to pause&quot; state">Playing: class="sm2_button sm2_playing"</a> Playing: class="sm2_button sm2_playing"</li>
<li><a href="#" class="sm2_button sm2_paused" title="&quot;Click to resume&quot; state">Paused: class="sm2_button sm2_paused"</a> Paused: class="sm2_button sm2_paused"</li>
</ul>
<h3>Basic CSS</h3>
<p>If you want to make your own UI from scratch, here is the base:</p>
<pre>
Default + hover state, "click to play":
<code>
a.sm2_button {}
a.sm2_button:hover {}
</code>
Playing + hover state, "click to pause":
<code>
a.sm2_button.sm2_playing {}
a.sm2_button.sm2_playing:hover {}
</code>
Paused + hover state, "click to resume":
<code>
a.sm2_button.sm2_paused {}
a.sm2_button.sm2_paused:hover {}
</code></pre>
<h3>Other Options</h3>
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<p>By default, one sound will be played at a time; you can easily change a "config" object value to turn on playlist-like behaviour (i.e., play the next MP3 when the current one finishes.)</p>
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<pre>
<code>
// (within mp3-player-button.js)
this.config = {
playNext: false // stop after one sound, or play through list until end
}
</code></pre>
<h3>I'd like to use this.</h3>
<p>See this <a href="basic.html" title="basic template: inline mp3 player">basic demo</a> for reference.</p>
<p>
<a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p>
</div>
</body>
</html>
Reference in a new issue Copy permalink