문제:
버튼을 클릭하면 오디오가 재생되고, 오디오 재생 상태에 따라 버튼의 모양을 변경하려고 한다.
<audio> 엘리먼트의 onplay / onended 이벤트를 컨트롤 해서,
재생될 때 아이콘의 모양을 변경하면 간단히 해결될 것 같았다.
대상이 되는 audio 엘리먼트에 간단하게 아래와 같이 이벤트를 할당했다.
audio.addEventListener("play", function () {
// 재생 모양으로 아이콘 변경
}, false);
audio.addEventListener("ended", function () {
// 대기 모양으로 아이콘 변경
}, false);
음.. 헌데,..
최초로 버튼을 클릭했을 땐 play 이벤트가 잘 호출되는데,
두 번째 클릭(또는 두 번째 재생)부터는 play 이벤트가 호출되지 않는다.
여러 번 시도에 관계 없이 ended 이벤트는 의도한 대로 작동한다.
뭐가 문제일까?
해결책:
원인은, 오디오가 재생되었으나 명시적으로 '멈춤(paused)' 상태가 되지 않았기 때문이다.
w3c 스펙을 확인해보니, 미디어 엘리먼트(video, audio, ...)의 play 이벤트가 아래와 같이 정의되어 있다.
play Event
Fired when... :
The element is no longer paused.
Fired after the play() method has returned,
or when the autoplay attribute has caused playback to begin.
추천 : 
