[js] 오디오 / 랜덤으로 재생하기

 

# EJS ( * 랜덤 음악만 구현한다면 꼭 ejs가 아니어도 됩니다. * )

 

 

<div class="audio-columns">
        <audio id="audio" class="audio-columns__audio">
        	<!--       audio의 src 역할         -->
            <source id="audioSource" class="audio-columns__audio-source" src="" />
        </audio>
        	<!--        audio의 list 노출        -->
        <div id="audioList" class="audio-columns__audio-list"></div>
        <div id="audioBtn" class="audio-columns__audio-btn">
               <!--       audio의 play & stop 버튼       -->
            <i id="play" class="fas fa-volume-up fa-2x audio-columns__music--play"></i>
            <i id="stop" class="fas fa-volume-mute fa-2x audio-columns__music--stop"></i>
        </div>
    </div>

 

 

# JS

 

const musicPlay = document.querySelector('.audio-columns__music--play');
const musicStop = document.querySelector('.audio-columns__music--stop');
const audio = document.querySelector('.audio-columns__audio');
const audioList = document.querySelector('.audio-columns__audio-list');

var musicList = ["1.mp3", "2.mp3", "3.mp3"];
var musicTitleList = ["bensound-thejazzpiano.mp3", "bensound-hipjazz.mp3", "bensound-acousticbreeze.mp3"];

const audioCount = musicList.length;

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

function musicPlayEvent() {    
    audio.load();
    playAudio();
};

function musicPlayRandom() {
    const audioSrc = document.querySelector('#audioSource');
      // audio.length 만큼 랜덤
    const random = Math.floor(Math.random() * audioCount);
    
      // 경로를 js 파일 위치 기준에서 접근해야한다.
    audioSrc.src=`../views/music/${musicList[random]}`; 
    audioList.innerHTML= `<span class="audio-columns__audio-list__music-title"> ${musicTitleList[random]} 재생중.. </span>`;    
    musicPlayEvent();
}

function musicStopEvent() {
    audio.pause();
    audioList.innerHTML = '';
}

musicPlay.addEventListener("click", musicPlayRandom);
musicStop.addEventListener("click", musicStopEvent);

 

다른 분들께선 어떤 방식으로 하는지 궁금해서 구글링 했었는데. 음, 간결한 코드를 보니 직접 해보려 해도 계속 떠오르는건 어쩔수없는 건가 봅니다.. 다음부터는 직접 해본 다음에 구글링 해서 비교해야겠다는 깨달음을 얻은 구글링 시도였습니다.

 

1. play, stop 버튼, audio list, audio를 가져옵니다.

 

2. mp3 파일들의 이름은 1.mp3, 2.mp3, 3.mp3 식으로 지정합니다. 그리고 노출할 mp3 제목도 순서에 맞게 작성합니다. 

   + mp3 수만큼 랜덤 값 내도록 .length해서 변수에 넣습니다.

 

3. play, stop 버튼의 addEventListener을 만듭니다.

 

4. play 버튼 클릭 시 실행되는 musicPlayRandom 함수는 랜덤 값을 넣을 src를 가져옵니다.

 

Math.floor(Math.random() * audioCount); ___  mp3배열. length 만큼 random 하라는 뜻입니다. Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이고(출처- MDN) Number만 지원합니다.

 

floor(), random()하려면 Math를 사용해야합니다. 그렇게 배열만큼 random 한 수를 floor(5.05라면 5 반환)한 결괏값을 변수에 넣습니다.

 

+

그리고 audioSource 태그의 src에 해당 랜덤 결괏값을 적용시켜서 넣습니다. 그렇게 하면 source의 src에 '../views/music/musicList[3]'  >  '/..views/music/3.mp3' 가 들어갑니다.

 

제목도 이 방식과 같습니다. random 결괏값을 <span>으로 감싸고 mp3의 제목을 노출할 태그에 innerText합니다.

 

마지막으로 audio를 load 하는 함수를 실행합니다.

 

5. musicPlayEvent 함수는 load 하고 play를 담당하는 함수를 실행합니다.

 

6. play를 담당하는 playAudio에서 audio.volume는 audio의 볼륨을, audio.loop()는 연속 재생할지 안 할지의 여부이며 audio.play()는 말 그대로 오디오를 재생합니다.

 

7. stop 버튼을 누르면 musicStopEvent 함수가 실행되는데, audio.pause()를 재생시키고 audio list에 노출되던 mp3 제목을 지웁니다.

 

 

이렇게 하면 클릭할 때마다 다른 음악이 재생됩니다.(랜덤이라서 같은 음악이 또 재생될 수도..)

 

완성!