[js] Audio 사용하기

js로 오디오를 컨트롤하려고 js Audio 객체를 생성하여 구현하였다.

<script>
$(function((){
//오디오 플레이어
 	const audioPlayer = $('.mn_audio-player');
 	var url = '';
    
	if('${resDs.MT0010BC.subjectMediaInfo.EX_PATH}'.indexOf('/UPLOAD') == -1){
		url = '/UPLOAD'+'${resDs.MT0010BC.subjectMediaInfo.EX_PATH}';
	}else{
		url = '${resDs.MT0010BC.subjectMediaInfo.EX_PATH}';
	}
		
	const audio = new Audio(url);
	const volumeBarInput = $('.volume-bar input');

	//time init
	audio.onloadedmetadata = function() {
			
    //총 시간 넣기
      $('.time-text .total').text(getTimeCodeFromNum(audio.duration));
      audio.volume = .5;
      volumeBarInput.val(audio.volume * 100);
      $('.volume-bar span').css('width', audio.volume * 100+'%');

    }

	//재생 바
	const timeline = $('.timeline');
	$('.timeline').click(function(e){
		const timelineWidth = $(this).width();
		const timeSeek = e.offsetX / parseInt(timelineWidth) * audio.duration;
			audio.currentTime = timeSeek;
	});
		
	 //volume
	 const volumeBar = $('.volume-bar');
		
	  volumeBarInput.on('change', function(e){
		const barWidth = volumeBar.width();
		let newVolume = $(this).val();

		audio.volume = newVolume/100;

		$('.volume-bar span').css('width', newVolume+'%');
	  });

	//play button 	
	$('.player').click(function(){
		if($(this).hasClass('on')) {
			//play
			$(this).removeClass('on');
			audio.pause();
		} else {
			//play off
			$(this).addClass('on');
			audio.play();
		}
	});

	//재생시간 초마다 시간 변경
	setInterval(()=>{
		let nowTime = $('.time-text .time').text();
		let totalTime = $('.time-text .total').text();
		const timeBar = $('.time-bar');
		let timeData = audio.currentTime / audio.duration * 100+'%';
		timeBar.width(timeData);

		//현재 재생시간 넣기
		$('.time-text .time').text(getTimeCodeFromNum(audio.currentTime));
		// 종료되면 처음으로
		if(timeData == '100%'){
			$('.player').removeClass('on');
			timeBar.css('width','0%');
		}

	}, 500);

	//volume button
	$('.volume-btn').on('click', function(){
		$(this).toggleClass('off');
		timeline.toggleClass('big');

		if($(this).hasClass('off')) {
		//off
		audio.volume = 0;
		$('.volume-bar').hide();	
	} else {
		//on
		audio.volume = volumeBarInput.val()/100;
		$('.volume-bar').show();
	}
});
//audio player end
});

//시간 형식 변경 함수
function getTimeCodeFromNum(num) {
	num = parseInt(num);
	const hours = parseInt(num/3600);
	const minutes = parseInt((num%3600)/60);
	const seconds = parseInt(num%60);

	if (hours === 0) return minutes+":"+String(seconds % 60).padStart(2, 0);
	return String(hours).padStart(2, 0)+":"+minutes+String(seconds % 60).padStart(2, 0);
}
</script>

https://codepen.io/EmNudge/embed/rRbLJQ?default-tab=js%2Cresult&theme-id=light

const audio = new Audio(url);

오디오 파일 경로를 넣어 파일에 대한 정보를 받아온다.
볼륨과 재생시간 등의 데이터를 받아올 수 있다.

주어진 데이터를 사용하여 재생바와 볼륨 조절 바를 만들었다.
모바일에서 사용할 경우는 볼륨 조절이 작동하지 않았다.