무료 오디오 호스팅 서비스 Vocaroo를 활용하여 블로그에 자동으로 재생되는 배경음악(BGM) 플레이어를 삽입하는 방법을 소개합니다. HTML과 자바스크립트 코드를 이용해 스크롤 시 음악이 자동 재생 기능을 구현하는 상세한 방법입니다.
블로그에 글을 쓰다 보면, 때로는 한 줄의 문장보다 한 곡의 음악이 더 큰 감동을 전할 때가 있습니다. 특히 감성적인 에세이나 일기, 글귀, 여행 후기 등을 작성할 때 배경 음악은 텍스트의 정서적 깊이를 배가시켜 주는 요소가 될 수 있습니다. 이번 글에서는 무료 오디오 호스팅 사이트인 Vocaroo를 이용해 블로그에 자동으로 재생되는배경음악 플레이어를 삽입하는 방법을 소개합니다.
Vocaroo로 블로그 자동 재생 배경음악 플레이어 삽입하기
Vocaroo는 웹브라우저만으로 음성 녹음과 공유가 가능한 무료 오디오 서비스입니다. 별도의 설치 없이 바로 사용 가능하며, 완성된 음원은 공유 링크 또는 MP3 다운로드 형식으로 제공되어 블로그, 이메일, 메시지 등에 삽입하기 좋습니다.
Vocaroo 주요 특징 및 블로그 활용 장점
- 회원가입 없이 녹음 및 MP3 업로드 가능
- MP3 다운로드 및 직접 임베딩 가능한 공유 링크 제공
- 임시 저장 기반이므로 저작권에 문제가 없는 개인 음원 또는 짧은 콘텐츠에 활용 (장기 보관은 비추천)
- 가볍고 빠른 로딩 속도로 블로그 성능 저하 최소화
블로그에 자동 재생 배경음악 코드를 넣는 방법
아래 코드를 블로그 본문 HTML 편집 모드에서 원하는 위치에 삽입하면, 방문자가 스크롤을 내리거나 해당 플레이어가 뷰포트에 들어오면 음악이 자동으로 재생됩니다. 볼륨은 20%로 고정되어 있어 방문자에게 과한 소음을 주지 않고 블로그 분위기를 채워줍니다.
1. 스크롤 시 자동 재생 (Intersection Observer 활용)
이 코드는 오디오 플레이어가 화면에 일정 부분(threshold: 0.3) 나타날 때 재생을 시작하도록 하여, 사용자의 상호작용 없이 무단으로 음악이 재생되는 것을 방지합니다. 또한 초기 상태는 음소거(muted)로 설정됩니다.
div id="audio-container" style="padding: 20px; background: #f0f0f0; border-radius: 10px;"
audio id="auto-player" muted controls style="width: 100%"
source src="https://media.vocaroo.com/mp3/1dsVCLXZkNsm" type="audio/mpeg"
브라우저가 오디오를 지원하지 않습니다.
/audio
/div
script
document.addEventListener('DOMContentLoaded', () = {
const audio = document.getElementById('auto-player');
let hasUnmuted = false;
// 초기 상태: 음소거, 볼륨 20% 설정
audio.muted = true;
audio.volume = 0.2;
const observer = new IntersectionObserver((entries) = {
entries.forEach(entry = {
if (entry.isIntersecting) {
if (!hasUnmuted) {
audio.muted = false; // 뷰포트 진입 시 음소거 해제
hasUnmuted = true;
}
audio.play().catch(() = {});
}
});
}, { threshold: 0.3 }); // 30%가 보일 때 작동
observer.observe(document.getElementById('audio-container'));
// 혹시 Intersection Observer가 작동하지 않을 경우 대비, 첫 스크롤 이벤트로 음소거 해제 및 재생 시도
const onScroll = () = {
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
audio.play().catch(() = {});
}
window.removeEventListener('scroll', onScroll);
};
window.addEventListener('scroll', onScroll);
});
/script
2. 스크롤 + 뷰포인트 이탈 시 20초 후 재생 멈춤
이 코드는 플레이어가 화면 밖으로 완전히 벗어났을 때에도 음악이 계속 흐르는 것을 방지하기 위해, 20초의 유예 기간을 준 뒤 자동으로 음악을 정지(pause)시키는 기능이 추가되어 사용자 경험을 더욱 배려합니다.
div id="audio-container" style="padding: 20px; background: #f0f0f0; border-radius: 10px;"
audio id="auto-player" muted controls style="width: 100%"
source src="https://media.vocaroo.com/mp3/1dsVCLXZkNsm" type="audio/mpeg"
브라우저가 오디오를 지원하지 않습니다.
/audio
/div
script
document.addEventListener('DOMContentLoaded', () = {
const audio = document.getElementById('auto-player');
let hasUnmuted = false;
let stopTimeout = null;
audio.muted = true;
audio.volume = 0.2;
const observer = new IntersectionObserver((entries) = {
entries.forEach(entry = {
if (entry.isIntersecting) {
// 뷰 안으로 들어오면 재생 시작
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
}
audio.play().catch(() = {});
// 벗어났을 때 설정된 정지 타이머가 있다면 취소
if (stopTimeout) {
clearTimeout(stopTimeout);
stopTimeout = null;
}
} else {
// 뷰 밖으로 벗어나면 20초 후 정지 타이머 설정
stopTimeout = setTimeout(() = {
audio.pause();
}, 20000); // 20초 후 정지
}
});
}, { threshold: 0.3 });
observer.observe(document.getElementById('audio-container'));
// 첫 스크롤 시에도 재생 (모바일 환경 대응)
const onScroll = () = {
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
audio.play().catch(() = {});
}
window.removeEventListener('scroll', onScroll);
};
window.addEventListener('scroll', onScroll);
});
/script
배경음악이 잘 어울리는 블로그 콘텐츠
- 여행 에세이, 사진 중심의 여행 후기
- 감성 사진 중심의 포스트 및 개인 창작물
- 힐링 글귀 모음, 독백형 글
- 카페 추천, 도시 분위기 소개 등 특정 정서 연출이 필요한 주제
배경음악이 있는 블로그는 조용히 마음을 울리는 분위기를 만들어 줍니다. 사운드가 텍스트의 여백을 채워주고, 독자가 글을 더 오래 머물게 합니다. 음악은 블로그 글에 생명을 불어넣는 도구입니다. 간단한 코드 한 줄로 블로그에 잔잔한 음악을 흐르게 할 수 있다면, 그 자체로 하나의 디지털 감성 연출이 될 수 있습니다.
Vocaroo와 자동재생 오디오 플레이어를 활용해 여러분의 블로그도 감성 한 스푼 추가해 보세요.
자주 묻는 질문 (FAQ) – 블로그 배경음악 자동 재생
Q1: Vocaroo 대신 다른 무료 오디오 호스팅 서비스를 사용해도 이 코드가 작동하나요?
네, 작동합니다. 중요한 것은 source src="..." 부분에 삽입할 음악 파일의 직접 링크(URL)가 MP3와 같은 오디오 파일 형식이어야 합니다. SoundCloud나 다른 호스팅 서비스에서 MP3 링크를 직접 제공한다면 Vocaroo 링크 대신 해당 링크를 사용하실 수 있습니다.
Q2: 배경음악을 자동 재생할 때 초기 음소거(muted)를 하는 이유와 필요성은 무엇인가요?
대부분의 최신 웹 브라우저(크롬, 사파리 등)는 사용자 경험을 보호하기 위해, 사용자의 상호작용 없이 미디어를 자동 재생하는 것을 기본적으로 차단하거나 음소거 상태로 만듭니다. 따라서 코드를 muted=true로 시작하여 브라우저의 자동 재생 정책을 우회하고, 사용자의 스크롤 상호작용이 일어난 후 자바스크립트를 이용해 음소거를 해제하고 재생하는 방식이 현재 가장 안정적인 자동 재생 구현 방법입니다.
Q3: 배경음악 볼륨을 20% 외에 다른 값으로 바꾸려면 어떻게 해야 하나요?
제공된 JavaScript 코드에서 audio.volume = 0.2; 부분을 원하는 값으로 수정하시면 됩니다. 여기서 볼륨은 0.0(최소)부터 1.0(최대) 사이의 소수점 값으로 지정합니다. 예를 들어, 50% 볼륨으로 설정하고 싶다면 audio.volume = 0.5;로 변경하면 됩니다.