티스토리 유튜브 BGM 플레이어

 

 

 

 

 

 

 

 

 

 

작동 샘플 : 본 블로그 우측 하단 확인

컬러나 기본 형태는 상단 이미지와 같습니다.

 

 

 

 

 

[ 유의사항 ]

 

① 크롬 정책에 의해 버튼을 눌러야만 재생이 시작됩니다.

② 페이지 이동하면 끊기나, 로드 후 자동 재생됩니다.

③ 곡 추가에 유튜브 링크 사용합니다.

④ 플레이어 색상 변경 & 곡 변경/추가 : 티스토리 내에서 불가능. ★메모장 사용★

 

 

사용 전 유의사항 확인 부탁드립니다!

 

 

 

 

 

 

 

②의 경우

 

iframe을 활용하면 페이지를 재생이 이어지지 않을까 했으나…

생각과 달랐던 거 같습니다….

 

+ 유튜브 api를 사용할 때 iframe를 통해 재생하는 게 아니면

광고가 나온다~는 것만 알게 됐네요 ( ㅠ ㅇ ㅠ )

 

 

 

④의 경우

 

티스토리 스킨 편집의 html/css 길이가 길어지는 것이 싫어

html으로 설치 후 불러오는 형식으로 만들었습니다.

 

 

 

 

 

티스토리 유튜브 BGM 플레이어 배포: 소마삐

 

위 포스팅 속 플레이어를 기반으로 수정했습니다.

수정 및 재배포 허락 감사합니다!

 

 

+ 디자인 관련 css/js는 직접 수정했으나

플레이어 기능 관련은 일부 https://claude.ai 사용했습니다.

 

문제 발생 시 내립니다!

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

설치 방법

 

 

 

① 파일 다운로드

 

bgm.html

0.03MB

 

 

 

 

 

 

② 티스토리 블로그 관리 > 스킨 편집 > 우측 상단 [html 편집]

 

 

 

 

 

③ HTML 탭에서 ctrl+F </head>

 

 

 

 

 

④ </head> 아래에 하단 코드 복붙

 

<!-- BGM 플레이어 : https://mmu-u.tistory.com/3 -->
  <iframe src="./images/bgm.html" class="mm-bgm" allow="autoplay" allowfullscreen></iframe>
  
  <script>
    window.addEventListener('message', function(event) {
    // 필요시 수정
    if (event.origin !== 'https://tistory1.daumcdn.net') return;
    
    // 요소 가져오기
    const bgmonElement = document.querySelector('.mm-bgm');
    if (!bgmonElement) return;
    
    // 메시지 처리
    if (event.data.action === 'expand') {
        //bgmonElement.style.transition = 'height 0.3s ease';
        //bgmonElement.style.transition = 'width 0.3s ease';
        bgmonElement.style.width = '224px';
        bgmonElement.style.height = '152px';
        
    } 
    else if (event.data.action === 'minimize') {
        //bgmonElement.style.transition = 'height 0.3s ease';
        //bgmonElement.style.transition = 'width 0.3s ease';
        bgmonElement.style.width = '25px';
        bgmonElement.style.height = '25px';
    }
});
  </script>
<!-- BGM 플레이어 끝-->

 

 

 

 

 

④ CSS 탭 클릭 > 최하단에 아래 코드 복붙

 

/* - - - BGM 플레이어 관련 - - - */
.mm-bgm{
  position: fixed;
  bottom: 15px; /* 우측상단 원하면 bottom을 top 으로 변경 */
  right: 15px;
  z-index: 9999; /* 맨위로 */
  border: none;
}
/* - - - BGM 플레이어 끝 - - -*/

 

 

 

 

 

⑤ 파일업로드 탭 클릭 > +추가 > bgm.html 업로드

 

 

 

 

 

⑥ 적용 버튼 클릭 > 블로그에 들어가 ctrl shift R (강력 새로고침) > 작동 확인

 

정상적으로 작동한다면 입맛에 맞게 수정해봅시다.

 

 

 

 

 

---

 

 

 

 

 

색상 & 플레이리스트 변경 방법

 

 

 

① bgm.html 을 메모장 or 코드 편집 프로그램으로 열기

 메모장  우측 하단의 텍스트 문서(*.txt)를 모든 파일로 변경해야 html 파일 보입니다.

 

 

 

 

 

② 색상 변경

 

ctrl+F : 색상

 

