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

HTML5 오디오를 랜덤으로 재생하기

HTML5의 오디오 기능을 활용하면 여러 개의 음악 파일 중 하나를 무작위로 선택해 재생할 수 있습니다. 이는 자바스크립트의 Math.random() 메서드를 사용하면 간단하게 구현됩니다.

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

먼저 무작위로 재생하고 싶은 곡들의 URL을 배열 형태로 추가합니다.

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

2단계: Math.random()으로 무작위 재생 함수 작성

다음 코드를 사용하면 목록에 있는 곡 중 하나가 랜덤하게 선택되어 재생됩니다.

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

코드 설명

Math.random()은 0 이상 1 미만의 난수를 반환합니다. 여기에 배열의 길이(collection.length)를 곱한 후 Math.floor()로 소수점을 제거하면, 0부터 배열 길이보다 1 작은 값까지의 정수 인덱스가 생성됩니다. 이 인덱스를 이용해 배열에서 임의의 곡을 선택하고 play() 메서드로 재생합니다.

마지막 줄의 setTimeout(loop, audio.duration * 1000)은 현재 곡의 재생 시간(duration)에 1000을 곱해 밀리초 단위로 변환한 뒤, 해당 시간이 지나면 loop 함수를 다시 호출하여 다음 곡을 무작위로 재생하도록 합니다.