私は現在、より高度な jQuery テクニックを学ぶためだけにサウンドボードを作成しようとしています。
現在、各 div はサウンドを表す jQuery 関数に関連付けられています。div をクリックすると、それぞれのサウンドが再生されます。現在の状態では、各関数を個別の関数として記述しているため、時間の経過とともに冗長なコードが発生します。
関数を抽象化して、適切なオーディオ ファイルを開始する任意の div クリックを表す 1 つの関数を構築する方法があるかどうかに興味があります。
以下のコードを参照してください。
HTML
<div id="wrapper">
<h1>Soundboard Trials</h1>
<div id="boxes">
<li id="nyan"><audio src="song.mp3"/></li>
<li id="duck"><audio src="duck.mp3"/></li>
<li id="duck"><audio src="cat.mp3"/></li>
</div>
</div>
CSS
#wrapper {
width: 800px;
margin: auto;
}
#boxes {
padding: 0;
margin: 50px auto;
list-style: none;
}
#boxes li {
width: 150px;
height: 150px;
background-color: #aaa;
margin: 5px;
float: left;
cursor: pointer;}
jQuery
$(function(){
$("#nyan").click(function(){
var audio = $('audio')[0];
if (audio.paused){
audio.play();
} else {
audio.pause();
}
});
$("#duck").click(function(){
var audio = $('audio')[1];
if (audio.paused){
audio.play();
} else {
audio.pause();
}
});
$("#cat").click(function(){
var audio = $('audio')[2];
if (audio.paused){
audio.play();
} else {
audio.pause();
}
});
});