티스토리와 아보카도 갠홈에 사용할 수 있는 백그라운드 재생 코드입니다
코드를 여러 번 붙여 넣으면 중복으로 사용할 수도 있습니다!!
모든 파일은 우클릭 후 메모장에서 편집으로 열어주세요
Loading...
0:00/0:00
Loading...
1 / 1
0:00/0:00
더보기
html 모드에 해당 코드를 입력하고 유튜브 링크만 변경하면 적용 완료
사이즈가 작고 별도의 조정 기능은 없습니다 (딱 음악만 들려줍니다)
외부 링크 삽입형 같은 경우 API나 자동재생 방지 문제로 재생이 끊길 수 있습니다!! 이 경우 새로고침을 하거나 브금 버튼 클릭 전 페이지의 다른 부분을 클릭 후 브금을 재생해 주세요
Loading...
0:00/0:00
Loading...
1 / 1
0:00/0:00
더보기
마찬가지로 html 모드에 해당 코드를 입력하고 유튜브 링크만 변경하면 적용 완료
콤팩트형에서 메뉴가 추가되었습니다!
기능 (브금 제목 옆 ︙기호를 누르면 열립니다)
[size] 브금 플레이어 크기 조절 가능
[볼륨] 말 그대로 볼륨 조절 가능
Loading...
0:00/0:00
Loading...
1 / 1
0:00/0:00
더보기
LP판 이미지와 브금 제목을 커스텀할 수 있습니다
유튜브 링크 삽입형과 달리 API 문제로 재생이 끊기지 않습니다!
준비물: MP3 파일 링크 / 앨범 커버 이미지 링크
▼▼▼ 아래 세 가지를 입력하세요 ▼▼▼
data-audio-url : MP3 파일 직접 링크 (또는 외부 오디오 URL)
data-cover-url : 앨범 커버 이미지 URL (없으면 기본 이미지 표시)
data-title : 곡 제목
MP3 파일 링크 추출 방법
① 구글 드라이브
구글 드라이브에 MP3 업로드
파일 우클릭 → 공유 → 링크 있는 모든 사용자 설정
링크에서 파일 ID 복사
원본: https://drive.google.com/file/d/ABCDEFG123/view
아래 형식으로 변환:
https://drive.google.com/uc?export=download&id=ABCDEFG123
구글 드라이브는 CORS 정책 때문에 일부 브라우저에서 막힐 수 있습니다
② 깃허브
GitHub 저장소(무료)에 MP3 파일 업로드
파일 클릭 → Raw 버튼클릭
주소창 URL 그대로 복사
https://raw.githubusercontent.com/유저명/저장소/main/song.mp3
③ 티스토리 자체 업로드 (추천)
티스토리 글쓰기 → 파일첨부로 MP3 업로드
첨부된 파일에서 링크 주소 복사
https://블로그명.tistory.com/attachment/파일명.mp3
④ Dropbox
드롭박스에 업로드 후 공유 링크 생성
URL 끝의 dl=0 → dl=1 로 변경
https://www.dropbox.com/s/XXXXX/song.mp3?dl=1
이미지 파일 링크 추출 방법
① imjur
이매저에 사진 업로드
사진 우클릭 후 이미지 주소 복사
② 티스토리 자체 업로드 (추천)
티스토리 글쓰기 → 파일첨부로 이미지 업로드
첨부된 파일에서 링크 주소 복사
'tistory' 카테고리의 다른 글
| [2차 지인] 백그라운드 재생 플레이어 (0) | 2026.05.16 |
|---|