🎵 이미지를 클릭하면 음악이 재생되는 블로그 만들기 (IFRAME 활용 완벽 가이드)

썸네일을 클릭했더니 음악이 흐른다?
티스토리, 워드프레스처럼 JavaScript 제한이 있는 블로그에서도 가능한 기능입니다.
이번 글에서는 iframe을 활용해, 이미지를 클릭하면 음악이 재생되고 다시 클릭하면 정지되는 방법을 알려드릴게요.

✅ 왜 IFRAME을 사용해야 할까?

일반적으로 이미지 클릭 시 음악을 재생하려면 JavaScript가 필요합니다.
하지만 티스토리, 워드프레스.com, 브런치 같은 플랫폼은 JavaScript <script> 태그 사용을 제한해요.

그래서 우리는 iframe + srcdoc을 사용한 HTML 미니 웹페이지를 블로그에 삽입하는 방식으로 우회합니다.

🖼️ 완성 예시: 이미지 클릭 → 음악 재생/정지

👇 아래 코드를 블로그 글의 HTML 모드에 그대로 붙여넣으세요.

<iframe srcdoc='

<html>

<img src="https://artontv.kr/wp-content/uploads/2025/04/썸네일이미지.jpg"

alt="플레이 썸네일" style="max-width:100%; height:auto; cursor:pointer;" />

</a>

</audio>

</body>

</html>' width="100%" height="320" frameborder="0" scrolling="no">

</iframe>

💡 핵심 설명

항목	설명
`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`	재생 상태에 따라 아이콘 토글

처음으로

이미지를 클릭하면 음악이 재생되는 블로그 만들기 (IFRAME 활용 완벽 가이드)