lrullo/soundmap_theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
5115a34e40
soundmap_theme/carnaval/soundmanagerv297a-20130101/doc/generated/demo/mpc/script/mpc.html

225 lines
24 KiB
HTML
Raw Normal View History

Theme for worpdress 4.6.1
2016-11-29 01:18:17 +01:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>mpc.js</title>
<meta name="robots" content="noindex" />
<link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
</head>
<body>
<div id='container'>
<div id="background"></div>
<div id="jump_to">
Jump To &hellip;
<div id="jump_wrapper">
<div id="jump_page">
<a class="source" href="../../360-player/script/360player.html">360player.js</a>
<a class="source" href="../../flashblock/flashblock.html">flashblock.css</a>
<a class="source" href="../../mp3-player-button/script/mp3-player-button.html">mp3-player-button.js</a>
<a class="source" href="mpc.html">mpc.js</a>
<a class="source" href="../../page-player/script/page-player.html">page-player.js</a>
<a class="source" href="../../play-mp3-links/script/inlineplayer.html">inlineplayer.js</a>
<a class="source" href="../../../script/soundmanager2.html">soundmanager2.js</a>
<a class="source" href="../../../src/SoundManager2.html">SoundManager2.as</a>
<a class="source" href="../../../src/SoundManager2_AS3.html">SoundManager2_AS3.as</a>
<a class="source" href="../../../src/SoundManager2_SMSound_AS3.html">SoundManager2_SMSound_AS3.as</a>
</div>
</div>
</div>
<table cellspacing=0 cellpadding=0>
<thead>
<tr>
<th class=docs><h1>mpc.js</h1></th>
<th class=code></th>
</tr>
</thead>
<tbody>
<tr id='section-1'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
<p>SoundManager 2: MPC (Drum Machine) demo</p>
</td>
<td class=code>
<div class='highlight'><pre><span class="kd">var</span> <span class="nx">MPC</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">idPrefix</span> <span class="o">=</span> <span class="s1">&#39;btn-&#39;</span><span class="p">;</span> <span class="c1">// HTML ID prefix</span>
<span class="k">this</span><span class="p">.</span><span class="nx">statusWidth</span> <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">progressWidth</span> <span class="o">=</span> <span class="mi">256</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">keys</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;1&#39;</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span><span class="s1">&#39;2&#39;</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span><span class="s1">&#39;3&#39;</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span><span class="s1">&#39;4&#39;</span><span class="o">:</span><span class="mi">3</span><span class="p">,</span><span class="s1">&#39;q&#39;</span><span class="o">:</span><span class="mi">4</span><span class="p">,</span><span class="s1">&#39;w&#39;</span><span class="o">:</span><span class="mi">5</span><span class="p">,</span><span class="s1">&#39;e&#39;</span><span class="o">:</span><span class="mi">6</span><span class="p">,</span><span class="s1">&#39;r&#39;</span><span class="o">:</span><span class="mi">7</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="o">:</span><span class="mi">8</span><span class="p">,</span><span class="s1">&#39;s&#39;</span><span class="o">:</span><span class="mi">9</span><span class="p">,</span><span class="s1">&#39;d&#39;</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span><span class="s1">&#39;f&#39;</span><span class="o">:</span><span class="mi">11</span><span class="p">,</span><span class="s1">&#39;z&#39;</span><span class="o">:</span><span class="mi">12</span><span class="p">,</span><span class="s1">&#39;x&#39;</span><span class="o">:</span><span class="mi">13</span><span class="p">,</span><span class="s1">&#39;c&#39;</span><span class="o">:</span><span class="mi">14</span><span class="p">,</span><span class="s1">&#39;v&#39;</span><span class="o">:</span><span class="mi">15</span><span class="p">}</span></pre></div>
</td>
</tr>
<tr id='section-2'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>scope within these event handler methods: &ldquo;this&rdquo; = SMSound() object instance (see SMSound() in soundmanager.js for reference) </p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">showProgress</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-3'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<p>sound is loading, update bytes received using this.bytesLoaded / this.bytesTotal</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">className</span> <span class="o">!=</span> <span class="s1">&#39;loading&#39;</span><span class="p">)</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;loading&#39;</span><span class="p">;</span> <span class="c1">// a bit inefficient here..</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_showStatus</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">bytesTotal</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onid3</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;mpc.onid3()&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">oName</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">oName</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">id3</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="nx">oName</span><span class="o">+</span><span class="s1">&#39;: &#39;</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">id3</span><span class="p">[</span><span class="nx">oName</span><span class="p">])</span> <span class="c1">// write out name/value ID3 pairs (eg. &quot;artist: Beck&quot;)</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">sID</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">title</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;Sound ID: &#39;</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="o">+</span><span class="s1">&#39; (&#39;</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">url</span><span class="o">+</span><span class="s1">&#39;)&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onfinish</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_reset</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onplay</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;active&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">whileplaying</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_showStatus</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">duration</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_keyHandler</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">oEvt</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nx">event</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sChar</span> <span class="o">=</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">oEvt</span><span class="p">.</span><span class="nx">keyCode</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">keys</span><span class="p">[</span><span class="nx">sChar</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="nx">soundManager</span><span class="p">.</span><span class="nx">play</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">keys</span><span class="p">[</span><span class="nx">sChar</span><span class="p">]);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_showStatus</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sID</span><span class="p">,</span><span class="nx">n1</span><span class="p">,</span><span class="nx">n2</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getButton</span><span class="p">(</span><span class="nx">sID</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">offX</span> <span class="o">=</span> <span class="p">(</span><span class="nx">n2</span><span class="o">&gt;</span><span class="mi">0</span><span class="o">?</span><span class="p">(</span><span class="o">-</span><span class="nx">self</span><span class="p">.</span><span class="nx">progressWidth</span><span class="o">+</span><span class="nb">parseInt</span><span class="p">((</span><span class="nx">n1</span><span class="o">/</span><span class="nx">n2</span><span class="p">)</span><span class="o">*</span><span class="nx">o</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">))</span><span class="o">:-</span><span class="nx">self</span><span class="p">.</span><span class="nx">progressWidth</span><span class="p">);</span>
<span class="nx">o</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundPosition</span> <span class="o">=</span> <span class="nx">offX</span><span class="o">+</span><span class="s1">&#39;px 0px&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_getButton</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sID</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">idPrefix</span><span class="o">+</span><span class="nx">sID</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_reset</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sID</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="nx">sID</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_showStatus</span><span class="p">(</span><span class="nx">sID</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">self</span><span class="p">.</span><span class="nx">_showStatus</span><span class="p">(</span><span class="nx">sID</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);},</span><span class="mi">200</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">onkeydown</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_keyHandler</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">mpc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MPC</span><span class="p">();</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">flashVersion</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">match</span><span class="p">(</span><span class="sr">/#flash8/i</span><span class="p">)</span><span class="o">?</span><span class="mi">8</span><span class="o">:</span><span class="mi">9</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">flashVersion</span> <span class="o">!=</span> <span class="mi">8</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">useHighPerformance</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="s1">&#39;../../swf/&#39;</span><span class="p">,</span> <span class="c1">// path to load SWF from (overriding default)</span>
<span class="nx">bgColor</span><span class="o">:</span> <span class="s1">&#39;#333333&#39;</span><span class="p">,</span>
<span class="nx">wmode</span><span class="o">:</span> <span class="s1">&#39;transparent&#39;</span><span class="p">,</span>
<span class="nx">debugMode</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">consoleOnly</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">useFlashBlock</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">onready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-4'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
<p>This is the &ldquo;onload&rdquo; equivalent which is called when SoundManager has been initialised (sounds can be created, etc.)</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">mpc</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span></pre></div>
</td>
</tr>
<tr id='section-5'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
<p>set up some default options / event handlers &ndash; so all sounds created are given these handlers</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
<span class="nx">defaultOptions</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">autoLoad</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">whileloading</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">showProgress</span><span class="p">,</span>
<span class="nx">onid3</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">onid3</span><span class="p">,</span>
<span class="nx">onload</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">onload</span><span class="p">,</span>
<span class="nx">onplay</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">onplay</span><span class="p">,</span>
<span class="nx">whileplaying</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">whileplaying</span><span class="p">,</span>
<span class="nx">onfinish</span><span class="o">:</span> <span class="nx">mpc</span><span class="p">.</span><span class="nx">onfinish</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">html5</span><span class="p">.</span><span class="nx">needsFlash</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;isHTML5&#39;</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;inline&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">soundURLs</span> <span class="o">=</span> <span class="s1">&#39;AMB_BD_1,AMB_FTM2,AMB_HHCL,AMB_HHOP,AMB_HHPD,AMB_HTM,AMB_LTM2,AMB_MTM,AMB_RIM1,AMB_SN13,AMB_SN_5,CHINA_1,CRASH_1,CRASH_5,CRASH_6,RIDE_1&#39;</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">soundURLs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">createSound</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="o">+</span><span class="nx">i</span><span class="p">,</span> <span class="s1">&#39;audio/&#39;</span><span class="o">+</span><span class="nx">soundURLs</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">+</span><span class="s1">&#39;.mp3&#39;</span><span class="p">);</span>
<span class="p">}</span></pre></div>
</td>
</tr>
<tr id='section-6'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>createSound options can also be set on a per-file basis, with specific option overrides.
(Options not specified here will inherit defaults as defined in soundManager.defaultOptions.)</p>
<p>eg.</p>
<p>soundManager.createSound({
id: &lsquo;mySound&rsquo;,
url: &lsquo;/path/to/some.mp3&rsquo;,
stream: true,
autoPlay: true,
multiShot: false,
whileloading: function() { alert(&lsquo;sound &rsquo;+this.id+&lsquo;: &rsquo;+this.bytesLoaded+&lsquo; of &rsquo;+this.bytesTotal+&lsquo; bytes loaded.&rsquo;); } // event handler: &ldquo;this&rdquo; is scoped to SMSound() object instance for easy access to methods/properties
});</p>
<ul>
<li>OR &ndash;</li>
</ul>
<p>If you just want a sound with all default options, you can also specify just the required id and URL as string parameters:</p>
<p>soundManager.createSound(&lsquo;mySound&rsquo;,&lsquo;/path/to/some.mp3&rsquo;);</p>
</td>
<td class=code>
<div class='highlight'><pre><span class="p">});</span></pre></div>
</td>
</tr>
</table>
</div>
</body>
Reference in New Issue Copy Permalink