【javascript】サイト上で音楽の再生・停止について

Question

現在サイト上で音楽を流すという処理を導入しています。
下記のコードで動作自体はうまくいったんですが、停止を押した時、音楽が止まるまでに何秒か間が空いてしまいます。
この間をなくす方法はありますでしょうか？

再生・停止のjavascript（head内に記述）

	<script type="text/javascript">
		var audioElem;
		var audioElem2;

		function PlaySound() {
			audioElem = new Audio();
			audioElem.src = "song/sound1.MP3";
			audioElem.play();
		}
		function StopSound(){
			audioElem.pause();
		}
		function PlaySound2() {
			audioElem2 = new Audio();
			audioElem2.src = "song/sound2.MP3";
			audioElem2.play();
		}
		function StopSound2(){
			audioElem2.pause();
		}
	</script>

HTML

再生1
<a href="javascript:void(0);" onclick="PlaySound();" class="school_song_on"><span>ON</span></a>
<a href="javascript:void(0);" onclick="StopSound();" class="school_song_off"><span>OFF</span></a>

再生2
<a href="javascript:void(0);" onclick="PlaySound2();" class="school_song_on"><span>ON</span></a>
<a href="javascript:void(0);" onclick="StopSound2();" class="school_song_off"><span>OFF</span></a>

Answer 1

すぐに停止できてるようですが？ほかのコードが悪さしているのでは？
検証ページ

Comments

[murama2]

回答ありがとうございます。
すみません質問内容の件は勘違いだったのですが、別に問題が発生してしまいまして。。。
・再生ボタンを連打すると重複して再生されてしまう。
・「再生1」を再生したあと「再生2」をクリックすると二重になってしまう
上記2つの問題に困っています。
なにか解決策がありますでしょうか。

[turbgraphics200]

ヒントだけ、クリックするたびに new Audio() しているため、Audioエレメントがメモリ上で生成され続けてしまいます。