jsと<audio>タグについて

HTML5の<audio>タグを使用し、試聴プレーヤーのようなものを作りたいと思っています。
こちらのサイト（http://www.html5-memo.com/audio/player001/）様から拝借したソースが以下です。

javascript------------------
function audioPlay(){
document.getElementById("aka").play();
}
function audioPause(){
document.getElementById("aka").pause();
}

html-----------------------
<audio id="aka" preload="auto">　<!-- 1曲目 -->
<source src="audio/aka.mp3" type="audio/mp3"></audio>
<input type="button" onclick="audioPlay()" value="再生">
<input type="button" onclick="audioPause()" value="停止">

<audio id="midori" preload="auto">　<!-- 2曲目 -->
<source src="audio/midori.mp3" type="audio/mp3"></audio>
<input type="button" onclick="audioPlay()" value="再生">
<input type="button" onclick="audioPause()" value="停止">

…以下同じ様にに7曲分…

-------------------------

現状では当然1曲目しか再生されません。
onclick="audioPlay()"がfunction audioPlay()を読みに行き、その中のgetElementById("aka")でID「aka」を指定して<audio id="aka" preload="auto">を実行している、というのは調べてわかったのですが、2曲目のID「midori」を再生するにはどうしたらいいのでしょうか。
audioPlay('aka')、audioPlay('midori')などとして引数を利用するのかな、と思ったのですが、getElementById("aka")がよくわからず・・・

初心者で質問の内容すら上手く説明できたか不安なのですが、内容を察してくださる方お教え願えませんか。
よろしくお願い致します。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2012/04/26 12:18

現状のfunctionがid="aka"専用になっていますので、"midori"用のfunctionを新しく作ってそちらを呼び出すようにすれば動作するはずです。

しかし、これだと要素が増える毎にfunctionを追加しなければならないので、面倒。
ということで、idを指定すると対応する要素のplay/pauseを行なうようにしてあげればよろしいかと。
例えば
　function audioPlay(id){
　　document.getElementById(id).play();
　}
といった具合です。
この場合は、呼び出し側でidを指定する必要があるので、
　onclick="audioPlay('aka')"　とか　onclick="audioPlay('midori')"
などのようにしてあげる必要があります。