状態と変更予定内容

audioタグを使用して複数の音楽をサイト上に掲載し再生できるようにしているのですが、曲Aを再生中に曲Bの再生ボタンを押すと曲Aと曲Bが同時に再生されてしまいます。

曲Aを再生中に曲Bの再生ボタンを押した際に、曲Aを停止して曲Bのみを再生できるようにしたいと考えています。

質問内容

上記の様な事を実装できるJavaScriptのライブラリ等がある場合教えてください。
（探して見たのですが1つの曲を制御する方法しか見つかりませんでした）

もしくは、ライブラリを使用しなくても実装が可能でしたらアドバイスを頂けると幸いです。

ソース

実際のサイト
https://www.8yazaki.jp/
※公開している曲はすべてオリジナル曲です

サイトのソース
https://github.com/8yazaki/official-site

補足情報

曲情報や音源・画像はXMLファイルにまとめ、jQueryを使って流し込んで表示させています。
（このあたりもJavaScriptを実装するときの弊害になりそうですが・・・）

アドバイス頂けると幸いです。

_lemon2003_

2018/09/13 08:23

曲Aを再生中に曲Bを再生したら、曲Aを止めるということですか？

8yazaki

2018/09/13 08:49

はい。そうです。　説明が下手ですみません^^;

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1(function(){
2	let playingAudio = null;
3	let audioList = document.querySelectorAll("div.audio > audio");
4	
5	let playAudioHandler = function playingAudioHandler(event){
6		if(playingAudio && playingAudio !== event.target){
7			playingAudio.pause();
8			// 停止時に位置を最初にする場合は下↓のコメントを外す
9			// playingAudio.currentTime = 0;
10		}
11		playingAudio = event.target;
12	}
13
14	for(let i = 0, l = audioList.length; i < l; i++){
15		audioList[i].addEventListener("play", playAudioHandler);
16	}
17})();

追記1

html
1	<!-- 曲リスト全体 -->
2	<script>
3		$(function() {
4			$.ajax({
5				url: 'musics.xml?20180808',
6				type: 'GET',
7				dataType: 'xml',
8				timeout: 1000,
9				error: function() {
10					console.log("曲リストの読み込みに失敗しました");
11				},
12				success: function(xml) {
13					$(xml).find('music').each(function() {
14						$("#musics_list").append(
15							'<article class="music"><div><div class="type"><div>' +
16							$(this).find('type').text() + '</div></div><h4>「' +
17							$(this).find('title').text() + '」</h4><img src="img/jacket/' +
18							$(this).find('jacket').text() + '"   alt="' +
19							$(this).find('title').text() + '"><span class="mask"><p>' +
20							$(this).find('comment').text() + '</p><a href="' +
21							$(this).find('mp3').text() + '" download="music/' +
22							$(this).find('mp3').text() + '">MP3ダウンロード</a></span><div class="audio"><audio src="music/' +
23							$(this).find('mp3').text() + '" controls="controls"></audio></div></div></article>'
24
25						);
26					});
27
28					$(xml).find('music:lt(1)').each(function() {
29						$("#new_songs").append(
30							'<li><img src="img/jacket/' +
31							$(this).find('jacket').text() + '"   alt="' +
32							$(this).find('title').text() + '"><h4>「' +
33							$(this).find('title').text() + '」</h4><p>' +
34							$(this).find('comment').text() + '</p><a href="music/' +
35							$(this).find('mp3').text() + '" download="' +
36							$(this).find('mp3').text() + '">MP3ダウンロード</a><audio src="music/' +
37							$(this).find('mp3').text() + '" controls="controls"></audio></li>'
38						);
39					});
40
41					let $playingAudio = null;
42					let $audioList = $("div.audio>audio, ul#new_songs>li>audio");
43
44					let playAudioHandler = function playAudioHandler(event){
45						if($playingAudio && $playingAudio[0] !== event.target){
46							$playingAudio[0].pause();
47
48							// 停止時に位置を最初にする場合は下↓のコメントを外す
49							// playingAudio.currentTime[0] = 0;
50						}
51						$playingAudio = $(event.target);
52					}
53					
54					for(let i = 0, l = $audioList.length; i < l; i++){
55						$audioList[i].addEventListener("play", playAudioHandler);
56					}
57				}
58			});
59		});
60	</script>