[HTML5] audio태그를 사용방법

우연히 홈페이지 작업을 하다가... mp3를 재생을 해줘야하는 일이 생겼습니다....

저같은경우 잘 사용하지 않는 웹에서 오디오틀기 ㅎㅎㅎ

audio 태그를 이용하여 간단하게 작업해줍니다.

HTML 부분

JS부분

function aud_play_pause(){
	var myAudio = document.getElementById("myAudio");
	if (myAudio.paused){
		myAudio.play();
		$('.aud_PlayBtn').find('img').attr('src',$('.aud_PlayBtn').find('img').attr('src').replace("_on","_off"));
	} else {
		myAudio.pause();
		$('.aud_PlayBtn').find('img').attr('src',$('.aud_PlayBtn').find('img').attr('src').replace("_off","_on"));
	}
}

간단하게 설명하자면 A태그를 클릭하면 음악이 재생을 하면서 동시에 이미지를 플레이버튼 이미지로 바꿔줍니다.

또다시 클릭하면 음악재생이 멈추며 이미지를 정지이미지로 교체해주는 스크립트 입니다.