맨 처음 웹 개발 과정 공부했을때, 다짜고짜 java를 먼저 시작했던 때가 기억이 난다.
개발 공부를 시작한 지 4개월차가 되가는 지금, 여전히 모르는 것이 많지만
이젠 '이 태그를 왜 사용하고 있는지' , '이 작업을 하면, 아래 뭐가 있겠구나' 정도의 생각은 감히 할 수 있지 않나 뿌듯함이 든다.
공부해나가는 이 과정 속에서 나의 주변 상황들이 내 맘과는 달리
내 뜻을 따라주지 않고 흘러가고 있다지만, 이 어쩔수 없는 상황들 속에서
난 누구에게도 뒤쳐지지 않을 '열심히 살아가는 태도'를 여전히 잃지 않고, 노력해나갈 뿐이라는 생각이 든다.
'정진'이라는 말이 요즘 참 좋다☕
각설하고, 오늘 배운 내용 코드 분석 해야지~
먼저 상단부분 코드 👇
<!DOCTYPE html>
<html>
<head><title>오디오 제어 버튼 만들기</title></head>
<body>
<audio id="audio" src="재생할 mp3 파일이 있는 경로"></audio>
<div id="msg">오디오 제어 메시지 출력</div>
<button id="play" onclick="control(event)">재생</button>
<button id="pause" onclick="control(event)">중지</button>
<button id="replay" onclick="control(event)">리플레이</button>
<button id="vol-" onclick="control(event)">볼륨 다운</button>
<button id="vol+" onclick="control(event)">볼륨 업</button>
<button id="mute on/off" onclick="control(event)">음소거 on/off</button>
<script>
var div = document.getElementById("msg");
var audio = document.getElementById("audio");
function control(e) {
var id = e.target.id;
if(id == "play") {
audio.play();
div.innerHTML = "재생중";
}
else if(id == "pause") {
audio.pause();
div.innerHTML = "일시정지";
}
else if(id == "replay") {
audio.load(); // src에 지정된 미디어 다시 로딩
audio.play(); // 처음부터 다시 재생
div.innerHTML = audio.src + "를 처음부터 재생합니다.";
}
else if(id == "vol-") { // vol- 버튼 클릭
audio.volume -= 0.1; // 음량 0.1 감소
if(audio.volume < 0.1) audio.volume = 0;
div.innerHTML = "음량 0.1 감소." + "현재 " + audio.volume;
}
else if(id == "vol+") { // vol+ 버튼 클릭
audio.volume += 0.1; // 음량 0.1 증가
if(audio.volume > 0.9) audio.volume = 1.0;
div.innerHTML = "음량 0.1 증가." + "현재 " + audio.volume;
}
else if(id == "mute on/off") { // mute on/off 버튼 클릭
audio.muted = !audio.muted; // 음소거 토글
if(audio.muted) div.innerHTML = "음소거";
else div.innerHTML = "음소거 해제";
}
}
</script>
</body></html>
수업시간에 한 예제 통합👇
<!DOCTYPE html>
<html>
<head><title>자바스크립트로 오디오 제어</title></head>
<body>
<h3>자바스크립트로 오디오 제어</h3>
<hr>
<audio id="audio" src="media/EmbraceableYou.mp3"></audio>
<div id="msg">이곳에 오디오 제어 메시지 출력</div>
<button id="play" onclick="control(event)">play</button>
<button id="pause" onclick="control(event)">pause</button>
<button id="replay" onclick="control(event)">replay</button>
<button id="vol-" onclick="control(event)">vol-</button>
<button id="vol+" onclick="control(event)">vol+</button>
<button id="mute on/off" onclick="control(event)">mute on/off</button>
<script>
var div = document.getElementById("msg");
var audio = document.getElementById("audio");
function control(e) {
var id = e.target.id;
if(id == "play") { // play 버튼 클릭
audio.play(); // 재생
div.innerHTML = "재생중입니다.";
}
else if(id == "pause") { // pause 버튼 클릭
audio.pause(); // 일시 중지
div.innerHTML = "일시중지되었습니다.";
}
else if(id == "replay") { // replay 버튼 클릭
audio.load(); // src에 지정된 미디어 다시 로딩
audio.play(); // 처음부터 다시 재생
div.innerHTML = audio.src + "를 처음부터 재생합니다.";
}
else if(id == "vol-") { // vol- 버튼 클릭
audio.volume -= 0.1; // 음량 0.1 감소
if(audio.volume < 0.1) audio.volume = 0;
div.innerHTML = "음량 0.1 감소." + "현재 " + audio.volume;
}
else if(id == "vol+") { // vol+ 버튼 클릭
audio.volume += 0.1; // 음량 0.1 증가
if(audio.volume > 0.9) audio.volume = 1.0;
div.innerHTML = "음량 0.1 증가." + "현재 " + audio.volume;
}
else if(id == "mute on/off") { // mute on/off 버튼 클릭
audio.muted = !audio.muted; // 음소거 토글
if(audio.muted) div.innerHTML = "음소거";
else div.innerHTML = "음소거 해제";
}
}
</script>
</body></html>
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [JavaScript] onClick 시 나타났다 사라지기 / display:none 과 display:block 이용하기 (0) | 2022.09.02 |
|---|---|
| [코딩 용어] 갑자기 헷갈리기 시작한 Parameter 와 Argument 의 차이 정리 💭 (0) | 2022.08.30 |
| [canvas] canvas가 뭐야~? / canvas를 이용하여 사각형 그림 그리기 😊 (0) | 2022.08.28 |
| [JavaScript] 버튼 누르면 글자색 변하게 하기 / document. getElementById("id값"); 뜻이 뭐에요? (0) | 2022.08.27 |
| [이클립스] 이클립스 Project Explorer 좌측에 고정시키기 / 이클립스 작업창 구조 초기화시키기 (0) | 2022.08.26 |
댓글