민서네집

html5 audio 태그 - 정해진 횟수만큼 play 시키기 본문

WEB (HTML, CSS)

html5 audio 태그 - 정해진 횟수만큼 play 시키기

브라이언7 2018. 1. 22. 18:36 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//$("#audio_id").get(0).play();
		//$("#audio_id").trigger('play');
		
		$("#audio_id").on('playing', function(event){
			$(this).attr("data-play-status", "playing");
		});
		
		$("#audio_id").on('ended', function(event){
			var remain_count = parseInt($(this).attr("data-remain-count"));
			remain_count -= 1;
			console.log("remain_count", remain_count);
			$(this).attr("data-remain-count", remain_count);
			if( remain_count > 0 ) {
				$(this).trigger('play');
			} else {
				$(this).attr("data-play-status", "end");
			}
		});
	});

	function play_start() {
		var playCount = $('#audio_id').attr('data-play-count');
		$('#audio_id').attr('data-remain-count',playCount);
		document.getElementById('audio_id').play();
	}
		
	function viewAudioStatus() {
		var status = $('#audio_id').attr("data-play-status");
		console.log("status: ", status);
		var remain_count = $('#audio_id').attr("data-remain-count");
		console.log("remain_count: ", remain_count);
	}

</script>
</head>
<body>
<audio id="audio_id" src="https://html5tutorial.info/media/vincent.mp3" data-play-count="3" data-remain-count="3" data-play-status="not_started"></audio>
<div>
	<button onclick="play_start()">Play</button>
	<button onclick="document.getElementById('audio_id').pause()">Pause</button>
	<button onclick="document.getElementById('audio_id').volume=1">Vol+</button>
	<button onclick="document.getElementById('audio_id').volume=0">Mute</button>
</div>
<hr />
<div>
	<button onclick="viewAudioStatus()">console</button>
</div>
</body>
</html>

audio_test.html



저작자표시

'WEB (HTML, CSS)' 카테고리의 다른 글

웹브라우저 console에 style 넣기  (0) 2018.02.14
Chrome 브라우저와 개발자 도구에서 메모리 문제 해결하기  (0) 2018.02.01
팝업창 크기 자동조절 자바스크립트  (0) 2017.11.18
jQuery 구버전과 최신버전의 혼용 - jQuery Migrate  (0) 2016.09.11
다기능의 Bootstrap기반 관리 화면 템플릿 : AdminLTE  (0) 2016.09.09
공유하기 링크
'WEB (HTML, CSS)' Related Articles more
Comments