複数のaudioプレーヤー再生、一時停止、時間制御

タグはHTML 5ブラウザでオーディオファイルを再生できます.
デフォルトではコントロールパネルが用意されていますが、音声を再生するだけで、コントロールパネルは自分で表示の状態を定義します.
ここでjQueryを使用して制御するコードは以下の通りです.

(!empty($val['voices'])){foreach($val['voices'] as $k=>$v){?>
    
class="list-audio">
        $v['title'];?>
        
class="mius">
            
class="sche allTime">0

            
class="progress">

            
class="times currentTime">00:00

            
class="nsa">

            
class="play playon" data-audio="$v['voice'];?>" data-currentTime="0" data-duration="$v['duration'];?>">

            
class="stron hide">

            
class="clear">

        

    

}} ?>

<br></span><span style="color:rgb(232,191,106);">    </span>jQuery(<span style="color:rgb(204,120,50);"><strong>function</strong></span>(){<br><span style="color:rgb(204,120,50);"><strong>var </strong></span>$audio=jQuery(<span style="color:rgb(106,135,89);">"audio"</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">        </span><span style="color:rgb(204,120,50);"><strong>var </strong></span>$audioInterval=<span style="color:rgb(106,135,89);">''</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">        </span>jQuery(<span style="color:rgb(106,135,89);">".play"</span>).<span style="color:rgb(255,198,109);">each</span>(<span style="color:rgb(204,120,50);"><strong>function</strong></span>(){<br>            jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>).<span style="color:rgb(255,198,109);">removeClass</span>(<span style="color:rgb(106,135,89);">"pauseon"</span>).<span style="color:rgb(255,198,109);">addClass</span>(<span style="color:rgb(106,135,89);">"playon"</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(255,198,109);">timeChange</span>(jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>).<span style="color:rgb(255,198,109);">attr</span>(<span style="color:rgb(106,135,89);">'data-duration'</span>)<span style="color:rgb(204,120,50);">,</span>jQuery(<span style="color:rgb(106,135,89);">".allTime"</span><span style="color:rgb(204,120,50);">,</span>jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>).<span style="color:rgb(152,118,170);">parent</span>()))<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">        </span>})<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);"><br></span><span style="color:rgb(204,120,50);">        </span>jQuery(<span style="color:rgb(106,135,89);">".play"</span>).<span style="color:rgb(255,198,109);">on</span>(<span style="color:rgb(106,135,89);">'click'</span><span style="color:rgb(204,120,50);">,</span><span style="color:rgb(204,120,50);"><strong>function</strong></span>(){<br><span style="color:rgb(255,198,109);">clearInterval</span>($audioInterval)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>($audio.<span style="color:rgb(255,198,109);">get</span>(<span style="color:rgb(104,151,187);">0</span>)).<span style="color:rgb(255,198,109);">pause</span>()<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(204,120,50);"><strong>var </strong></span>$this=jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);"><br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(204,120,50);"><strong>if</strong></span>($this.<span style="color:rgb(255,198,109);">hasClass</span>(<span style="color:rgb(106,135,89);">'pauseon'</span>)){<br>                jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>).<span style="color:rgb(255,198,109);">removeClass</span>(<span style="color:rgb(106,135,89);">"pauseon"</span>).<span style="color:rgb(255,198,109);">addClass</span>(<span style="color:rgb(106,135,89);">"playon"</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>}<span style="color:rgb(204,120,50);"><strong>else</strong></span>{<br>                jQuery(<span style="color:rgb(106,135,89);">".play"</span>).<span style="color:rgb(255,198,109);">each</span>(<span style="color:rgb(204,120,50);"><strong>function</strong></span>(){<br>                    jQuery(<span style="color:rgb(204,120,50);"><strong>this</strong></span>).<span style="color:rgb(255,198,109);">removeClass</span>(<span style="color:rgb(106,135,89);">"pauseon"</span>).<span style="color:rgb(255,198,109);">addClass</span>(<span style="color:rgb(106,135,89);">"playon"</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>})<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);"><br></span><span style="color:rgb(204,120,50);">                </span>$this.<span style="color:rgb(255,198,109);">addClass</span>(<span style="color:rgb(106,135,89);">"pauseon"</span>).<span style="color:rgb(255,198,109);">removeClass</span>(<span style="color:rgb(106,135,89);">"playon"</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>$audio.<span style="color:rgb(255,198,109);">attr</span>(<span style="color:rgb(106,135,89);">'src'</span><span style="color:rgb(204,120,50);">,</span>$this.<span style="color:rgb(255,198,109);">attr</span>(<span style="color:rgb(106,135,89);">'data-audio'</span>))<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>($audio.<span style="color:rgb(255,198,109);">get</span>(<span style="color:rgb(104,151,187);">0</span>)).<span style="color:rgb(152,118,170);">currentTime</span>=$this.<span style="color:rgb(255,198,109);">attr</span>(<span style="color:rgb(106,135,89);">'data-currentTime'</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>($audio.<span style="color:rgb(255,198,109);">get</span>(<span style="color:rgb(104,151,187);">0</span>)).<span style="color:rgb(255,198,109);">play</span>()<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>$audioInterval=<span style="color:rgb(255,198,109);">setInterval</span>(<span style="color:rgb(204,120,50);"><strong>function</strong></span>() {<br><span style="color:rgb(204,120,50);"><strong>var </strong></span>currentTime = ($audio.<span style="color:rgb(255,198,109);">get</span>(<span style="color:rgb(104,151,187);">0</span>)).<span style="color:rgb(152,118,170);">currentTime</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                    </span>$this.<span style="color:rgb(255,198,109);">attr</span>(<span style="color:rgb(106,135,89);">'data-currentTime'</span><span style="color:rgb(204,120,50);">,</span>currentTime)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                    </span><span style="color:rgb(255,198,109);">timeChange</span>(currentTime<span style="color:rgb(204,120,50);">,</span>jQuery(<span style="color:rgb(106,135,89);">".currentTime"</span><span style="color:rgb(204,120,50);">,</span>$this.<span style="color:rgb(255,198,109);">parent</span>()))<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                    </span><span style="color:rgb(204,120,50);"><strong>return false</strong></span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">                </span>}<span style="color:rgb(204,120,50);">,</span><span style="color:rgb(104,151,187);">1000</span>)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>}<br>        })<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">        </span><span style="color:rgb(204,120,50);"><strong>function </strong></span><span style="color:rgb(255,198,109);">timeChange</span>(time<span style="color:rgb(204,120,50);">,</span>timePlace){<br><span style="color:rgb(128,128,128);">//</span><span style="color:rgb(128,128,128);font-family:'  ';">  <br></span><span style="color:rgb(128,128,128);font-family:'  ';">            </span><span style="color:rgb(204,120,50);"><strong>var </strong></span>minute = time / <span style="color:rgb(104,151,187);">60</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(204,120,50);"><strong>var </strong></span>minutes = <span style="color:rgb(255,198,109);">parseInt</span>(minute)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(204,120,50);"><strong>if </strong></span>(minutes < <span style="color:rgb(104,151,187);">10</span>) {<br>                minutes = <span style="color:rgb(106,135,89);">"0" </span>+ minutes<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>}<br><span style="color:rgb(128,128,128);">//</span><span style="color:rgb(128,128,128);font-family:'  ';"> <br></span><span style="color:rgb(128,128,128);font-family:'  ';">            </span><span style="color:rgb(204,120,50);"><strong>var </strong></span>second = time % <span style="color:rgb(104,151,187);">60</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(152,118,170);">seconds </span>= <span style="color:rgb(255,198,109);">parseInt</span>(second)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span><span style="color:rgb(204,120,50);"><strong>if </strong></span>(<span style="color:rgb(152,118,170);">seconds </span>< <span style="color:rgb(104,151,187);">10</span>) {<br><span style="color:rgb(152,118,170);">seconds </span>= <span style="color:rgb(106,135,89);">"0" </span>+ <span style="color:rgb(152,118,170);">seconds</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>}<br><span style="color:rgb(204,120,50);"><strong>var </strong></span>currentTime = <span style="color:rgb(106,135,89);">"" </span>+ minutes + <span style="color:rgb(106,135,89);">"" </span>+ <span style="color:rgb(106,135,89);">":" </span>+ <span style="color:rgb(106,135,89);">"" </span>+ <span style="color:rgb(152,118,170);">seconds </span>+ <span style="color:rgb(106,135,89);">""</span><span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">            </span>timePlace.<span style="color:rgb(152,118,170);">html</span>(currentTime)<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(204,120,50);">        </span>}<br>    })<span style="color:rgb(204,120,50);">;<br></span><span style="color:rgb(232,191,106);">