GitHub와 Shopify에 음성 파일 올리고 블로그에서 재생하는 방법 (2026년 최신)
블로그 글에서 직접 재생되는 오디오 플레이어를 만들고 싶다면, 음성 파일을 어디에 올릴지와 어떤 주소를 쓸지가 가장 중요합니다. 이 글에서는 GitHub와 Shopify 두 가지 케이스를 기준으로, mp3 파일을 업로드하고 블로그 본문에서 재생되도록 연결하는 방법을 단계별로 정리했습니다.
1. GitHub에 음성 파일 올리고 블로그에서 재생하기
GitHub는 원래 코드 저장소지만, 공개 저장소와 원시 파일(raw) 주소를 활용하면 개인 블로그 수준에서는 간단한 오디오 호스팅 용도로도 사용할 수 있습니다. 다만 대규모 트래픽 사이트용 정식 미디어 서버는 아니라는 점은 꼭 감안해야 합니다.
1-1. GitHub에 오디오 파일 업로드하기|첫번째 업로드하기
- GitHub 계정에 로그인한 뒤, 새 저장소(New repository)를 생성합니다. 공개(Public) 저장소를 권장합니다.
- 저장소 화면에서 Add file → Upload files를 클릭합니다.
- 업로드 창에
audio-file.mp3같은 mp3 파일을 드래그하거나 선택해서 업로드합니다. - 하단의 Commit changes 버튼을 눌러 업로드를 완료합니다.
1-2. Raw 링크(직접 URL) 복사하기| 두번째는 주소얻기
- 저장소 파일 목록에서 방금 업로드한
audio-file.mp3를 클릭합니다. - 파일 상세 페이지 상단에서 Raw 버튼을 클릭하면 브라우저가 새로운 주소로 이동합니다.
- 주소창에 표시된
https://raw.githubusercontent.com/사용자명/저장소명/브랜치/경로/audio-file.mp3형태의 URL을 그대로 복사합니다. - 이 주소가 나중에 블로그에서 오디오를 재생할 때 사용할 실제 mp3 파일 링크입니다.
일부 환경에서는 ?raw=true가 붙은 GitHub URL을 그대로 src로 쓰기도 하지만, 일반적으로는 raw.githubusercontent.com 주소를 사용하는 방식이 더 권장됩니다.
1-3. 블로그 글에 <audio> 태그로 연결하기| 세번째는 블로그에서 응용하기
티스토리, 워드프레스, 기타 HTML 편집이 가능한 블로그라면, 게시글을 HTML 모드로 전환한 뒤 아래 코드를 붙여 넣으면 됩니다.
<audio controls>
<source src="https://raw.githubusercontent.com/username/repo/main/audio/audio-file.mp3" type="audio/mpeg">
브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
- src에는 방금 복사한 raw mp3 URL을 그대로 넣어 줍니다.
- 파일이 mp3라면
type="audio/mpeg"을 사용하는 것이 호환성이 가장 좋습니다.
이렇게 하면 글을 열었을 때 재생 버튼이 있는 기본 HTML5 오디오 플레이어가 표시되며, 클릭만으로 바로 재생됩니다.
1-4. GitHub 사용 시 주의사항
- GitHub는 정식 오디오 CDN이 아니기 때문에, 다운로드/요청 횟수가 매우 많은 대형 서비스용으로 쓰기에는 적합하지 않습니다.
- 개인 블로그에서 샘플 음성 몇 개 정도를 재생하는 수준이라면 보통 문제 없이 사용할 수 있지만, 트래픽이 많이 몰리는 프로젝트라면 별도의 오디오 호스팅이나 CDN을 고려하는 것이 좋습니다.
이전글: GitHub에 PDF 파일 올리고 블로그에서 무료 다운로드 링크 만드는 방법 (2026년 최신)
2. Shopify에 음성 파일 올리고 블로그에서 재생하기
Shopify를 이미 사용 중이라면, 굳이 외부 호스팅을 쓰지 않고도 Shopify 파일(Storage)에 음성 파일을 올린 뒤, 그 URL을 이용해 블로그 글 안에 오디오 플레이어를 넣을 수 있습니다. 관리자 화면에서 파일을 업로드하고, 해당 URL을 복사해 <audio> 태그에 연결하는 방식입니다.
2-1. Shopify 파일에 오디오 업로드하기
- Shopify 관리자에 로그인한 뒤, 좌측 메뉴에서 콘텐츠(Content) → 파일(Files)로 이동합니다.
- 우측 상단의 파일 업로드(Upload files) 버튼을 클릭합니다.
- 로컬 컴퓨터에서
podcast-episode-01.mp3같은 mp3 파일을 선택하여 업로드합니다. - 업로드가 끝나면 목록에서 해당 파일을 클릭해 상세 정보를 열고, 표시된 URL을 복사합니다.
주소는 보통https://cdn.shopify.com/...로 시작하는 형태입니다.
2-2. Shopify 블로그 글에 오디오 플레이어 삽입하기
이제 복사한 파일 URL을 이용해, Shopify 블로그 또는 페이지 본문에 오디오 플레이어를 넣을 수 있습니다. Shopify 공식 가이드에서도, 리치 텍스트 에디터 → HTML 보기 전환 → <audio> 코드 붙여넣기 패턴을 사용하도록 안내하고 있습니다.
- Shopify 관리자에서 온라인 스토어 → 블로그 게시물(Blog posts) 또는 페이지(Pages) 메뉴로 이동합니다.
- 오디오를 넣고 싶은 글을 열거나 새 글을 생성합니다.
- 에디터 우측 상단의 <> 아이콘(HTML 보기)을 눌러 HTML 모드로 전환합니다.
- 오디오를 표시하고 싶은 위치에 아래 코드를 붙여 넣습니다.
<audio controls>
<source src="https://cdn.shopify.com/s/files/1xxx/xxx/files/podcast-episode-01.mp3?v=1234567890" type="audio/mpeg">
브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
- src에는 2-1 단계에서 복사한 Shopify 파일 URL을 그대로 넣습니다.
- mp3 파일이라면 역시
type="audio/mpeg"으로 지정합니다. - HTML 모드에서 코드를 붙여 넣은 뒤, 다시 일반 편집 모드로 돌아오면 오디오 플레이어가 에디터 안에 보이는 것을 확인할 수 있습니다.
2-3. 재생이 안 될 때 체크할 것
- 파일이 실제로 .mp3 등 브라우저에서 지원하는 오디오 포맷인지 확인합니다.
- Shopify에서 복사한 파일 URL 전체를 빠짐없이 넣었는지, 중간에 줄 바꿈이나 공백이 들어가지 않았는지 확인합니다.
- 블로그 편집기가 HTML 모드가 아닌 “리치 텍스트 모드”에서 코드를 넣으면 태그가 깨지는 테마도 있으니, 반드시 코드 보기 상태에서 삽입하는 것이 좋습니다.
3. 어떤 경우에 GitHub, 어떤 경우에 Shopify를 쓸까?
- GitHub: 개발자용 저장소를 이미 쓰고 있고, 개인 블로그나 기술 문서에서 간단한 샘플 음성을 재생하고 싶을 때 적합합니다.
- Shopify: 상점 콘텐츠(상품 설명, 브랜드 스토리, 팟캐스트형 블로그 등)에 자연스럽게 오디오를 붙이고 싶을 때 가장 깔끔한 선택입니다. 스토어 파일 스토리지를 그대로 활용하므로 관리도 편합니다.
두 방식 모두 공통적으로 <audio controls> 태그를 사용해 브라우저 기본 오디오 플레이어를 띄우는 구조이기 때문에, 나중에 디자인을 통일하고 싶으면 CSS나 커스텀 플레이어 스크립트로 확장하는 것도 가능합니다.
<!-- 공통 CSS -->
<style>
.my-audio-box {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 12px 16px;
margin: 16px 0;
background: #fafafa;
display: flex;
align-items: center;
gap: 12px;
}
.my-audio-play-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #111827;
color: #ffffff;
font-size: 16px;
cursor: pointer;
}
.my-audio-info {
display: flex;
flex-direction: column;
}
.my-audio-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.my-audio-status {
font-size: 12px;
color: #6b7280;
}
</style>
<!-- GitHub 예시 -->
<div class="my-audio-box" data-audio-src="https://raw.githubusercontent.com/username/repo/main/audio/audio-file.mp3">
<button class="my-audio-play-btn" type="button">▶</button>
<div class="my-audio-info">
<div class="my-audio-title">GitHub hosted audio</div>
<div class="my-audio-status">대기 중</div>
</div>
</div>
<!-- Shopify 예시 -->
<div class="my-audio-box" data-audio-src="https://cdn.shopify.com/s/files/1xxx/xxx/files/podcast-episode-01.mp3?v=1234567890">
<button class="my-audio-play-btn" type="button">▶</button>
<div class="my-audio-info">
<div class="my-audio-title">Shopify hosted audio</div>
<div class="my-audio-status">대기 중</div>
</div>
</div>
<!-- 공통 JS (본문 맨 아래에 한 번만 삽입) -->
<script>
(function () {
const players = document.querySelectorAll('.my-audio-box');
players.forEach(box => {
const src = box.getAttribute('data-audio-src');
const audio = new Audio(src);
const btn = box.querySelector('.my-audio-play-btn');
const status = box.querySelector('.my-audio-status');
let isPlaying = false;
btn.addEventListener('click', function () {
if (!isPlaying) {
audio.play();
isPlaying = true;
btn.textContent = '⏸';
status.textContent = '재생 중';
} else {
audio.pause();
isPlaying = false;
btn.textContent = '▶';
status.textContent = '일시 정지';
}
});
audio.addEventListener('ended', function () {
isPlaying = false;
btn.textContent = '▶';
status.textContent = '재생 완료';
});
});
})();
</script><br>
</code></pre>
** GitHub/Shopify 어디서 오디오를 가져오든 그대로 쓸 수 있는, 공용 오디오 박스 + 최소 JS 플레이 버튼 세트를 하나로 묶었습니다.
댓글 쓰기
0댓글