2025년 5월 11일 일요일
이미지를 클릭하면 음악이 재생되는 블로그 만들기 (IFRAME 활용 완벽 가이드)
🎵 이미지를 클릭하면 음악이 재생되는 블로그 만들기 (IFRAME 활용 완벽 가이드)
썸네일을 클릭했더니 음악이 흐른다?
티스토리, 워드프레스처럼 JavaScript 제한이 있는 블로그에서도 가능한
기능입니다.
이번 글에서는 iframe을 활용해,
이미지를 클릭하면 음악이 재생되고 다시 클릭하면 정지되는
방법을 알려드릴게요.
✅ 왜 IFRAME을 사용해야 할까?
일반적으로 이미지 클릭 시 음악을 재생하려면 JavaScript가 필요합니다.
하지만 티스토리, 워드프레스.com, 브런치 같은 플랫폼은
JavaScript <script> 태그 사용을 제한해요.
그래서 우리는
iframe + srcdoc을 사용한 HTML 미니 웹페이지를
블로그에 삽입하는 방식으로 우회합니다.
🖼️ 완성 예시: 이미지 클릭 → 음악 재생/정지
👇 아래 코드를 블로그 글의 HTML 모드에 그대로 붙여넣으세요.
💡 핵심 설명
| 항목 | 설명 |
|---|---|
iframe srcdoc |
iframe 안에 직접 HTML 작성 가능 |
onclick="..." |
클릭 시 오디오 플레이/정지 제어 |
<audio id="player"> |
실제로 재생할 MP3 연결 |
<img> |
클릭 가능한 썸네일 역할 |
width="100%" |
반응형으로 모바일에서도 잘 보임 |
🎨 활용 아이디어
-
🎶 명화에 음악 입히기: 샤갈의 그림을 클릭하면 그 분위기의 음악이 재생!
-
📖 에세이 배경 음악: 감성 에세이에 직접 만든 음악을 연결
-
📚 전시 안내용 오디오 가이드: 각 작품에 해당하는 음성을 이미지와 함께
⚠️ 주의할 점
-
이미지는 반드시 https:// 주소로 업로드되어야 합니다.
-
일부 브라우저(특히 모바일)는 자동 재생을 막기 때문에 첫 클릭이 꼭 필요합니다.
-
같은 글에 여러 오디오를 삽입할 경우
id="player"→player1,player2등으로 각각 다르게 지정해야 충돌이 없습니다.
✅ 마무리하며
이 방식은 단순한 음악 삽입을 넘어,
이미지와 사운드를 결합한 감성적 경험을 전달할 수 있어요.
예술, 여행, 에세이, 전시 후기 블로그에 정말 잘 어울리는 기능입니다.
🛠️ 더 복잡한 제어(예: 다른 음악 정지, 재생 아이콘 바꾸기 등)가 필요하다면 댓글 주세요.
고급 버전으로...
✅ 이미지 클릭 시 ▶ 아이콘이 나타나는 IFRAME 코드
html<iframe srcdoc='
<html>
<head>
<style>
body {
margin: 0; padding: 0; text-align: center;
}
.audio-wrapper {
position: relative;
display: inline-block;
max-width: 100%;
}
.audio-wrapper img {
width: 100%;
height: auto;
cursor: pointer;
display: block;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
color: white;
opacity: 0.8;
display: none;
pointer-events: none;
}
</style>
<script>
function stopAllAudio(exceptId) {
var audios = document.getElementsByTagName("audio");
var icons = document.getElementsByClassName("play-icon");
for (var i = 0; i < audios.length; i++) {
if (audios[i].id !== exceptId) {
audios[i].pause();
audios[i].currentTime = 0;
}
}
for (var j = 0; j < icons.length; j++) {
icons[j].style.display = "none";
}
}
function toggleAudio(id, iconId) {
var audio = document.getElementById(id);
var icon = document.getElementById(iconId);
if (audio.paused) {
stopAllAudio(id);
audio.play();
icon.style.display = "block";
} else {
audio.pause();
audio.currentTime = 0;
icon.style.display = "none";
}
}
</script>
</head>
<body>
<div class="audio-wrapper" onclick="toggleAudio(`player1`, `icon1`)">
<img src="https://artontv.kr/wp-content/uploads/2025/04/썸네일이미지.jpg" alt="플레이 썸네일" />
<div class="play-icon" id="icon1">▶</div>
</div>
<audio id="player1" preload="auto">
<source src="https://artontv.kr/wp-content/uploads/2025/04/하늘-위로-떠오른-기억-.mp3" type="audio/mpeg">
</audio>
</body>
</html>' width="100%" height="340" frameborder="0" scrolling="no">
</iframe>
🟩 작동 방식 요약
| 요소 | 설명 |
|---|---|
.play-icon | ▶ 아이콘으로 사용, 중앙에 위치 |
onclick 이벤트 | 이미지 클릭 시 audio.play()와 아이콘 표시 |
stopAllAudio() | 다른 오디오 정지 + 모든 ▶ 아이콘 숨김 |
display: none/block | 재생 상태에 따라 아이콘 토글 |
2025년 5월 3일 토요일
이미지를 클릭하면 음악이 재생되는 블로그 만들기 (4가지 플랫폼용 코드 포함)
🎵 이미지를 클릭하면 음악이 재생되는 블로그 만들기 (4가지 플랫폼용 코드 포함)
샤갈의 명화, 클릭하면 음악이 흐른다!
우리는 SUNO ai를 이용한 명화,음악듣기 프로젝트를 수행중입니다. 이제 여러분의 블로그에
썸네일 클릭 → 음악 재생/정지 기능을 쉽게 넣을 수
있는 방법을 알아봅시다.
이 글에서는 마크다운, 워드프레스, 블로그스팟 등 주요
플랫폼별로 적용 가능한 코드를 모두 정리했습니다.
✅ 공통 적용 목표
-
클릭 가능한 이미지
-
음악 재생 & 정지 토글
-
JavaScript 제한 우회 (iframe 활용)
-
모바일 및 반응형 대응
① 📄 마크다운용 코드 (GitHub, Notion 등에서 활용)
<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 블록 지원)
<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) – 표준 버전
<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을 차단할 수 있습니다.
아래는 단순 플레이버튼만 삽입하는 대체안입니다.
<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
