[JQUERY] 음원재생, 일시정지, 정지 버튼 만들기

어쩌다 음원재생 버튼을 만들 기회가 있어서 정리해봤다.

 

1. html

<audio id="music">
	<source src="음원파일경로">
</audio>
<a href="javascript:void(0);" class="play">음원재생</a>
<a href="javascript:void(0);" class="stop">정지</a>

음원재생과 일시정지는 한 버튼을 사용한다.

음원재생 버튼을 누르면 음원이 재생되고 재생중에 한번더 음원재생 버튼을 누르면 일시 정지된다.

정지를 누르면 처음으로 돌아가 음원재생 버튼을 누르면 처음에서부터 재생된다.

 

2. js

 var audio = document.getElementById("video");
 
 $(function(){
   $('.play').on('click', function(e){
     e = e || window.event;
     var btn = e.target;
     if (!audio.paused) {
     	//일시정지
     	audio.pause();
     	isPlaying = false;
     } else {
     	//재생
     	audio.play();
     	isPlaying = true;
     }
   });
   $('.stop').on('click', function(e){
     audio.pause();
     audio.currentTime = 0;
     isPlaying = false;
   });
 });

주석으로 재생과 일시정지를 적은 곳에 필요한 기능이 있다면 더 넣어도 된다.

 

 

* 기타

소스랑 상관없는 이야긴데..

음원파일의 경우, 태블릿과 모바일에서 재생되야 하는 경우라면 인코딩 파일을 모바일과 태블릿에서 재생 가능한 mp4파일을 삽입해야 정상적으로 작동된다. mp3, wav는 태블릿에서 안되더라..

 

* 참고페이지

Playing an MP3 file with the Web Audio API

html 마우스 클릭하면 소리 나오게 하기