createElement, setAttribute.append를 활용하여 오디오 넣기(9)

#createelement #setattribute

웹사이트 디자인 소개 및 학습목표

​

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

1. Js 를 활용하여 패널에 오디오를 넣자. (createElemet, setAttribute 활용)
2. 재생버튼 클릭시 오디오가 재생되도록 만든다.

사용하는 언어

Js

• audio 요소 (Element)를 추가한다.
• audio 요소에 필요한 속성을 추가한다

JS

1.createElement

createElement는 html 요소(element)를 추가하는 문법이다. 원래 HTML에 audio태그를 넣어 오디오를 추가해도 되지만, 자바 createElement를 활용해 추가해보겠다.

                                    names.forEach((name,index)=>{
  ---

  const audio = document.createElement('audio');

})

DOM에 "audio" 요소를 추가했다. 이제 속성값을 추가해 보자.

​

2.setAttribute

setAttribute를 넣을때는 "속성명","속성값"을 넣어주면 된다. 음악파일을 넣고싶다면 "src","파일경로" 순으로 넣어주면된다.

                                    names.forEach(()=>{
  ---

  const audio = document.createElement('audio');
  audio.setAttribute('src',`music/${names[index]}.mp3`);
  audio.setAttribute('loop','loop');
})

audio요소안에 속성 값으로 src(파일경로), loop(반복)을 추가했다.

​

3.Append

이제 audio를 준비했으니, 원하는 곳에 배치해보자. 음악 패널(list)안에 넣을 것이다. 이때 append를 사용한다.

                                    const list = frame.quertSelector("article")//편의상 음악패널로 기억
names.forEach(()=>{
  ---

  const audio = document.createElement('audio');
  audio.setAttribute('src',`music/${names[index]}.mp3`);
  audio.setAttribute('loop','loop');
  list[index].append('audio');
})

​

• article(=list)안에 audio 요소(element)가 들어간 것을 확인할 수 있다.
• 각 article에 names배열 이름 순서에 맞는 음악들이 들어가있다.

아이콘 활성화 하기

패널안에 들어있는 세가지 아이콘을 누를 때 음악이 재생,정지,초기화 되도록 설정하겠다.

                                    for(let el of list){
  const play= el.querySelector('.play');
  const paues= el.querySelector('.pause');
  const load= el.querySelector('.load');

  play.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('audio').play;
  })

    pause.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('audio').pause;
  })

    load.addEventListener('click', e=>{
    e.currentTarget.closest('article').querySelector('audio').load;
  })
}

• .list는 article의 배열이기 때문에 for of를 사용하여 반복문 처리해준다
• play,pause,load를 모두 찾아준다. (list내부에서 찾기)

• addEventListener를 활용해 클릭시 이벤트를 발생시키도록 하자
• e.currentTarget.closest("article") // Event가 발생되는 가장 가까운 article요소
• quertSelector('audio').play() //audio를 찾아서 재생 시켜라
• 이 방법과 동일하게 pause, load를 입력해주면 된다.

​

학습결과

짚어갈 포인트

• createElement: html 요소를 하나 만드는 것
• setAttrubute : 요소에 속성을 추가하는 것 // "속성 종류" , "속성 값"
• append : 자식 요소를 하나 추가할 수 있는 것 (좀 더 정확한 이해가 필요하다)
• e.currentTarget.closest.querySelector 잘 살펴보기

​

​