[javascript] 자바스크립트 audio 사용방법

참고: https://www.developerdrive.com/manipulating-html5s-native-audio-with-javascript/

타사 플러그인을 사용하지 않고 음원을 재생하려면 HTML5의 기본 오디오 요소를 사용하면 됩니다. Chrome 10+ 및 Firefox 3.6+와 같은 최신 웹 브라우저에는 이미 <audio> 요소와 이를 조작할 메소드, 속성이 라이브러리 형태로 내장되어 있습니다. 여기서는 몇 가지 사용법을 알아보고  javascript를 사용하여 오디오 파일을 실행하는 방법을 알아보겠습니다.

AUDIO METHOD

.load()

재생을 위해 오디오 요소를 로드하거나 리로드합니다.

audioElement.load();

.play()

오디오 파일의 재생을 시작합니다.

audioElement.play();

.pause()

오디오 파일의 재생을 일시 중지합니다.

audioElement.pause();

.canPlayType(type)

브라우저가 지원하는 오디오 형식인지 확인합니다.

audioElement.canPlayType('qudio/ogg; codecs="vorbis"');

AUDIO PROPERTIES

.currentTime

오디오 파일의 재생 위치를 설정하거나 반환합니다. 값은 초 단위입니다.

audioElement.currentTime = seconds;

.duration

오디오 파일의 길이를 초 단위로 반환합니다.

var seconds = audioElement.duration;

.src

오디오 파일이 있는 URL입니다.

audioElement.src = 'audio.ogg';

.volume

오디오 파일의 볼륨을 설정하거나 반환합니다.

audioElement.volume = value;

반응형

코드작성

자바스크립트 코드를 작성하여 즉석으로 오디오 요소를 만들고 이러한 요소와 상호 작용하는 사용자 인터페이스를 만들 수 있습니다.

<script type="text/javascript" language="javascript">
	var audioElement = document.createElement('audio');
	audioElement.setAttribute('src', 'audio.ogg');

	function playAudio() {
		audioElement.load();
		audioElement.play();
	}

	function pauseAudio() {
		audioElement.pause();
	}
</script>

위의 자바스크립트를 한 줄씩 확인해 보겠습니다.

var audioElement = document.createElement('audio');

이 코드에서 페이지가 로드될 때 가장 먼저 하는 일은 <audio> 요소를 생성하고 이를 audioElement 변수에 할당하는 것 입니다. 이 객체를 변수에 할당하면 페이지 세션 동안 객체를 참조하고 조작할 수 있습니다.

audioElement.setAttribute('src', 'audio.ogg');

다음으로 'src' 속성에 오디오 파일의 위치를 알려줍니다.

playAudio() 함수는 오디오 파일을 로드한 다음 재생합니다. 먼저 .load() 메소드가 호출되고 오디오 로드가 완료되면 .play() 메소드가 호출되어 재생을 시작합니다. 간단하게 작성된 pauseAudio() 함수는 재생을 일시 중지합니다. 이후에 playAudio() 함수가 다시 호출되면 오디오 파일이 다시 로드되고 처음부터 파일 재생이 시작됩니다.