자바스크립트 audio 불륨조절하기

자기소개페이지 "BGM", "MUTE" 부분 구현 방법을 풀어 써 보았다.
(해당페이지의 'section class = "intro" 부분이다)

<section class="intro">
	<header>
		<h1>김준호</h1>
		<audio id="player" src="shinetoday.mp3" ></audio> //'1. audio 생성'
		<div>  // '2. div로  audio 제어기 감싸기'
			<button onclick="document.getElementById('player').play()">bgm	</button>
			<button onclick="document.getElementById('player').pause()">mute</button><br>	
			<input type="range" id="volume-control" min="1" max="10">							
		</div> 
		<h2>Today, I am the best than yesterday</h2>
		<ul class="actions">
		    <li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
	    </ul>
	</header>
		<div class="content">
			<span class="image fill" data-position="center"><img src="images/pic01.jpg" alt="" /></span>
		</div>
</section>

1. audio를 생성한다.

<audio id="player" src="shinetoday.mp3" ></audio>

audio 생성시 속성으로'controls'을 넣으면 이렇게 제어기가 생긴다.

하지만 제작자인 저는 더 깔끔한 컨트롤을 원하기 때문에 controls 속성을 사용하지않았다.
그리고 후에 자바스크립트로 제어기를 구현하기위해 id = "player"를 지정하였다.

2. div로 제어기 감싸기

div로 공간을 나누고 이 부분에 audio 제어기를 버튼과 input을 사용하여 간단하게 꾸며 보았다.

<div>  
			<button onclick="document.getElementById('player').play()">bgm	</button>
			<button onclick="document.getElementById('player').pause()">mute</button><br>	
			<input type="range" id="volume-control" min="1" max="10">							
</div> 

3. button 태그에 자바스크립트로 paly, pause 구현

bgm 버튼에 button를 사용하여
클릭이벤트로 html의 id = player 인 부분의 play기능을 추가하였다.

mutem 버튼에 onclick="document.getElementById('player').pause()"를 사용하여
클릭이벤트로 html의 id = player 인 부분의 puase기능을 추가하였다.

4. input 태그 구현

input 태그는 range type을 사용하여 불륨을 조절할수있는 바를 만들었고, id를 지정하여 자바스크립트 함수를 선언하여 제어**하였다.

const audio = document.getElementById('player');
const audioVolume = document.getElementById('volume-control');

audioVolume.addEventListener("change", function(e) {
    audio.volume = this.value/10;
})

변수 audio를 선언하여 audio태그를 지정하고
변수 audioVolume을 선언하여 input태그부분을 지정하였다.

후 audioVolume(input)에 'change'이벤트를 추가하였다.
input의 range 부분을 min = 1 max = 10 을 지정했었는데, 이 부분에 변화가 생기면(=change)
this.value(range의 value)를 10으로 나누어 audio의 volume 속성에 0.1~1.0 값을 추가하여 불륨을 조절한다.

5. 결과물

마무리로 간단하게 CSS로 크기와 색깔만 바꿔
이렇게 BGM MUTE 그리고 볼륨 조절 바를 만들었다.