[음악재생] 음악파일 조작/addEventListener()

[음악재생] 음악파일 조작/addEventListener()

HTML5에는 음악 파일을 재생할 수 있는 <audio> 태크가 추가되었습니다.
형식은 다음과 같습니다.

<audio
   src="재생할 파일"
   preload="자동으로 읽어 들일지 여부(auto/metadata/none)"
   autoplay="자동 재생 여부"
   loop="반복 여부"
   controls="플레이어 표시 여부"
>
   audio 태그를 지원하지 않을 때 표시할 내용
</audio>

iPad 및 iPhone(iOS 4이상)에서 실행하면 플레이어가 표시되며, 재생 버튼 누르면 음악이 재생됩니다.
하지만 iPhone OS 3.x 이하 버전에서는 먼저 플레이어가 실행된 후 바로 재생을 시작합니다.

Android 1.6dms < audio > 태그를 지원하지 않기 때문에 MP3 파일을 다운로드하는 링크가 표시됩니다.

자바스트립트로도 음악 파일을 처리할 수 있습니다.

먼저 아래와 같은 형식으로 음악파일을 읽어 들여야합니다.

var audio = new Audio("test.mp3");

[재생], [정지], [처음부터] 버튼을 클릭 시 Audio 객체를 조작하도록 하기 위해 <input> 태그의 onclick 이벤트에 자바스크립트 코드를 직접 입력합니다.
[처음부터] 버튼 클릭 시에는 currentTime 속성을 '0'으로 설정하여 처음부터 재생 기능을 구현합니다.

<input type="button" value="재생" onclick="audio.play()"/>
<input type="button" value="정지" onclick="audio.pause()"/>
<input type="button" value="처음부터" onclick="audio.currentTime=0; audio.play()"/><br/>

재생 위치를 감시하기 위해 addEventListener() 메서드로 timeupdate 이벤트를 감시하도록 합니다.
이때, 현재 재생중인 위치는 currentTime 속성으로, 음악 파일의 총 재생 시간은 duration 속성으로 확인할 수 있습니다.

audio.addEventListener("timeupdate",function(e){
    $("info").innerHTML=audio.currentTime + "/" + audio.duration;
});

소리 조절을 volume 속성을 이용합니다.

function changeVolume(v){
   var new_v=audio.volume+v;
   if (0 <=new_v && new_v <= 1.0){
      audio.volume = new_v;
   }
}

Android 1.6에서는 재생할 수 없지만 Android 2.x나 iPhone/iPad에서는 원하는 타이밍에 음악을 출력할 수 있습니다.
적절하게 잘 활용해 사용해보세요.