/* - - - 색상 변경 - -  */
    :root{
     --bgm-main: #F5F5F5;
     --bgm-mdark: #D4D4D4;
     --bgm-mdark2: #E6E6E6;
     --bgm-bright: #FFFFFF;
     --bgm-font: #8F8F8F;
}

/* 색상 변경 설명
            
     바로 위에 있는 :root{} 속 # 뒤 6글자를
     원하는 컬러 코드(헥스 코드)로 바꿔주세요.
     
     대소문자 상관 X
            
     1) main : 배경색
     2) mdark : 볼륨쪽 버튼 색상
     3) mdark2 : 진행바
     4) bright : 타이틀 배경+버튼 원 컬러
     5) font : 글씨+버튼 컬러
*/

 

 

위와 같은 부분이 나옵니다.

 

이후에 티스토리 글 없이 수정할 수 있도록 파일 안에 설명을 적어두었습니다.

참고해서 수정해 주세요.

 

 

 

 

 

③ 플레이리스트 수정

 

ctrl+F : 플레이리스트

 

// 플레이리스트 변경
// 여러 곡 추가 가능
   const songs = [
      { id: "SKC_58QzofQ", title: "Rachmaninoff: Prelude Op.23 No.6" },
      { id: "-1Y-KEXoaxA", title: "Chopin: Prelude Op.28 No.21" },
      { id: "Sbow5JoGSFk", title: "Schumann: Variation V" },
      { id: "H98Ms1wex2Y", title: "Pathetique" },
      { id: "nrGQAOFs1p8", title: "None But The Lonely Heart" },

// id 뒤 따옴표 안에 유튜브 링크 중 ★일부 복붙★
// 공유 눌렀을 때 나오는 링크에
// ?si=어쩌고 앞에 적혀있는 ★11글자★

// title은 제목 (플레이어에 보이게 될 제목)

 

 

위와 같은 부분이 나옵니다.

 

마찬가지로 티스토리 글 없이 수정하실 수 있도록 파일 안에 설명을 적어두었…지만!

헷갈리실 분들을 위한 유튜브 링크 따오는 방법!

 

 

 

 

 

 

영상 하단의 공유 버튼을 누르면 링크가 나옵니다.

 

 

 

 

 

 

https ://youtu.be/11글자?si=어쩌고

 

그중에서 11글자만 복사해서 넣으시면 됩니다.

 

 

 

 

 

④ 저장 > 티스토리 블로그 관리 > 스킨 편집 > 우측 상단 [html 편집]

 

 

 

 

 

⑤ 파일업로드 탭 클릭 > 기존에 있던 bgm.html 삭제 후 > bgm.html 새로 업로드

★삭제 과정에서 다른 파일이 함께 클릭되지 않았는지 반드시 확인★

 

 

 

 

 

⑥ 적용 버튼 클릭 > 블로그에 들어가 ctrl shift R (강력 새로고침) > 작동 확인

 

 

 

★ (크롬) 수정사항이 반영 안 되는 경우 ★

 

⑴ 스킨편집이 아닌 블로그에 들어가 ctrl shift R (강력 새로고침)

⑵ 1을 해도 여전할 경우, 시크릿 창으로 블로그에 들어가 확인

 

1을 우선으로 시도해 본 후, 안 될 경우 2로 확인해 주세요.

 

 

 

2에서 반영되어 있는 경우 : 파일 문제가 아닌 캐시 문제로, 시간이 지나면 적용됩니다.

반영되어 있지 않은 경우 : bgm.html을 삭제 후 다시 올린 것인지 / 수정사항이 저장됐는지 확인

 

캐시 및 쿠키 삭제를 하면 ⑵와 같은 상황에서도 바로 적용되나,

각종 사이트에서 자동 로그인이 풀리게 됩니다. [예) 트위터 계정 전부 로그아웃됨]

 

 

 

일부 영상은 링크를 올바르게 가져와도 재생이 안 되기도 합니다.

이 경우 다른 링크로 등록해주세요! (동일한 곡인 다른 영상)

 

 

 

 

 

---

 

 

 

 

 

Q. bgm.html 파일을 컴퓨터에 계속 갖고 있어야 하나요?

 

 

A. 파일업로드로 올리고 나서는 지워도 됩니다.

 

이후에 곡 변경/추가 등 수정하고 싶어진다면

 

 

 

 

파일업로드에서 기존 bgm.html 우클 > 다른 이름으로 링크 저장 > 수정 진행