[JavsScript] 자바스크립트 버튼 클릭시 오디오(audio) 재생, 켜고 끄기,넘기기

📖 들어가며

안녕하세요. 오늘은 자바스크립트에서 버튼 클릭으로 오디오를 제어하는 방법에 대해서 정리하려고 합니다.

버튼 클릭으로 음악을 켜고 끄고, 다음 음악으로 넘기는 여러 음악을 제어하는 기능을 구현하면서 HTML에는 audio태그를 사용하지 않고, 오직 자바스크립트에서만 audio 제어를 했다가 막혔지만, 결국 잘 해결을 해서 따로 정리하게 됩니다.

아주 간단한 예를 들어서,

const audio = new Audio('audio_file.mp3');
audio.play();

HTML에 따로 오디오 태그를 작성하지 않고 이런 식으로 audio 코딩을 해서 로컬에서 잘 작동하는 것을 확인하고,

깃허브 퍼블리싱을 하여 사이트로 배포하니깐 아래와 같은 오류로 오디오 재생이 작동하지 않는 것을 확인했습니다.

Uncaugth (in promise) DOMException: Failed to load because no supported source was found.

그래서 구글링을 통해 알아본 결과

stackoverflow.com/questions/10792163/change-audio-src-with-javascript

change

I have multiple audio files that I want to stream based on the user selects. How do I do that? This is what I have so far and it doesn't seem to work. *UPDATE: Made a few changes and now its clai...

stackoverflow.com

위의 링크에 나와있는 해결책을 응용해서 HTML에 <audio> 태그를 작성하고 <audio> 태그 안에 <source > 태그를 작성하여 <source> 태그의 src 속성을 자바스크립트에서 변경해 주는 방식으로 쉽게 해결할 수 있었습니다.

그럼 이제 버튼을 클릭으로 audio를 켜고 끄고, 다음 audio로 넘기는 방법까지 간단한 예제를 통해 알아보도록 하겠습니다.

1. 파일 구성

먼저 파일 구성은 아래와 같이 구성하였습니다.

2. HTML

HTML 구성입니다.

<html>
<head>
  <title>audio play example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

  <audio id="audioContainer"> <!-- audio play를 위함 -->
        <source id="audioSource" src="" /> <!-- audio 파일 -->
        Your browser does not support the audio format.
      </audio>
      
      <div class="js-onOffWrap">
        <button class="js-playBtn">♬ Play Music</button>
        <button class="js-stopBtn">♬ Stop Music</button>
      </div>      
       <div class="js-audioNextBtn">⏯</div>
       
<script src="script.js"></script>
</body>
</html>

자바스크립트에서 audio play를 위한 <audio> 태그를 작성하고 <audio> 태그 안에 <source> 태그를 작성함으로써 자바스크립트에서 <source> 태그의 src 속성을 변경해줌으로 audio를 변경할 수 있게 되었습니다.

그 외에는 audio 재생과, 정지, 다음 audio로 넘기는 버튼들입니다.

3. JavaScript

먼저 자바스크립트의 전체적인 코드입니다.

부분 부분 코드를 해석해 가면서 정리해보겠습니다.

const audioContainer = document.querySelector('#audioContainer');
const playBtn = document.querySelector('.js-playBtn');
const stopBtn = document.querySelector('.js-stopBtn')
const audioNextBtn = document.querySelector('.js-audioNextBtn');

const MUSIC_COUNT = 3; // 음악 갯수

let currentAudio = 1; // 현재 음악


function playAudio() {
  audioContainer.volume = 0.2;
  audioContainer.loop = true;
  audioContainer.play();  
}

function stopAudio() {
  audioContainer.pause();  
}


function loadAudio() {
  const source = document.querySelector('#audioSource');
  source.src = `audio/${currentAudio}.mp3`;
  audioContainer.load();
  playAudio();
}

function handleNextButtonClick() { 

  if (currentAudio < MUSIC_COUNT) {
    currentAudio += 1;
  } else {
    currentAudio = 1;
  }
  
  audioContainer.pause();
  loadAudio();
}



playBtn.addEventListener('click', loadAudio);
stopBtn.addEventListener('click', stopAudio);
audioNextBtn.addEventListener('click', handleNextButtonClick);

3.1 DOM

그럼 먼저 DOM 부분부터 간단하게 짚고 가겠습니다.

const audioContainer = document.querySelector('#audioContainer'); //HTML에서 <audio> 태그 
const playBtn = document.querySelector('.js-playBtn'); // play 버튼
const stopBtn = document.querySelector('.js-stopBtn') // stop 버튼
const audioNextBtn = document.querySelector('.js-audioNextBtn'); // next 버튼

