jQueryを使用して複数のオーディオファイルを同時に再生しないようにするにはどうすればいいですか？

Question

私はhtml/jsの分野で完全に初心者です。私は17枚の写真で非常に基本的なインターフェイスを作成する必要があります。クリックするとそれぞれのサウンドが再生されます。

正しいアプローチを探していた日々を経て、私はうまくいくものを作ったが、小さな問題が1つあった。

1つのオーディオサンプルがトリガーされると、別のピクチャをクリックすると、前のサンプルが停止してリセットされます。私はこのサイトでたくさんの例を見つけましたが、js構文の理解はそれほどではありません。適切に実装できません。

ご協力いただきありがとうございます。ここで

は私が持っているものです。

<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#track1').click(function() { 
     $('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>'); 
    }); 
}); 
</script> 
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" /> 
<div id="1">&nbsp;</div> 

私はあなたの助けを本当に感謝します。

Answer 1

私はあなたとリンクしている投稿から少し掃除しました。これは、あなたがオーディオを再生し、停止することができるかどうかを試してみてください。たぶん

$(document).ready(function() { 
 
    var audioElement = document.createElement('audio'); 
 
    audioElement.setAttribute('src', 'content/mp3/01.mp3'); 
 
    
 
    $('#track1').click(function() { 
 
     audioElement.pause(); 
 
     audioElement.currentTime = 0; 
 
     audioElement.play(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" /> 
 
<div id="1">&nbsp;</div>

Answer 2

、私はより多くのコードを投稿し、より明確にします。サイト全体はまったく同じ「モジュール」で17倍になっています。これは次のようになります。

<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#track4').click(function(){ 
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true"  hidden="true"></embed>'); 
}); 
}); 
</script> 
<img name="track4" src="content/img/04.jpg" width="180" height="180" border="0" id="track4" alt="" /> 
<div id="4">&nbsp;</div> 

<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#track3').click(function(){ 
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true" hidden="true"></embed>'); 
}); 
}); 
</script> 
<img name="track3" src="content/img/03.jpg" width="180" height="180" border="0" id="track3" alt="" /> 
<div id="3">&nbsp;</div>