JavaScript에서 오디오 파일 재생

1. .play()를 사용하여 JavaScript에서 오디오 파일 재생
2. 웹 오디오 API를 사용하여 오디오 파일 재생
3. howler.js라이브러리를 사용하여 JavaScript에서 오디오 파일 재생

이 기사에서는 JavaScript에서 오디오 파일을 재생하는 방법을 배웁니다.

<audio>태그를 사용하여 간단하게 페이지에 오디오 파일을 추가 할 수 있습니다. JavaScript를 전혀 사용하지 않고 오디오 파일을 재생하는 가장 쉬운 방법입니다. <audio>태그의src속성은 오디오 파일의 주소를 지정합니다. 또한control,autoplay및loop와 같은 다른 유용한 속성도 있습니다. 그러나 게임에서, 클릭 할 때 또는 다른 이벤트에서와 같이 자동으로 제어하고 소리를 자동으로 재생하려는 경우가 있습니다. 이러한 상황에서 우리는 JavaScript가 논리에 따라 파일을 제어하고 재생하기를 원합니다.

.play()를 사용하여 JavaScript에서 오디오 파일 재생

오디오 객체 인스턴스를 생성하기 만하면, 즉new Audio()를 사용하여 JavaScript에서 오디오 파일을로드 할 수 있습니다. 오디오 파일이로드 된 후.play()함수를 사용하여 재생할 수 있습니다.

const music = new Audio('adf.wav');
music.play();
music.loop = true;
music.playbackRate = 2;
music.pause();
qqazszdgfbgtyj

위의 코드에서 우리는 오디오 파일을로드 한 다음 간단히 재생합니다. JavaScript는 우리에게 많은 유연성과 많은 기능을 제공합니다. 재생 속도를 제어하고, 오디오를 반복하고, 일시 중지하고, 사운드를 재생할 수 있습니다. 유일한 문제는 한 번에 여러 사운드를 처리하고 최신 정교함에 비해 제어가 다소 제한적입니다.

웹 오디오 API를 사용하여 오디오 파일 재생

설정하기가 약간 번거롭지 만 Web Audio API는 사운드에 대한 많은 유연성과 제어 기능을 제공합니다. 일반적인 HTML5 오디오에서 크게 발전한 것으로 복잡한 오디오 조작이 가능합니다. HTML5 오디오를 사용하여 오디오 컨텍스트라는 방향성 그래프와 같은 구조의 노드로 오디오 요소를 나타냅니다. 오디오 소스와 대상 사이에 연결된 볼륨 노드와 같은 여러 유형의 노드가있을 수 있으며 볼륨을 조작하는 데 도움이됩니다.

<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();

여기에서 먼저 오디오 컨텍스트를 초기화하고 오디오 파일의 소스에 대한 참조를 가져옵니다. 그런 다음 해당 소스를 글로벌 대상에 연결하면 오디오 설정이 완료됩니다.

howler.js라이브러리를 사용하여 JavaScript에서 오디오 파일 재생

‘howler.js’는 오디오 조작 라이브러리입니다. 이를 통해 Web Audio API의 힘과 HTML 5 Audio의 단순성을 활용할 수 있습니다. 특히 여러 오디오 소스를 재생하는 동안 브라우저 기반 오디오를 처리하기 위해 react 클래스 구성 요소와 함께 널리 사용됩니다. howler 개체를 사용하여 전역 오디오 컨텍스트를 제어 할 수있게 한 다음 Howl을 사용하여 오디오 또는 오디오 그룹을 제어합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
      volume: 1.0,
      onend: function () {
        alert('We finished with the setup!');
      }
    });
    sound.play()
</script>

Internet Explorer를 제외한 모든 주요 브라우저는 이러한 모든 방법을 지원합니다. Internet Explorer는 Web Audio API 및howler.js를 지원하지 않습니다.