audioタグを不特定多数使用する場合の設定

質問

HTML5のaudioタグで音声再生しようとしています。

コントローラーは非表示にして、inputタグで画像を指定しています。再生さえできればよいので、設定はplay()のみです。解説サイトのスクリプトを元に、play()だけ残しています。

------------------------------
☆HTML側

<audio id="audio" preload="auto">
<source src="http://......" type="audio/wav"></audio>
<source src="http://......" type="audio/mpeg"></audio>
<input type="image" src="audio.png" alt="再生" onclick="audioPlay()" value="再生">

☆JavaScript側

function audioPlay(){
document.getElementById("audio").play();
}
------------------------------

この設定で問題なく機能するのですが、この場合、 id指定をしているので、1ページに1つしか使えません。

1ページに不特定多数のaudioタグを使いたいのですが、どのように設定すれば良いのかGoogleで探しても（わたしの理解できるレベルのものは）見つかりませんでした。audioタグはまだこれから普及していないので、情報が少ないようです。

JavaScript側で設定することになるのでしょうが、JavaScriptはほとんどわからないので、お手上げの状態になっています。

ご教授ください。

回答No.2

noname#147388

JavaScript 部の

function audioPlay(id){
document.getElementById(id).play();
}

は一つのみ記載で全て動きます。

もともとここで id をべた書きだったものを引数にしたためです。

回答No.1

noname#147388

<audio id="audio1" preload="auto">... (@idの値をおのおの変える）
(略)
<input type="image" src="audio.png" alt="再生" onclick="audioPlay('{上記で設定した@id}')" value="再生">

function audioPlay(id){
document.getElementById(id).play();
}

こう....

お礼

ご回答ありがとうございます。

この方法はわたしも考えついた（これがわたしの限界）のですが、こうするとJavaScriptファイルに

function audioPlay(id){
document.getElementById(id).play();
}

が大量に並ぶことになってしまい、サイズが大きくなってしまうのでは、と心配しています。
JavaScript側で不特定多数のIDに対応させることはできないものでしょうか。