HTML5 오디오를 무작위(랜덤)로 재생하는 방법

HTML5 오디오 API를 활용하면 여러 개의 음악 파일을 하나의 컬렉션에 담아두고, Math.random() 함수를 이용해 무작위(랜덤)로 곡을 재생할 수 있습니다. 이번 글에서는 그 구현 과정을 단계별로 살펴보겠습니다.

1단계: 재생할 곡 목록 초기화

먼저 재생하고 싶은 오디오 파일들의 URL을 배열 형태로 초기화 함수에 전달합니다.

init ([
    'https://demo.com/songs/song1.mp3',
    'https://demo.com/songs/song2.mp3',
    'https://demo.com/songs/song3.mp3'
]);

이렇게 하면 각 곡의 정보가 collection이라는 배열에 저장되어, 이후 무작위 재생 시 참조할 수 있습니다.

2단계: Math.random()으로 무작위 재생 구현하기

다음으로 Math.random() 함수를 사용하여 배열에서 임의의 곡을 선택하고 재생하는 함수를 작성합니다.

function displayRandom() {
    var audio = Math.floor(Math.random() * (collection.length));
    audio = collection[audio];
    audio.play();
    setTimeout(loop, audio.duration * 1000);
}

코드 동작 원리

Math.floor(Math.random() * (collection.length))는 배열의 인덱스 범위 내에서 0 이상의 정수를 무작위로 생성합니다. 생성된 인덱스로 컬렉션에서 해당 오디오 객체를 가져온 뒤 play() 메서드를 호출하면 곡이 재생됩니다.

마지막 줄의 setTimeout(loop, audio.duration * 1000)은 현재 곡의 재생 시간(duration, 초 단위)을 밀리초로 변환한 값만큼 대기한 후 다시 무작위 재생 루프를 실행하도록 합니다. 이를 통해 한 곡이 끝나면 자동으로 다음 곡이 무작위로 이어지게 됩니다.

정리

이처럼 HTML5 오디오와 JavaScript의 난수 생성 기능만으로도 별도의 외부 라이브러리 없이 간단하게 랜덤 음악 플레이어를 만들 수 있습니다. 곡 목록에 더 많은 파일을 추가하거나, UI 버튼과 연동해 사용자가 직접 랜덤 재생을 제어하도록 확장할 수도 있습니다.