작성 규칙

1. 🟠 작성 상태
   ✅ 작성한 날짜를 기록함으로써 리마인드
   ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
   ✅ 작성 상태를 기술함으로써 수정된 이력 버전과 완성여부를 확인
2. 🖋 기능 설명
   ✅ 레퍼런스 링크
   ✅ 사용된 기술에 대해 스스로 설명
3. 🔨 프로젝트 적용
   ✅ 기획내용 작성, 작성한 계기를 기술
   ✅ 프로젝트에 사용한 코드를 한 줄씩 리뷰하는 것으로 코드 전체 이해 증명
   ✅ 코드를 설계한 내용과 왜 이렇게 작성했는지
   ✅ 완성 코드를 코드펜으로 보여주기

🟠 작성 상태

---

🟠 작성 날짜 : 0422, 2022

🟠 적용 프로젝트 : Team Oldboy - Team Intro Web

🟠 작성 상태 : 수정됨 (0423, 2022)

🖋 기능 설명

---

🖋 레퍼런스 링크

🖋 기능에 대해 설명

▶ audio-source html 태그

• 웹에서 오디오를 사용하기 위해서 audio 태그가 필요함
• 또, 오디오 하위 태그로 source 태그에 음악을 넣어야함

▶ audio 재생, 반복재생 javascript

• loop 속성 사용 시, 음악을 반복재생한다
• play()를 이용해 음악을 재생함

🔨 프로젝트 적용

---

🔨 프로젝트 기획, 작성 계기

• 게임테마 팀 소개페이지를 만드는 도중, 게임과 같은 느낌을 주기 위한 배경음악 삽입을 기획.

🔨 코드 리뷰

👁‍🗨 ver.1.0

<audio id="audioContainer">
  <source id="audioSource" src="https://docs.google.com/uc?export=open&id=1Os_y9vbuije9XHp2jl5EaR7iu2It_cY7"type='audio/mp3'/>   
</audio>
<button onclick="music()">MUSIC</button>

1. audio source 를 담을 audio tag
2. audio file을 넣는 source tag
3. audio 주소
4. 오디오를 재생할 버튼 태그와 onclick 함수 넣기

function music() {
  const audioContainer = document.querySelector('#audioContainer');
  audioContainer.loop = true
  audioContainer.play()
  }

1. 오디오 재생 함수 선언
2. 오디오 컨테이너의 값을 querySelector로 가져오기
3. 음악 반복 재생 여부. true 일 경우 반복 재생함
4. 음악 재생 명령

🔨 완성 코드(CodePen)