정보/블로그 운영팁

티스토리 블로그 배경음악 직접 넣기 (초급 버전)

아미넴 2020. 10. 31.
반응형

안녕하세요.

블로그를 하다 보니 은근 배경음악 욕심이 생겨서 한 번 넣어 보았습니다.

 

목차

     

    음악 파일 등록

    먼저 비공개 게시물을 하나 만듭니다.

    그리고 위에 보이는 파일 메뉴를 통해 배경음악으로 넣고 싶은 음악 파일을 업로드 합니다.

     

    그럼 게시물에 다음과 같이 mp3 파일이 등록된 것을 볼 수 있습니다.

     

    그리고 업로드 한 파일의 링크 주소 복사를 해줍니다.

     

    오디오 태그 작성

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

     

    html 편집을 클릭 합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데,

    여기에 실제 동작에 필요한 소스 코드를 작성을 해 보겠습니다.

     

    어차피 컨트롤러는 보이지 않게 할 것이기 때문에 적당한 위치에 작성을 해 줍니다.

    audio 태그를 활용하면 됩니다.

    loop 옵션을 통해 반복 재생이 가능하게 했고,

    autoplay 속성으로 홈페이지에 진입하는 시점에 자동 재생이 됩니다.

    모바일에서는 자동 재생이 되지 않아서 몇 가지 트릭이 필요한데

    시간이 되면 한 번 정리해서 올리도록 할게요 :)

    그리고 '링크 주소 복사'를 통해 얻은 파일 경로를 src 속성에 넣어 주었습니다.

     

     

    스위치 버튼 작성

    그런데 당연히 배경음악이 거슬리는 사람이 있을 겁니다.

    그래서 아래와 같이 배경음악을 끌 수 있는 기능도 한번 만들어 보겠습니다.

     

    지금부터 설명하는 내용은 body 태그 안쪽 맨 아래에 script 태그 안쪽에 작성하셔야 합니다.

     

    먼저 현재 상태를 불러오는 getCurrentBgm 함수를 하나 만들어 보겠습니다.

    로컬스토리지에 play 또는 stop 상태를 저장합니다.

    play 상태 또는 값이 없을 경우 볼륨 0.1 크기로 재생하도록 하였고,

    stop 상태일 경우 볼륨을 0으로 줄였습니다.

    iOS에서는 볼륨 속성이 readonly이므로 적용되지 않습니다.

    대신 muted 속성에 true, false 값을 사용하여 음소거 적용/해제 정도는 하실 수 있습니다.

    그리고 상태에 따라 버튼 문구와 색상을 바꿔 주었습니다.

     

    이어서 toggleBgm 함수를 만들어 보겠습니다.

    먼저 버튼을 클릭했을 경우 반대되는 상태를 로컬스토리지에 저장한 다음,

    getCurrentBgm을 다시 호출하는 형태로 구현을 하였습니다.

    클릭 후에는 버튼에서 포커싱 해제를 시켜 주었습니다.

     

     

    아래는 버튼을 구현한 html 부분입니다.

     

    구현한 css도 공유를 합니다.

     

    기타 참고 사항

    SCM Music Player 와 같은 무료 플레이어 제공 사이트도 있으니 참고 바랍니다.

    www.scmplayer.net/

     

    SCM Music Player - seamless music for your website

    Tumblr Music Player for 2020. SCM Music Player is a free and open source web music player, that brings a seamless music experience to your website. Support Tumblr, Blogger, Weebly, Tistory and more. Continous Playback Cross Pages - Seamless playback throug

    www.scmplayer.net

    저는 티스토리 스킨과 충돌나는 부분이 있어 사용하지 않고 있습니다.

     

    오픈 소스라서 소스도 공개되어 있네요.

    github.com/cshum/scm-music-player

     

    cshum/scm-music-player

    Seamless music for your website. HTML5 music player with continuous playback cross pages. - cshum/scm-music-player

    github.com

    나중에 여유 생기면 티스토리에 맞게 수정하여 적용해 봐도 좋을 것 같습니다.

     

    좀 더 고급스럽게 만들어 보고 싶으신 분은 다음 포스팅을 추가로 봐주시길 바랄게요.

     

    #배경음악넣기_고급버전

    sangminem.tistory.com/211

     

    티스토리(TISTORY) 블로그 배경음악(BGM) 직접 넣기 (고급 버전)

    #배경음악넣기_초급버전 sangminem.tistory.com/84 티스토리(TISTORY) 블로그 배경음악(BGM) 직접 넣기 (초급 버전) 안녕하세요. 블로그를 하다 보니 은근 배경음악 욕심이 생겨서 한 번 넣어 보았습니다. 1.

    sangminem.tistory.com

    참고 하세요 :)

    반응형
    그리드형(광고전용)

    댓글46

    • 김민수 팀장 2020.11.15 19:03 신고

      아 너무 어려움 ㅋㅋㅋㅋ
      답글

    • 익명 2020.11.17 02:39

      비밀댓글입니다
      답글

      • 익명 2020.11.17 09:00

        비밀댓글입니다

      • 익명 2020.11.17 09:02

        비밀댓글입니다

      • 김민수 팀장 2020.11.17 14:28 신고

        아항! 무슨말인지 알게습닏
        컴터 앞에 앉으면 바롳해봐야되겠네요
        감사합니다

      • 아미넴 2020.11.17 14:36 신고

        ㅎㅎㅎ 꼭 성공하시길 바랄게요!
        저도 이따 시간되면 좀 더 알아보기 쉽게 내용 수정 좀 해야겠네요 :)

      • 김민수 팀장 2020.11.17 16:20 신고

        성공 했어요 !!~
        ㅋㅋㅋ 노래 나와요 ㅋㅋ
        좋아요 !~
        감사합니다
        일단 노래 나오는 것까지만 했구요
        플레이ON OFF 는 계속 공부해서
        해보려고요 ^^
        감사합니다 많이 배워요

      • 아미넴 2020.11.17 18:54 신고

        오 들어가 봤는데 잘 나와요 ㅋㅋ 굿굿
        제가 다 뿌듯하네요 ㅎㅎ
        파이팅 입니다!!

      • 김민수 팀장 2020.11.17 20:16 신고

        감사합니다 ㅋㅋ
        고마워요 ㅋㅋㅋ

      • 김민수 팀장 2020.11.17 20:21 신고

        상미님 근데 이거
        HTML에서 소리 조절은 않된느 건가요?
        최대한 작게 나오게 하고 싶은데..
        방법있으면 가르쳐 주세용 ㅋㅋ

      • 아미넴 2020.11.17 20:32 신고

        $('#bgm')[0].volume = 0.1;
        이게 볼륨 10%로 하겠다는 뜻인데 일단은 고정 값으로 하시고,
        조절하는 건 조만간 포스팅 해서 알려 드릴게요~
        이 게시글은 초급자용 ㅎㅎ

      • 아미넴 2020.11.17 21:12 신고

        https://sangminem.tistory.com/211

        이 게시글 봐 주세요 ㅎㅎ
        근데 아마 어려우실 수도 있어요 ㅠ

      • 김민수 팀장 2020.11.17 23:13 신고

        어려워요 ㅋㅋㅋ
        샹미님 글 적으신거 하나하나
        배워가며 해봐야조 ㅋㅋ

      • 김민수 팀장 2020.11.17 23:23 신고

        <audio loop autoplay id='bgm'
        $('#bgm')[0].volume = 0.1; src='https://blog.kaka

        이렇게 하면 되는 건가요?

      • 아미넴 2020.11.17 23:23 신고

        그런 의지만 있으시다면 제가 언제든 알려 드립니다!
        이래봬도 교사 자격증도 있거든요 ㅋㅋ

        아 잠시만요.. ㅋㅋ 고급 버전에만 수정하고 여긴 수정을 안 했었네요

      • 김민수 팀장 2020.11.17 23:26 신고

        <audio loop autoplay id='bgm'
        $('#bgm')[0].volume = 0.1; src='https://blog.kaka

        이렇게 하는게 맞나요?
        근데 소리가 안작아짐 ㅠㅠ

      • 아미넴 2020.11.17 23:32 신고

        방금 글 살짝 수정했거든요~

        지금부터 설명하는 내용은 body 태그 안쪽 맨 아래에 script 태그 안쪽에 작성하셔야 합니다.

        라고 쓴 부분인데
        '3. 스위치 버튼 작성'에 보면 있어요!

        촌딱님 같은 경우는

        <script>
        $('#bgm')[0].volume = 0.1;
        </script>

        이라고만 작성하면 될거 같아요!

      • 김민수 팀장 2020.11.17 23:39 신고

        <script src="./images/script.js"></script>
        </body>
        </html>
        <!-- 배경음 -->
        <audio loop autoplay id='bgm' src='https://blog.kakaocdn.net/dn/cSWpaj/btqNDpq
        </audio>
        저는 지금 이렇게 되어 있는데요...
        스크립 안에 넣으시라고 했는데
        머가좀 틀려요...

      • 아미넴 2020.11.17 23:43 신고

        아.. 제 설명이 많이 부족하네요 ㅠ
        아래 그대로 해보세요~

        (......기존 로직 생략)
        <!-- 배경음 -->
        <audio loop autoplay id='bgm' src='파일경로'></audio>
        <script src="./images/script.js"></script>
        <!-- 추가부분 시작 -->
        <script>
        $('#bgm')[0].volume = 0.1;
        </script>
        <!-- 추가부분 끝 -->
        </body>
        </html>


        </body></html> 위쪽에 작성하셔야 하는게 핵심입니다 ㅎㅎ

      • 김민수 팀장 2020.11.17 23:45 신고

        아니에요 ㅠㅠ
        제가 학교 다닐때부터
        이해력이 딸렸어요
        이렇게 친절하게 가르쳐 주시는데
        제가 못따라 가는게요
        너무 감사해요!~
        고맙습니다.

      • 김민수 팀장 2020.11.17 23:50 신고

        됐어요 !!~~
        너무 감사합니다 !~
        조금더 공부해서 초급말고
        고급으로다가 도전 해보깨요
        너무 감사합니다!!

      • 아미넴 2020.11.17 23:52 신고

        다행이에요 ㅎㅎ
        다음에도 열심히 알려 드릴게요!

    • $#12@#6 2020.11.17 14:33 신고

      좋은 정보 감사합니다.
      답글

    • 해리캐인 2020.12.11 16:14

      안녕하세요. 좋은정보 감사합니다.
      혹시 네이버 블로그에는 적용이 안되나요?
      네이버에는 스킨편집이라는게 없어서요.
      답글

      • 아미넴 2020.12.11 16:18 신고

        안녕하세요! 방문 감사드려요 :)

        네이버 블로그는 완성도가 높고 사용자 유입이 유리한 반면에 스킨 편집이 자유롭지가 못합니다 ㅠ
        결론은 아쉽게도 불가능 하다는 얘기구요..

        티스토리를 이용하는 주 된 이유 중 하나가 스킨 편집을 마음대로 할 수 있다는 점이거든요.
        또한 구글 애드센스 광고를 띄울 수 있다는 점도 큰 매력 중 하나 입니다 ㅎㅎ

        참고가 되셨으면 해요~

    • 익명 2021.01.06 02:31

      비밀댓글입니다
      답글

    • 비트갱 2021.01.06 12:03 신고

      잘쓰겠습니다 ㅎㄹ
      답글

    • 익명 2021.04.17 01:03

      비밀댓글입니다
      답글

      • 아미넴 2021.04.17 06:03 신고

        안녕하세요. 페이지 전환 전에 로컬스토리지에 재생시점을 저장하여 전환 후에 다시 불러와서 그 시점부터 다시 재샹하면 되는데 고급버전에 방법이 나와있으니 참고 바랍니다.

        https://sangminem.tistory.com/211

        프레임을 나누어 재생을 끊기지 않게 하는 방법도 있긴한데 티스토리에서도 될 지 모르겠네요. 다음에 시간되면 시도해 볼게요 ㅎ

    • UkHistory 2021.05.03 23:33 신고

      감사합니다~~ㅎㅎ
      </button>
      </div>이 빨갛게 되면 에러난건가용?? 버튼이 안만들어져요 ㅠㅠ
      답글

    • 익명 2021.08.23 15:43

      비밀댓글입니다
      답글

      • 아미넴 2021.08.23 20:47 신고

        안녕하세요~ 본문에 소개된 고급버전 별도 포스팅 글을 이해하시면 이어서 플레이 할 수 있습니다
        미넴스킨을 사용하셔도 가능하긴 합니다 ㅎㅎ

    • 에르나 2021.12.26 13:09 신고

      선생님 제가 초급버전 넣는거까지는 성공했는데 카테고리랑 글 누를때마다 노래가 다시 시작하는거는 어떻게 고칠 수 있을까요? ㅠㅠ 전 노래가 끊기지 않고 쭉 이어졌으면 좋겠는데요
      답글

      • 아미넴 2021.12.27 19:13 신고

        안녕하세요~ 그건 고급버전을 참고해서 적용하셔야 합니다. 쉽지는 않을거예요 ㅠ
        https://sangminem.tistory.com/211

    • bome 2021.12.27 16:03

      정보 감사합니다.
      초보라 힘들긴 했는데..진도 pc에서 나오는거까지 완료했네요.^^
      답글

    • leader_crew 2021.12.31 23:52 신고

      SCM으로 하긴 했는데 이건 이거대로 좋네요! 나중에 꼭 해볼께요!
      답글

    • 익명 2022.02.26 09:07

      비밀댓글입니다
      답글

    • ^$!*?? 2022.04.26 16:35 신고

      죄송합니다만, 님이 남겨주신 코드를 순서대로 붙여넣기만 하면 되는지요? 너무 초보라 죄송합니다.
      답글

    💲 추천 글