오디오를 복제하여 사용하기

오디오를 복제하여 사용하는 방법을 안내합니다.

오디오를 복제하여 사용하면 동일한 오디오를 실행시키더라도 끊기지 않고 개별적으로 실행할 수 있습니다.

오디오 오브젝트는 .clone()을 사용할 수 없기 때문에 별도의 방법을 사용해주어야 합니다.
다음과 같은 오디오 오브젝트가 있다면

오디오 오브젝트

다음과 같이 오디오 오브젝트를 복제할 수 있습니다.

const audio = WORLD.getObject('effect_7').getAudio();
 
function playAudioClone() {
    const audioClone = new THREE.Audio(audio.listener);
    audioClone.setBuffer(audio.buffer);
    audioClone.play();
}
 
function OnKeyDown(event) {
    if(event.code === 'KeyP') playAudioClone();
}

💡

오디오 오브젝트는 간단하게 본다면 오디오 리스너(AudioListener)와 오디오 버퍼(AudioBuffer)로 이루어져 있습니다. 오디오 리스너는 오디오를 듣고, 방향성을 제어하는데 사용됩니다.
오디오 버퍼는 메모리 상에 로드된 사운드 파일을 담고 있습니다.

추가로 새로운 오디오 오브젝트를 계속 생성하는 것은 성능에 영향을 미치기 때문에, 오브젝트 풀 패턴을 사용하면 좋습니다.
오디오 오브젝트는 플레이 시간이 개별적이기 때문에 .onEnded()를 통해 다시 풀로 돌아갈 수 있게 해줍니다.

class AudioPool {
    #originAudio;
    audios = [];
 
    // getAudio()
    constructor(audio, poolSize) {
        this.#originAudio = audio;
        for(let i = 0; i < poolSize; i++) {
            this.audios.push(this.create());
        }
    }
    
    create() {
        const audio = new THREE.Audio(this.#originAudio.listener);
        audio.setBuffer(this.#originAudio.buffer);
        audio.onEnded = () => {
            this.push(audio);
        };
        return audio;
    }
    pop() {
        let audio = null;
        if(this.audios.length) {
            audio = this.audios.shift();
        } else {
            audio = this.create();
        }
        return audio;
    }
    push(audio) {
        if(audio === null) return;
        audio.stop();
        this.audios.push(audio);
    }
}
const audio = WORLD.getObject('effect_7').getAudio();
const audioPool = new AudioPool(audio, 10);
 
function playFromAudioPool() {
		audioPool.pop().play();
}
function OnKeyDown(event) {
		if(event.code === 'KeyP') playFromAudioPool();
}

오브젝트 복제 시작 버튼