🎵 이미지를 클릭하면 음악이 재생되는 블로그 만들기 (4가지 플랫폼용 코드 포함)
샤갈의 명화, 클릭하면 음악이 흐른다!
우리는 SUNO ai를 이용한 명화,음악듣기 프로젝트를 수행중입니다. 이제 여러분의 블로그에
썸네일 클릭 → 음악 재생/정지 기능을 쉽게 넣을 수
있는 방법을 알아봅시다.
이 글에서는 마크다운, 워드프레스, 블로그스팟 등 주요
플랫폼별로 적용 가능한 코드를 모두 정리했습니다.
✅ 공통 적용 목표
-
클릭 가능한 이미지
-
음악 재생 & 정지 토글
-
JavaScript 제한 우회 (iframe 활용)
-
모바일 및 반응형 대응
① 📄 마크다운용 코드 (GitHub, Notion 등에서 활용)
html
<iframesrcdoc=' <html> <body style="margin:0; padding:0;
text-align:center;"> <a href="#" onclick="var a =
document.getElementById(`player`); a.paused ? a.play() : a.pause(); return
false;"> <img
src="https://artontv.kr/wp-content/uploads/2025/04/썸네일이미지.jpg"
alt="플레이 썸네일" style="max-width:100%; height:auto; cursor:pointer;"
/> </a> <audio id="player" preload="auto"> <source
src="https://artontv.kr/wp-content/uploads/2025/04/하늘-위로-떠오른-기억-.mp3"
type="audio/mpeg"> </audio> </body>
</html>'width="100%"height="320"frameborder="0"scrolling="no">
</iframe>
✅ 사용법: 마크다운 에디터에서 HTML 삽입이 지원되는 경우 이 코드를 그대로 붙여넣으면 됩니다.
② 🧩 워드프레스 (자체 호스팅, Classic/HTML 블록 지원)
html
<iframesrcdoc=' <html> <body style="margin:0; padding:0;
text-align:center;"> <a href="#" onclick="var a =
document.getElementById(`player`); a.paused ? a.play() : a.pause(); return
false;"> <img
src="https://artontv.kr/wp-content/uploads/2025/04/썸네일이미지.jpg"
alt="플레이 썸네일" style="max-width:100%; height:auto; cursor:pointer;"
/> </a> <audio id="player" preload="auto"> <source
src="https://artontv.kr/wp-content/uploads/2025/04/하늘-위로-떠오른-기억-.mp3"
type="audio/mpeg"> </audio> </body>
</html>'width="100%"height="320"frameborder="0"scrolling="no">
</iframe>
✅ 사용법:
-
“커스텀 HTML 블록” 또는 “텍스트 보기” 모드에서 붙여넣기
-
Gutenberg, Elementor, Classic Editor 모두 지원 가능
③ 📘 블로그스팟 (Blogger) – 표준 버전
html
<iframesrcdoc=' <html> <body style="margin:0; padding:0;
text-align:center;"> <a href="#" onclick="var a =
document.getElementById(`player`); a.paused ? a.play() : a.pause(); return
false;"> <img
src="https://artontv.kr/wp-content/uploads/2025/04/썸네일이미지.jpg"
alt="플레이 썸네일" style="max-width:100%; height:auto; cursor:pointer;"
/> </a> <audio id="player" preload="auto"> <source
src="https://artontv.kr/wp-content/uploads/2025/04/하늘-위로-떠오른-기억-.mp3"
type="audio/mpeg"> </audio> </body>
</html>'width="100%"height="320"frameborder="0"scrolling="no">
</iframe>
✅ 사용법:
-
블로그스팟 글쓰기에서 상단의 “HTML 보기” 클릭
-
위 코드를 그대로 붙여넣기
-
이미지 주소 또는 MP3 주소만 본인의 것으로 교체
④ 📘 블로그스팟 대체형 (iframe 불허 시)
일부 블로그스팟 템플릿이나 보안 설정에서
srcdoc을 차단할 수 있습니다.
아래는 단순 플레이버튼만 삽입하는 대체안입니다.
html
<audiocontrolsstyle="width:100%;">
<sourcesrc="https://artontv.kr/wp-content/uploads/2025/04/하늘-위로-떠오른-기억-.mp3"type="audio/mpeg">
</audio>
📌 단점: 이미지 클릭 연동 불가, 재생 버튼만 노출
✅ 장점: 거의 모든 플랫폼에서 차단 없이 동작
🎯 마무리 정리
| 플랫폼 | 추천 방식 | JS 제한 회피 가능 | 이미지 클릭 연동 |
|---|---|---|---|
| 마크다운 | iframe + srcdoc | ✅ | ✅ |
| 워드프레스 | iframe | ✅ | ✅ |
| 블로그스팟 | iframe (가능한 경우) | ✅ | ✅ |
| 블로그스팟 대체 | <audio controls> |
✅ | ❌ |
✨ 참고: 이 음악은 샤갈의 『도시 위에서』 작품에서 영감을 받아 제작되었습니다.
오디오: 🎧 하늘 위로 떠오른 기억.mp3
댓글 쓰기