잡담
와 많이 늦었습니다. 여러 가지 배우는 걸 복습하다 보니 블로그 작성하는 시간이 부족하네요.. 이것도 사실 다 핑계겠죠. 각설하고 바로 들어가 보도록 하겠습니다.
1. Audio
JavaScript에서 DOM 객체를 사용하여 오디오를 조작하려면 <audio> 요소를 사용합니다. 이를 통해 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있습니다. 아래는 기본적인 사용법입니다:
<audio id="myAudio" src="audiofile.mp3"></audio>
위와 같이 HTML에서 <audio> 요소를 만들고, JavaScript에서는 DOM을 사용하여 이 요소에 액세스 할 수 있습니다.
// 오디오 요소 가져오기
var audio = document.getElementById("myAudio");
// 재생
function playAudio() {
audio.play();
}
// 일시 정지
function pauseAudio() {
audio.pause();
}
// 볼륨 설정 (0.0 - 1.0)
function setVolume(volume) {
audio.volume = volume;
}
// 현재 재생 시간 가져오기
function getCurrentTime() {
console.log(audio.currentTime);
}
// 현재 재생 시간 설정하기
function setCurrentTime(time) {
audio.currentTime = time;
}위의 코드를 사용하여 JavaScript로 오디오를 제어할 수 있습니다. 이 외에도 <audio> 요소는 다양한 이벤트를 감지할 수 있어서, 재생이 시작될 때, 멈출 때 등의 이벤트를 처리할 수도 있습니다.
Audio 기본 예제
여기에 간단한 HTML과 JavaScript 코드가 있습니다. 이 코드는 "Play" 버튼을 클릭하면 오디오가 재생되고, "Pause" 버튼을 클릭하면 일시 정지됩니다. "Stop" 버튼을 클릭하면 오디오를 중지시킵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
</head>
<body>
<audio id="myAudio" src="audiofile.mp3"></audio>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
function pauseAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
}
function stopAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
audio.currentTime = 0;
}
</script>
</body>
</html>이 코드는 간단합니다. HTML에서 오디오 파일을 포함하는 <audio> 요소를 생성하고, 버튼을 클릭할 때 실행될 JavaScript 함수를 정의합니다. "Play" 버튼을 클릭하면 playAudio() 함수가 호출되어 오디오가 재생되고, "Pause" 버튼을 클릭하면 pauseAudio() 함수가 호출되어 오디오가 일시 정지됩니다.
2.DOM 요소 동적 생성 제거
DOM 요소를 동적으로 생성하고 제거하는 것은 JavaScript에서 매우 일반적인 작업입니다. 이를 통해 사용자 상호 작용에 따라 콘텐츠를 추가하거나 제거할 수 있습니다. 아래에 간단한 예제를 제공하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap{
width:200px;
height:auto;
background-color: aqua;
}
.box{
width:100px;
height:100px;
margin:10px;
background-color: aquamarine;
}
</style>
<script>
var i=0;
function myFunc(){
// 새로운 <div> 요소를 생성합니다.
var box=document.createElement('div');
// 새로운 <div> 요소에 class 속성을 추가하여 스타일을 적용합니다.
box.setAttribute('class','box');
// 입력된 텍스트 값을 가져와서 <div> 요소의 텍스트로 설정합니다.
var myInput=document.getElementById('my-input');
box.innerText=myInput.value;
// 생성된 <div> 요소를 포함할 부모 요소를 가져옵니다.
var wrap=document.getElementById('wrap');
// 부모 요소에 새로운 <div> 요소를 추가합니다.
wrap.appendChild(box);
}
</script>
</head>
<body>
<!-- 사용자 입력을 받기 위한 텍스트 입력 상자 -->
<input type="text" id="my-input">
<!-- 버튼을 클릭하면 myFunc 함수가 호출되도록 합니다. -->
<button onclick="myFunc()">클릭</button>
<!-- 동적으로 추가될 <div> 요소들을 감싸는 부모 요소 -->
<div id="wrap">
</div>
</body>
</html>See the Pen 동적생성 by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 사용자가 입력한 텍스트를 받아서 버튼을 클릭하면 해당 텍스트를 가진 <div> 요소를 동적으로 생성하고 부모 요소에 추가하는 예제입니다. 또한 "마지막 제거" 버튼을 클릭하면 마지막으로 추가된 <div> 요소를 제거하고, "특정 제거" 버튼을 클릭하면 사용자가 입력한 인덱스에 해당하는 <div> 요소를 제거합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 스타일 시트 */
#wrap{
width:200px;
height:auto;
background-color: aqua;
}
.box{
width:100px;
height:100px;
margin:10px;
background-color: aquamarine;
}
</style>
<script>
// 새로운 <div> 요소를 생성하고 추가하는 함수
function createDiv(){
var box=document.createElement('div');
box.setAttribute('class','box'); // 생성된 <div> 요소에 class 속성을 추가하여 스타일을 적용합니다.
var myInput=document.getElementById('my-input');
box.innerText=myInput.value; // 입력된 텍스트 값을 가져와서 <div> 요소의 텍스트로 설정합니다.
var wrap=document.getElementById('wrap'); // 생성된 <div> 요소를 포함할 부모 요소를 가져옵니다.
wrap.appendChild(box); // 부모 요소에 새로운 <div> 요소를 추가합니다.
}
// 마지막으로 추가된 <div> 요소를 제거하는 함수
function removeLastDiv(){
var wrap=document.getElementById('wrap');
wrap.removeChild(wrap.lastChild); // 부모 요소에서 마지막으로 추가된 <div> 요소를 제거합니다.
}
// 특정 위치에 있는 <div> 요소를 제거하는 함수
function removeCertainDiv(){
var wrap=document.getElementById('wrap');
var childNum=document.getElementById('child-num').value; // 사용자가 입력한 요소의 인덱스 값을 가져옵니다.
var child=wrap.children[parseInt(childNum)-1]; // 부모 요소의 자식 요소 중에서 특정 인덱스 값을 가진 요소를 찾습니다.
wrap.removeChild(child); // 부모 요소에서 해당 요소를 제거합니다.
}
</script>
</head>
<body>
<!-- 사용자 입력을 받기 위한 텍스트 입력 상자 -->
<input type="text" id="my-input">
<!-- 버튼을 클릭하면 createDiv 함수가 호출되도록 합니다. -->
<button onclick="createDiv()">클릭</button>
<!-- 마지막으로 추가된 <div> 요소를 제거하는 버튼 -->
<button onclick="removeLastDiv()">마지막 제거</button><br>
<!-- 사용자 입력을 받기 위한 텍스트 입력 상자와 해당 위치에 있는 <div> 요소를 제거하는 버튼 -->
<input type="text" id="child-num">
<button onclick="removeCertainDiv()">특정 제거</button>
<!-- 동적으로 추가될 <div> 요소들을 감싸는 부모 요소 -->
<div id="wrap">
</div>
</body>
</html>See the Pen 동적제거 by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
오늘은 Audio와 동적생성 및 동적제거에 대해서 알아봤습니다. 앞에 배운내용들은 대부분 JQuery를 이용하면 코드를 간편하고 쉽게 사용할 수 있습니다. JQuery에 대한 내용들도 다룰 예정입니다. audio는 플레이리스트 만들 때 사용해 볼 수 있을 것 같습니다. 감사합니다.
'Java Script' 카테고리의 다른 글
| [Java Script] Modal(모달) 생성 (0) | 2024.06.23 |
|---|---|
| [Java Script] Event Bubbling(preventDefault, stopPropagation) (0) | 2024.05.28 |
| [Java Script] DOM / setAttribute, getAttribute (0) | 2024.04.01 |
| [Java Script] DOM / Input Control (0) | 2024.04.01 |
| [Java Script] DOM / 기본 메서드 (0) | 2024.04.01 |