3.2 Button Event

각각의 버튼을 click 하면 작동하게 해야하기 때문에 각각의 버튼들에 click 이벤트를 주었습니다.

playBtn.addEventListener('click', loadAudio);
audioNextBtn.addEventListener('click', handleNextButtonClick);
stopBtn.addEventListener('click', stopAudio);

3.3 function loadAudio()

다음으로 먼저 playBtn click 시 호출하는 loadAudio 함수에 대해서 살펴보겠습니다.

function loadAudio() {
  const source = document.querySelector('#audioSource');
  source.src = `audio/${currentAudio}.mp3`;
  audioContainer.load();
  playAudio();
}

HTML에서 <audio> 태그 안에 있는 <source> 태그를 DOM 요소 const source로 잡아주고 source의 src 경로를 `` 백 틱 태그를 이용해서 audio파일 안에 있는 ${currentAudio}는 위에서 1로 초기 값을 주어서 audio폴더 안의 1.mp3 파일이 src경로에 담기게 됩니다.

그러고 나서 HTML의 <audio> 태그를 DOM 요소로 잡은 audioContainer를 load() 해서 불러오게 됩니다.

load 하고 나면 이제 load 한 audio를 실행시키는 playAudio() 함수를 호출하게 됩니다.

3.4 function playAudio()

function playAudio() {
  audioContainer.volume = 0.2;
  audioContainer.loop = true;
  audioContainer.play();  
}

.volume은 audio의 볼륨 크기를 설정합니다 볼륨 크기는 0 ~ 1까지 설정할 수 있습니다.

.loop 은 이 audio를 반복 재생할 건지 설정합니다. true = 반복 재생, false = 반복 재생하지 않음

그리고 .play()를 해주게 되면 audio, 음악이 잘 나오는 것을 확인할 수 있습니다.

audio의 더 많은 여러 속성은 MDN에서 확인해 보실 수 있습니다.

developer.mozilla.org/ko/docs/Web/HTML/Element/audio#%ED%8A%B9%EC%84%B1

HTML 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다. src 특성 또는 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니

developer.mozilla.org

3.5 function handleNextButtonClick()

이 함수는 audioNextBtn click 이벤트 발생 시 다음 음악으로 넘기는 기능을 하는 함수입니다.

function handleNextButtonClick() { 

  if (currentAudio < MUSIC_COUNT) {
    currentAudio += 1;
  } else {
    currentAudio = 1;
  }
  
  audioContainer.pause();
  loadAudio();
}

먼저 함수 내에서는 조건문을 통해서 함수가 실행되면 현재 audio 순서가 전체 audio 개수보다 적으면 전역 변수로 작성한 currentAudio +1을 해주고 아니면 1로 바꿔주면서 처음 audio로 되돌아가게끔 작성하고,

현재 재생되고 있는 audio를 정지시키고 loadAudio 함수를 실행되도록 했습니다.

그러면 처음 next 버튼을 클릭했다는 가정하에 currentAudio는 2가 될 것이고,

loadAudio 함수에서는 위에서 설명했듯이 curruntAudio 변수를 활용해서 2.mp3를 불러오게 되는 것입니다.

3.6 function stopAudio()

stopBtn에 click 이벤트 발생 시 audio를 중단시키는 함수입니다.

function stopAudio() {
  audioContainer.pause();  
}

한 줄 밖에 되지 않지만 어떤 기능을 하는지 보기 좋게 하기 위해서 함수로 작성한 것입니다.

.pause() 를 사용하게 되면 play 하고 있던 audio를 중지하게 됩니다.

📕 마무리

전체적인 코드를 Repl 사이트에 올려놓겠습니다.

코드 예제 링크

audio play example-1

audio play example

repl.it

코드를 실행하시려면 가운데 상단 쪽에 Run 버튼을 클릭하시면 됩니다.

이렇게 HTML에서 <audio> 태그와 <source> 태그를 이용해서 자바스크립트에서 작성하니깐 버튼 클릭으로 audio 음악을 재생하고, 정지하고, 넘기는 기능 구현이 로컬과 깃 허브 퍼블리싱 이후에도 audio가 잘 작동하는 것을 확인했습니다!

직접 코드를 살펴보시고 실행도 해보면서 응용도 하시고 조금이나마 도움이 되었으면 좋겠습니다.

저작자표시 비영리 변경금지