小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryでスライダーに追加した音源（audio）を操作

  • 公開日：2024-06-01
  • 最終更新日：2024-08-23

スライダーの中に音源を設置し都度再生したいとのご要望があった際に、スライドが切り替わる度に自動で音源が停止されるように実装した、音源の停止方法をメモ。

HTML

<div class="slide">
<div class="slide__flame">
<ul class="list">
<li>
<audio controls src="sample01.mp3" id="sample01">音源01</audio>
<img src="img01.jpg">
<div class="play"><a href="sample01">再生</a></div><!-- iOS用 -->
<div class="pause"><a href="sample01">停止</a></div><!-- iOS用 -->
</li>
<li>
<audio controls src="sample02.mp3" id="sample02">音源02</audio>
<img src="img02.jpg">
<div class="play"><a href="sample02">再生</a></div><!-- iOS用 -->
<div class="pause"><a href="sample02">停止</a></div><!-- iOS用 -->
</li>

…

<li>
<audio controls src="sample09.mp3" id="sample09">音源09</audio>
<img src="img09.jpg">
<div class="play"><a href="sample09">再生</a></div><!-- iOS用 -->
<div class="pause"><a href="sample09">停止</a></div><!-- iOS用 -->
</li>
</ul>

</div>
<nav class="slide__nav">
<ul class="slide__nav__list">
<li class="slide__nav__list__item"><a href="" class="prev">前へ</a></li>
<li class="slide__nav__list__item"><a href="" class="next">次へ</a></li>
</ul>
</nav>
</div>

jQuery

$(function(){

	var setWidth = $('.slide__flame').width();
	var sliderSize = $('.list').length;
	var position_slide = 0;
	var maxposition_slide = sliderSize - 1;
	
	//音源の停止処理
	$('.slide__nav__list a').click(function(){

		for($i = 0; $i < sliderSize; $i++){
			$('audio').get($i).pause();
			$('audio').get($i).currentTime = 0;
		}

	});

	$('.slide__nav__list__item .prev').click(function(){
		
		if(position_slide > 0){

			$('.modal .list').animate({'margin-left':'+='+ setWidth +'px'}, {duration:500, easing:'swing'});
			position_slide = position_slide - 1;

		}else{

			$('.modal .list').animate({'margin-left': '-'+ maxposition_slide * setWidth +'px'}, {duration:500, easing:'swing'});
			position_slide = maxposition_slide;

		}
		
		return false;
		
	});
						
	$('.slide__nav__list__item .next').click(function(){
		
		if(position_slide < maxposition_slide){

			$('.modal .list').animate({'margin-left':'-='+ setWidth +'px'}, {duration:500, easing:'swing'});
			position_slide = position_slide + 1;
		
		}else{

			$('.modal .list').animate({'margin-left':'0'}, {duration:500, easing:'swing'});
			position_slide = 0;

		}
		
		return false;
		
	});
	
})

一時停止（pause）後に「currentTime 」を使い開始位置まで巻き戻しすることで停止と同様の機能を実装しています。

尚、iOSでは再生ボタンをクリックしても動かないため、「再生、停止」のボタンを追加し、下記をスクリプトに追記しています。

$('.play a').click(function(){
		
	var audio = '#'+$(this).attr('href');
	$(audio).get(0).play();
	return false;

});

$('.pause a').click(function(){
		
	var audio = '#'+$(this).attr('href');
	$(audio).get(0).pause();
	$(audio).get(0).currentTime = 0;
	return false;

});

同一カテゴリーの記事