lrullo/soundmap_theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
master
soundmap_theme/carnaval/soundmanagerv297a-20130101/doc/generated/demo/mp3-player-button/script/mp3-player-button.html
Luca 90fd8bd8f7 Theme for worpdress 4.6.1
2016-11-29 01:18:17 +01:00

455 lines
48 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>mp3-player-button.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.html">mp3-player-button.js</a>
<a class="source" href="../../mpc/script/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>mp3-player-button.js</h1></th>
<th class=code></th>
</tr>
</thead>
<tbody>
<tr id='section-SoundManager_2_Demo:_Play_MP3_links_via_button'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-SoundManager_2_Demo:_Play_MP3_links_via_button">&#182;</a>
</div>
<h2>SoundManager 2 Demo: Play MP3 links via button</h2>
<p>http://schillmania.com/projects/soundmanager2/</p>
<p>A simple demo making MP3s playable &ldquo;inline&rdquo;
and easily styled/customizable via CSS.</p>
<p>A variation of the &ldquo;play mp3 links&rdquo; demo.</p>
<p>Requires SoundManager 2 Javascript API.</p>
</td>
<td class=code>
<div class='highlight'><pre><span class="cm">/*jslint white: false, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: false, newcap: true, immed: true */</span>
<span class="cm">/*global document, window, soundManager, navigator */</span>
<span class="kd">function</span> <span class="nx">BasicMP3Player</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="nx">pl</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">sm</span> <span class="o">=</span> <span class="nx">soundManager</span><span class="p">,</span> <span class="c1">// soundManager instance</span>
<span class="nx">isTouchDevice</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/ipad|iphone/i</span><span class="p">)),</span>
<span class="nx">isIE</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/msie/i</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">excludeClass</span> <span class="o">=</span> <span class="s1">&#39;button-exclude&#39;</span><span class="p">;</span> <span class="c1">// CSS class for ignoring MP3 links</span>
<span class="k">this</span><span class="p">.</span><span class="nx">links</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sounds</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">soundsByURL</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">indexByURL</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">soundCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</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>configuration options</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">playNext</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// stop after one sound, or play through list until end</span>
<span class="nx">autoPlay</span><span class="o">:</span> <span class="kc">false</span> <span class="c1">// start playing the first sound right away</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">css</span> <span class="o">=</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>CSS class names appended to link during various states</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">sDefault</span><span class="o">:</span> <span class="s1">&#39;sm2_button&#39;</span><span class="p">,</span> <span class="c1">// default state</span>
<span class="nx">sLoading</span><span class="o">:</span> <span class="s1">&#39;sm2_loading&#39;</span><span class="p">,</span>
<span class="nx">sPlaying</span><span class="o">:</span> <span class="s1">&#39;sm2_playing&#39;</span><span class="p">,</span>
<span class="nx">sPaused</span><span class="o">:</span> <span class="s1">&#39;sm2_paused&#39;</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>event + DOM utils</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">this</span><span class="p">.</span><span class="nx">includeClass</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
<span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">o</span><span class="p">.</span><span class="nx">attachEvent</span><span class="p">(</span><span class="s1">&#39;on&#39;</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
<span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">detachEvent</span><span class="p">(</span><span class="s1">&#39;on&#39;</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">classContains</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">)</span><span class="o">!==</span><span class="s1">&#39;undefined&#39;</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;(\\s|^)&#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;(\\s|$)&#39;</span><span class="p">))</span><span class="o">:</span><span class="kc">false</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</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">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">+</span><span class="s1">&#39; &#39;</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="o">+</span><span class="nx">cStr</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">removeClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</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">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;( &#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;)|(&#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;)&#39;</span><span class="p">,</span><span class="s1">&#39;g&#39;</span><span class="p">),</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">getSoundByURL</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sURL</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">?</span> <span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span> <span class="o">:</span> <span class="kc">null</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">isChildOfNode</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">sNodeName</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">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">sNodeName</span> <span class="o">=</span> <span class="nx">sNodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
<span class="k">do</span> <span class="p">{</span>
<span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">sNodeName</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">===</span> <span class="nx">sNodeName</span> <span class="o">?</span> <span class="nx">o</span> <span class="o">:</span> <span class="kc">null</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">events</span> <span class="o">=</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>handlers for sound events as they&rsquo;re started/stopped/played</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">play</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">stop</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_data</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="p">},</span>
<span class="nx">pause</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPaused</span><span class="p">;</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">resume</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_data</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="k">if</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playNext</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">nextLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">nextLink</span><span class="o">&lt;</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">pl</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="s1">&#39;target&#39;</span><span class="o">:</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">nextLink</span><span class="p">]});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">stopEvent</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="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getTheDamnLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isIE</span><span class="p">)</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></pre></div>
</td>
</tr>
<tr id='section-6'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>I really didn&rsquo;t want to have to do this.</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">return</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="o">?</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">);</span>
<span class="p">}</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="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleClick</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></pre></div>
</td>
</tr>
<tr id='section-7'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
<p>a sound link was clicked</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">button</span><span class="o">&gt;</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-8'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
<p>ignore right-click</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">return</span> <span class="kc">true</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">getTheDamnLink</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
<span class="nx">sURL</span><span class="p">,</span>
<span class="nx">soundURL</span><span class="p">,</span>
<span class="nx">thisSound</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="s1">&#39;a&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">isChildOfNode</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">sURL</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span> <span class="o">||</span> <span class="o">!</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">canPlayLink</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// pass-thru for non-MP3/non-links</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">includeClass</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;handleClick()&#39;</span><span class="p">);</span>
<span class="nx">soundURL</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
<span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getSoundByURL</span><span class="p">(</span><span class="nx">soundURL</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">)</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-9'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-9">&#182;</a>
</div>
<p>already exists</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span> <span class="o">===</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-10'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-10">&#182;</a>
</div>
<p>and was playing (or paused)</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-11'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-11">&#182;</a>
</div>
<p>different sound</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span> <span class="c1">// start playing current</span>
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;sound different than last sound: &#39;</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-12'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-12">&#182;</a>
</div>
<p>create sound</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">sm</span><span class="p">.</span><span class="nx">createSound</span><span class="p">({</span>
<span class="nx">id</span><span class="o">:</span><span class="s1">&#39;basicMP3Sound&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">soundCount</span><span class="o">++</span><span class="p">),</span>
<span class="nx">url</span><span class="o">:</span><span class="nx">soundURL</span><span class="p">,</span>
<span class="nx">onplay</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">play</span><span class="p">,</span>
<span class="nx">onstop</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">stop</span><span class="p">,</span>
<span class="nx">onpause</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">pause</span><span class="p">,</span>
<span class="nx">onresume</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">resume</span><span class="p">,</span>
<span class="nx">onfinish</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">finish</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">type</span><span class="o">||</span><span class="kc">null</span><span class="p">)</span>
<span class="p">});</span></pre></div>
</td>
</tr>
<tr id='section-13'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-13">&#182;</a>
</div>
<p>tack on some custom data</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_data</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">oLink</span><span class="o">:</span> <span class="nx">o</span><span class="p">,</span> <span class="c1">// DOM node for reference within SM2 object event handlers</span>
<span class="nx">className</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span>
<span class="p">};</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">soundURL</span><span class="p">]</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">sounds</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-14'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-14">&#182;</a>
</div>
<p>stop last sound</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">thisSound</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span> <span class="c1">// reference for next call</span>
<span class="k">return</span> <span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">stopSound</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">stop</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// iOS 4.2+ security blocks onfinish() -&gt; playNext() if we set a .src in-between(?)</span>
<span class="nx">soundManager</span><span class="p">.</span><span class="nx">unload</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</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="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;basicMP3Player.init()&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span>
<span class="nx">foundItems</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">oLinks</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span></pre></div>
</td>
</tr>
<tr id='section-15'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-15">&#182;</a>
</div>
<p>grab all links, look for .mp3</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">j</span><span class="o">=</span><span class="nx">oLinks</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">classContains</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">))</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-16'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-16">&#182;</a>
</div>
<p>self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration &ndash; good if you&rsquo;re lazy and want ALL MP3/playable links to do this</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">foundItems</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">href</span><span class="p">]</span> <span class="o">=</span> <span class="nx">foundItems</span><span class="p">;</span> <span class="c1">// hack for indexing</span>
<span class="nx">foundItems</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">foundItems</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="nx">target</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nx">preventDefault</span><span class="o">:</span><span class="kd">function</span><span class="p">(){}});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;basicMP3Player.init(): Found &#39;</span><span class="o">+</span><span class="nx">foundItems</span><span class="o">+</span><span class="s1">&#39; relevant items.&#39;</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="p">();</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">basicMP3Player</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span></pre></div>
</td>
</tr>
<tr id='section-17'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-17">&#182;</a>
</div>
<p>use HTML5 audio for MP3/MP4, if available</p>
</td>
<td class=code>
<div class='highlight'><pre><span class="nx">soundManager</span><span class="p">.</span><span class="nx">preferFlash</span> <span class="o">=</span> <span class="kc">false</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-18'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-18">&#182;</a>
</div>
<p>soundManager.createSound() etc. may now be called</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="nx">basicMP3Player</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BasicMP3Player</span><span class="p">();</span>
<span class="p">});</span></pre></div>
</td>
</tr>
</table>
</div>
</body>
Reference in New Issue View Git Blame Copy Permalink