티스토리 블로그 배경음악 넣어보기 / 반성공(?)

일단은 반성공을 했다... 블로그 맨 밑 부분을 보면 플레이어가 떡하니 있는데

 

위치가 뭐가 이상하지 않은가? 싶었다. 그래서 플레이를 눌러보니. . . .

 

ㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

밑에 글 표시 부분을 가려버린다. ㅋㅋㅋㅋ ㅠㅠ

css 파일 열어보고 (웹 쪽 지식은 전무...) 유튜브 보면서 코드 수정해봐도 전혀 안먹힌다... 앨범 자체를 왼쪽으로 옮겨야 하는데 이 글을 보고 있는 고수 분들이 있다면 댓글로  포스팅이나 간단하게 알려달라 ㅠㅠ

그래도 노래는 엄선해서 고른 만큼 정말 좋으니 한번쯤 다 들어보길 추천한다. 참 이게 뭐라고...

 

---

사실  단순히 추가하는 것은 그리 어렵진 않다.!

나처럼 디자인 욕심이 있어서 예쁜 플레이어를 그대로 박고 싶은 경우에는 좀 어려울 수도 있는데  그냥 음악이 나오게만 하려면 그다지 어렵진 않다. 단순히 음악이 나오게 하는 방법은 다른 사람들의 포스팅에 아주 잘 설명되어있으니 나는 그들의 포스팅을 조금 요약해서 정리해보겠다.

 

그전에 먼저 내가 추가한 방법들을 포스팅하려 한다.

 

https://codepen.io/following

CodePen

 

 

먼저 CodePen이라는 사이트는 웹 쪽에서 디자인 좀 잘하는 사람들이 자신의 결과물들을 올리는 곳인데 유료버전도 있지만 내가 사용한 무료 버전들도 존재한다. 먼저 가서 키워드들을 검색해보자 예를 들면 달력을 사용한다고 쳐보자!

 

 

https://codepen.io/Calleb/pen/GROMBQO

Days (codepenchallenge)

여기에 들어가면 HTML, CSS, JS 소스코드들이 모두 공개되어있다! (무료 버전만. 유료버전은 자세하겐 x)

자신이 웹 개발 지식이 어느 정도 있다고 한다면 이들의 디자인을 참고로 해서 편집하면서 사용해도 된다. 하지만 난 전무하기 때문에 따로 공부를 해서 해야 하는 상황이긴 하다 ㅎㅎ... 언젠간 나도 기깔나는 스킨을 하나 만들고 싶다.

 

밑에는 내가 원본에서 2차로 편집한 플레이어 소스코드다.

 

 

 

https://codepen.io/zerostar0809/pen/oNddPjw

Music Player | Audio Player 🎵

---

 

여기서부턴 똑같다. 먼저 티스토리 블로그 관리를 들어가서 스킨 편집을 클릭하자.

 

 

 

 

 

이렇게 들어가면..

 

html 편집을 클릭하면 이제 코드들이 나온다.

예쁜 스킨을 만들어 주신 상우정 님께 다시 한번 감사드린다.

 

https://pronist.dev/5

hELLO 티스토리 스킨을 소개합니다.

---

코드를 적용시킬 때는 위치에 따라 다른데 나는 가장 맨 밑에 하기를 원해서    (이곳) </body? </html>에 적용했다.

 

css 적용은 위치 상관없이 적용시켜도 무방하다. 다만 나중에 헷갈릴 수도 있어서 맨 밑에 적용했다. 사실 그냥 css 파일 형태로 불러오는 것처럼 해서 할 수도 있는데 귀찮아서 그렇겐 안 했다.

 

마지막으로 플레이어의 기계장치 역할을 하고 있는 js파일 (자바스크립트) 적용 방법은 위에 보는 것처럼 코드를 입력하면 되는데. 그전에 한 가지 작업을 해야 한다. 

 

 

먼저 파일 업로드를 해야 하는데 HTML, CSS 편집 옆에 파일 업로드를 누르고 내가 넣고 싶은 js 파일을 넣으면 된다. 그 후

  <script src="./images/XXXXX.js"></script>

xxxxx는 원하는 파일의 이름이다. 확장자를 빼놓고 이름만 입력하면 된다. 자세하게 더 알고싶으면 이곳으로 가서 참고하시라.

 

 

---

 

728x90

나는 다 모르겠고 그냥 노래만 나오면 된다.

고 하는 분들은 이렇게 하면 된다.

 

 

1. 버튼 같은 게 전혀 없는 버전.

 

먼저 틀고 싶은 음악을 티스토리에 비공개로 저장하자. 나 같은 경우는 이렇게 했다.

 

 

이 파일에 오른쪽 클릭을 하면 링크를 얻을 수 있다. 그 링크를 복사해서 HTML 편집으로 가지고 오자.

 

그러고 난 후 아까와 마찬가지로(장소도 똑같이) HTML 편집을 이용하면 된다.

 

<audio loop autoplay id='bgm'
	src="복사한 링크 주소" </audio>
    <script> $('#bgm')[0].volume = 0.1; </script>

autoplay는 말 그대로 블로그에 진입하면 자동으로 음악이 나오는 것. 그리고 밑에 볼륨 0.1은 10%를 뜻한다.

만약 위에 플레이어가 거슬리면 이것으로 갈아탈 예정이다. ㅠ

 

 

 

2. 버튼(On/Off), 여러 가지 음악, 간단한 디자인을 원하는 경우.

가장 간단한 건 SCM Music Player가 있다. 음악 넣는 검색을 해봤다면 한 번쯤 봤을 플레이어 사이트다.

 

https://www.scmplayer.net/

SCM Music Player - seamless music for your website

이걸 이용해서 만들고 싶다면 이곳으로 가서 참고하자.

 

 

3. 버튼(On/Off), 여러 가지 음악, 화려하고 예쁜 디자인, 통통 튀는 애니메이션 효과 등을 원하는 경우.

 

이런 경우는 맨 위로 돌아가서 엄청난 삽질을 하자.

나는 전무해서 그런데 조금만 공부해보면 바로바로 원하는 것들을 따와서 사용할 수 있을 것 같다.

https://codepen.io/following

CodePen