우연히 홈페이지 작업을 하다가... 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태그를 클릭하면 음악이 재생을 하면서 동시에 이미지를 플레이버튼 이미지로 바꿔줍니다.
또다시 클릭하면 음악재생이 멈추며 이미지를 정지이미지로 교체해주는 스크립트 입니다.
'웹관련 > HTML-CSS' 카테고리의 다른 글
[CSS] transition 으로 네모박스 그리기 (0) | 2019.01.25 |
---|---|
[CSS] img 태그 onerror 관련 (0) | 2018.12.12 |
[CSS] 브라우져에 보이는 스크롤바 없애기 - 스크롤은 됨 (0) | 2018.10.17 |
[HTML5] VIDIO 태그 사용방법 (0) | 2017.10.31 |
[CSS] 아이폰에서만 숫자부분이 파란색으로 보일때.. (2) | 2017.08.22 |
댓글