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

MEMORANDUM

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

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

HTML

<div class="slide">
<div class="slide__flame">
<ul class="list">
<li>
<audio controls src="sample01.mp3" type="audio/mp3">音源01</audio>
<img src="img01.jpg">
</li>
<li>
<audio controls src="sample02.mp3" type="audio/mp3">音源02</audio>
<img src="img02.jpg">
</li>

…

<li>
<audio controls src="sample09.mp3" type="audio/mp3">音源03</audio>
<img src="img09.jpg">
</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 」を使い開始位置まで巻き戻しすることで停止と同様の機能を実装しています。

同一カテゴリーの記事