정보/블로그 운영팁

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

변태 개발자 아미넴 2020. 11. 17.

잠깐! 이 포스팅은 HTML, CSS, JavaScript 기초가 있으신 분들 대상으로 작성되었습니다.

 

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

sangminem.tistory.com/84

 

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

안녕하세요. 블로그를 하다 보니 은근 배경음악 욕심이 생겨서 한 번 넣어 보았습니다. 1. 음악 파일 등록 먼저 비공개 게시물을 하나 만듭니다. 그리고 위에 보이는 파일 메뉴를 통해 배경음악

sangminem.tistory.com

이해가 어려우신 분은 위 링크로 이동하셔서 초급버전이나 SCM Music Player로 적용해 보시길 바랄게요 :)


안녕하세요.

 

이번에는 초급 버전을 수정하여 조금 더 많은 기능을 넣어 보려고 합니다.

일단 동일하게 시작해 보겠습니다.

 

제안) 미넴 스킨을 이용하시면 배경음악을 쉽고 빠르게 이용하실 수 있습니다!

친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법

 

친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방

기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

sangminem.tistory.com

 

목차

     

    음악 파일 등록

     

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

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

     

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

     

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

     

    오디오 태그 및 버튼 작성

     

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

     

     

    html 편집을 클릭 합니다.

     

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

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

     

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

    <!-- 배경음악 태그 -->
    <audio id='bgm' muted="true" autoplay="true"></audio>

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

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

    muted 속성을 통해 최초 상태는 음소거로 두었습니다.

     

    블로그 상단에 html 태그를 이용하여 배경음악 재생에 필요한 버튼 몇 가지 만들었습니다.

    <!-- 배경음악 켜기/끄기 -->
    <div id="bgm-box" class="bgm-box paused">
        <button class="bgm-btn" onclick="nextBgm()">
            [♬ <span id="current-bgm"></span>]
        </button>
        &nbsp;
        <button class="bgm-btn" onclick="bgmVolume('+')">
            [ + ]
        </button>
        &nbsp;
        <button class="bgm-btn" onclick="bgmVolume('-')">
            [ - ]
        </button>
        &nbsp;
        <button class="bgm-btn" onclick="toggleBgm()">
            [<span id="bgm-status">끄기</span>]
        </button>
    </div>

    onclick 속성에 앞으로 작성할 메서드를 먼저 입력해 놓았습니다.

     

    구현한 CSS도 공유하겠습니다.

    .bgm-box {
        display:flex;
        margin:5px;
        vertical-align:middle;
        justify-content: flex-end;
        animation-duration: 2s;
        animation-name: fade-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    
    .bgm-btn {
        color: #74a150;
        text-align: right;
        font-family: 'Gamja Flower';
    }
    
    @keyframes fade-in-out {
        from {
            opacity: 1.0;
        }
    
        to {
            opacity: 0.5;
        }
    }
    
    .paused {
        -webkit-animation-play-state: paused !important;
        -moz-animation-play-state: paused !important;
        -o-animation-play-state: paused !important; 
        animation-play-state: paused !important;
    }

     

    모두 적용한 다음 화면에서 확인을 해 보면 다음과 같습니다.

     

    디자인이 마음에 들지 않는다면 원하는 형태로 만드시면 됩니다 ㅎㅎ

    아무튼 잘 반영 되었군요.

     

     

    자바스크립트 작성

     

    body 태그 안쪽 제일 하단 script 태그에 다음과 같이 작성을 합니다.

    먼저 음악 재생에 필요한 변수 몇 가지를 선언해 보겠습니다.

    var myBgm = $('#bgm')[0];
    var bgmSource = [
        {title: '제목 1',
         src: '복사한 링크 주소 1'} 
       ,{title: '제목 2',
         src: '복사한 링크 주소 2'}
    ];
    var saveIndex = window.localStorage.getItem('current-bgm-index');
    var currentIndex = saveIndex?Number(saveIndex):Math.floor(Math.random()*bgmSource.length);
    var currentVolume = Number(window.localStorage.getItem('current-bgm-volume'))||0.1;
    var bgmStart = false;
    var bgmPlaying = false;

    일단 myBgm 변수에 audio 태그를 담습니다.

    그리고 bgmSource 변수에 업로드 한 파일 경로를 원하는 만큼 추가하여 줍니다.

    로컬 스토리지를 통해 현재 재생 중인 bgm 인덱스 정보를 저장하였고

    값이 없을 경우 랜덤으로 한가지 가져 오도록 하였습니다.

    볼륨 값도 저장하여 재방문시에도 유지하도록 하였으며 값이 없을 경우 최초 0.1로 설정하였습니다.

    나머지는 플레이에 필요한 제어 변수입니다.

     

    그리고 음악 재생 제어를 위해 기본적인 상태 저장 함수를 만들어 보겠습니다.

    function saveBgmStatus() {
        if(Date.now() - Number(window.localStorage.getItem('visit-time')) < 1000*60*60 || window.localStorage.getItem('visit-time') == null) {
            window.localStorage.setItem('current-bgm-index', currentIndex);
            window.localStorage.setItem('current-bgm-time', myBgm.currentTime);			
        } else {
            window.localStorage.setItem('current-bgm-index', Math.floor(Math.random()*bgmSource.length));
            window.localStorage.setItem('current-bgm-time', '0');				
        }
        window.localStorage.setItem('visit-time', Date.now());
        window.localStorage.setItem('current-bgm-volume', currentVolume);
    }

    먼저 마지막 방문 시간이 1시간이 지나지 않았는 지를 체크하여

    현재 재생 목록 인덱스와 현재 재생 중인 곡의 재생 시간을 로컬스토리지에 계속 유지합니다.

    그렇지 않으면 이 두가지를 초기화 시켜 주도록 하였습니다.

    visit-time에는 현재 시간을 입력하였고 볼륨 값은 시간에 상관없이 현재 값을 저장시켜 주었습니다.

     

    그럼 현재 bgm을 셋팅해 보겠습니다.

    function getCurrentBgm() {
        $('#current-bgm').html(bgmSource[currentIndex].title);
        if(window.localStorage.getItem('current-bgm') == 'stop') {
            myBgm.pause();
            $('#bgm-status').html('켜기');
            $('.bgm-box').addClass('paused');
            bgmStart = false;
            bgmPlaying = false;
        } else {
            if(!bgmPlaying){
                myBgm.src = bgmSource[currentIndex].src;
                myBgm.muted = true;				
                var promise = myBgm.play();
                if (promise !== undefined) {
                    promise.then(function(){
                        bgmStart = true;
                        bgmPlaying = true;
                        var saveBgmTime = (Number(window.localStorage.getItem('current-bgm-time'))||0.0)-0.3;
                        myBgm.currentTime = (saveBgmTime>0)?saveBgmTime:0.0;
                    }).catch(function(error){
                        console.log(error);
                        bgmStart = false;
                        bgmPlaying = false;
                    });
                }
            }
    
            $('.bgm-box').removeClass('paused');
            $('#bgm-status').html('끄기');
        }
    }

    먼저 id가 current-bgm인 div 태그에 현재 재생 중인 음악의 제목을 표시합니다.

    그리고 현재 bgm 상태를 가져와서 stop 상태 라면 audio 태그 기능인 일시정지(pause)를 하고

    id가 bgm-status인 div 태그에 값을 켜기로 바꿔 줍니다.

    그리고 bgmStart 및 bgmPlaying 변수를 모두 false로 초기화 시켜 주었습니다.

    상태가 play이고 재생 여부를 확인하여 재생 중이 아니면 현재 재생 중인 인덱스 값을 가져와

    해당하는 링크 주소를 audio 태그에 대입해 줍니다.

    그리고 일단은 음소거 상태를 만들고 play 메서드를 호출한 뒤에

    반환되는 promise 객체를 통해 성공했을 경우에 실행되는 콜백 함수 내에서

    bgmStart, bgmPlaying 변수를 모두 true로 변경하고

    로컬스토리지에 저장 되어있는 재생 중인 시간을 가져와서 0.3초 빼준 값을 대입해줍니다.

    페이지 이동이 일어난 경우에도 연속성을 주기 위함 입니다.

    마지막으로 id가 bgm-status인 div 태그 값을 끄기로 바꿔 주었습니다.

     

    그리고 음악 제목이 표시되는 곳을 누르면 다음 곡이 재생되도록 만들기 위해 함수를 하나 작성하겠습니다.

    function nextBgm() {
        bgmPlaying = false;
        currentIndex = (currentIndex + 1)%bgmSource.length;
        window.localStorage.setItem('current-bgm-index', null);
        window.localStorage.setItem('current-bgm-time', null);
        getCurrentBgm();
        $('.bgm-btn').blur();
    }

    먼저 bgmPlaying 값을 false로 만들어 줍니다. (재생 중이 아님을 의미)

    그리고 다음 인덱스 값을 계산하여 가져오고

    로컬스토리지에 저장된 현재 인덱스 및 재생 중인 시간을 초기화 시켜 줍니다.

    그리고 다시 위에서 작성한 getCurrentBgm 메서드를 호출해 줍니다.

    그렇게 하면 정상적으로 다음 곡이 재생됩니다.

     

    음악을 켜고 끌 수 있는 토글 함수도 하나 만들어 보겠습니다.

    function toggleBgm() {
        if(window.localStorage.getItem('current-bgm') == 'stop') {
            window.localStorage.setItem('current-bgm', 'play');
        } else {
            saveBgmStatus();
            window.localStorage.setItem('current-bgm', 'stop');
        }
        getCurrentBgm();
        $('.bgm-btn').blur();
    }

    현재 재생 상태가 stop이라면 그 반대인 play 값을 저장하고

    play일 경우에는 stop을 저장하고 현재 상태까지 저장해 줍니다.

    그리고 getCurrentBgm 메서드를 호출해 줍니다.

     

    정상적으로 동작하지 않는 브라우저가 있어서 약간의 제한을 둬 보겠습니다.

    function browserCheck(){
        if(navigator.userAgent.toLowerCase().indexOf('chrome') > 0) {
            return true;
        } else {
            return false;
        }
    }
    
    if(!browserCheck()) {
        $('#bgm-switch').css('display', 'none');
    }

    chrome 계열의 브라우저가 아니라면 켜고 끄는 버튼이 정상 동작하지 않는 경우가 있어 보이지 않도록 하겠습니다.

    대신 볼륨 조절 함수를 통해 음소거 및 음소거 해제 상태만으로 동작하게 하겠습니다.

    iOS 같은 경우 물리적인 버튼으로만 볼륨 조절이 되기 때문에 한계가 있습니다.

     

    볼륨 조절 함수도 만들어 보겠습니다.

    function bgmVolume(type) {
        if(type == '+') {
            if(currentVolume > 1.0) {
                currentVolume = 1.0;
            } else {
                currentVolume += 0.1;
            }
        } else {
            if(currentVolume < 0.0) {
                currentVolume = 0.0;
            } else {
                currentVolume -= 0.1;
            }
        }
        if(browserCheck()) {
            myBgm.volume = currentVolume;
        } else {
            if(type == '+') {
                myBgm.muted = false;
                myBgm.play();
            } else {
                myBgm.muted = true;
                myBgm.pause();
            }
        }
        $('.bgm-btn').blur();
    }

    type이 +일 경우 볼륨 크기를 0.1씩 늘리고 -일 경우 0.1씩 줄이는 단순한 기능입니다.

    좀 더 세밀하게 하고 싶으신 분은 그 값을 더 작게 하면 될 것 같습니다.

    브라우저 체크를 하여 chrome 계열일 경우만 볼륨 값을 대입해 주고

    위에 언급한 대로 나머지는 음소거/음소거 해제로만 제어 하였습니다.

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

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

     

     

    그리고 모바일 환경에서는 자동 재생이 되지 않는 경우가 있어서 약간의 트릭을 활용해 보겠습니다.

    function bgmStartHandler(e) {
        if(!bgmStart) {
            bgmStart = true;
            getCurrentBgm();
        } else {
            if(bgmPlaying) {
                saveBgmStatus();
            }
        }
    }
    
    $(window).on('click', bgmStartHandler);
    $(window).on('touchstart', bgmStartHandler);
    $(window).on('touchend', bgmStartHandler);
    
    $(window).on("beforeunload",function(e){saveBgmStatus();});	
    $('#bgm').on('ended',function(e){nextBgm();});
    
    $('#bgm').on('playing', function(e){
      myBgm.volume = currentVolume;
      myBgm.muted = false;
    });

    특정 브라우저 및 특정 모바일에서는 사용자의 상호작용을 통해서만 재생이 되도록 하는 규정이 적용되어 있습니다.

    따라서 클릭이나 터치를 통해 명시적인 재생을 호출해야 음악이 재생이 된다고 하네요.

    그래서 브라우저 전체에 click 및 touch 이벤트를 감지하여

    어느 곳을 클릭(또는 터치)를 하더라도 음악이 재생될 수 있도록 한 부분입니다.

    브라우저를 떠나기 전에도 이벤트리스너를 통해 현재 음악 재생 상태를 저장하지만

    일부 동작하지 않는 브라우저가 있어서 클릭(또는 터치)시에도 음악 현재 상태를 저장할 수 있도록 하였습니다.

    그리고 음악이 끝난 것을 감지하여 nextBgm 메서드를 호출하도록 하였습니다.

    마지막으로 음악이 재생 중인 상태를 감지하여 현재 볼륨 셋팅 및 음소거 해제 하도록 하였습니다.

    이렇게 해야 음악이 버벅대는 느낌 없이 깔끔하게 들리더라구요. 꼭 따라하지 않으셔도 됩니다.

     

    기타 참고 사항

     

    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

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

     

    참고 하세요 :)

    BIG

    댓글64

    • 이전 댓글 더보기
    • BGM 듣기 좋아요. 열심히 포스팅 해주신건 감사하지만
      저작권 때문에 배경음악 넣기가 좀 조심스럽네요.
      답글

      • 감사합니다 ㅎㅎ
        저도 그 부분이 염려되지 않은 건 아니지만 개인 블로그에 제재가 들어올 확률은 거의 없어 보이고 만에 하나 제재가 들어온다 하더라도 경고 없이 바로 법적 책임을 묻지는 않을거 같아요~
        그래도 걱정 되신다면 그냥 안 하거나 저작권 문제없는 음원을 등록하는게 나을거 같습니다 :)

    • 크... 컴퓨터 잘 하시는 거 넘 대단하십니다ㅜㅜ 티스토리 하면서 html접한 저는 조금만 뭐가 잘못 된것 같다! 하면 눙물부터 나오네요ㅠㅠㅋㅋ
      답글

    • 알 수 없는 사용자 2020.11.18 10:50

      좋은 포스팅 잘 보고 갑니다.
      답글

    • 삼복이 2020.11.18 12:07 신고

      꿀팁이네요! 맞구독 하고 자주 소통해요~
      답글

    • Hi Hello, Daily 2020.11.20 21:06 신고

      너무 좋네요!!
      따라 해봤는데, 저는 페이지 이동이 되거나 새로고침을하면 노래가 끊기고,
      빈 배경을 클릭하면 이어져 나오고있네요.

      마지막스크립트 내용이 안끊기게 하는거 같은데. 이상하게 따라해봐도 잘안되네요.

      뭐가문제일까요.. 우측 사이드바 쪽에 배치해뒀어요..
      답글

      • getCurrnetBgm 함수에서 제어를 합니다.

        var saveBgmTime = (Number(window.localStorage.getItem('current-bgm-time'))||0.0)-0.3;
        myBgm.currentTime = (saveBgmTime>0)?saveBgmTime:0.0;

        이 부분이 로컬스토리지 변수에 현재 재생 시간을 저장하고 다시 불러오는 부분인데 혹시 불러올 때 문제가 있는지 한 번 확인해 보시면 될 듯 합니다 :)

        새로고침 할 때는 브라우저에 따라
        $(window).on("beforeunload",function(e){saveBgmStatus();});
        이 부분 이벤트가 호출이 되지 않아 저장이 안 되는 경우도 간혹 있는데 그래서 현재 재생 시점이 저장이 안 될 수도 있을 것 같구요

        페이지 이동 시에는 클릭이 한 번 발생하기 때문에 클릭 이벤트 감지에 의해서 현재 재생 시간이 로컬스토리지 변수에 저장이 되어야 하는데 이 부분도 혹시 잘못된 부분이 있는지 보시면 될 것 같아요~

      • 혹시 모르니 audio 태그를

        <audio id="bgm" crossorigin="anonymous" muted="true" autoplay="true"></audio>

        이렇게 변경해 보세요~

        그래도 안 되시면 크롬 브라우저에서 F12를 누르셔서 제 블로그에 반영되어있는 소스도 보시고 다른 부분이 있는지 비교해 보세요~

    • 브로콜ㄹI 2020.11.20 22:36 신고

      블로그 왤케 귀엽나요 ㅎㅎ
      클릭할 때마다 나오는 효과가 너무 귀여운거 같아요 ㅋㅋ

      아, 그리고 혹시 ..

      저는 아예 다른 스킨을 사용하고 있는데, 지금 소개해주신 방법대로 적용해도 똑같이 적용이 될까요~?
      답글

      • 네네 ㅎㅎ 제 생각에는 배경음악은 시각적으로 드러나는 효과를 내는 부분은 아니기 때문에 아마 다른 스킨에서도 거의 동일하게 적용하면 될 것 같아요~
        칭찬 감사합니다 :)

    • 브로콜ㄹI 2020.11.20 22:44 신고

      답변 감사합니다!!

      이것 저것 검색하다가 우연히 들어오게 됐는데,
      정말 좋은 정보 많은것 같습니다!!ㅎㅎ

      살포시 구독 버튼 누르고 갑니당 ㅋㅋ
      답글

    • 브로콜ㄹI 2020.11.20 22:50 신고

      감사합니다~~!!^^
      답글

    • Hi Hello, Daily 2020.11.20 22:55 신고

      어렵네요..
      답변해주신 내용들 다 비교해봤지만 뭐가 틀렸는지 모르겠어요.
      오디오 태그에는 crossorigin="anonymous" 이거 넣었을때 작동을 안하네요.
      자동재생은 원치않아 뺏고요.. 답변 잘 해주셨는데 제가 못따라가나 봅니다.
      답글

      • 혹시 처음에 코딩을 실수하셨거나 미완성 상태로 적용을 하신 경우 로컬스토리지 변수에 잘못된 값이 들어갈 수가 있는데 그러면 로직을 정상적으로 타지 못해서 안 되고 있을 가능성도 있습니다.
        콘솔창에서 값을 확인하셔서 보완 코드를 추가 작성하시거나 로컬스토리지 변수를 초기화 하신 후에 다시 해보시는 걸 추천드립니다.

    • Hi Hello, Daily 2020.11.20 23:07 신고

      그렇군요.. 어쩔수 없이 그냥 이 상태로 써야겠어요..

      아 그리고, 이전 포스팅에 웹폰트 글꼴변경하는 소스 써도 될까요?!
      답글

    • Hi Hello, Daily 2020.11.20 23:11 신고

      너무 감사합니다!!
      페이지 이동될때 끊기는 현상은 계속 찾아봐야겠어요.
      자주놀러올께요!!
      답글

    • (대표) 2020.12.10 03:40 신고

      어렵지만 주말에 시도를 해봐야겠어요.. 좋은글 감사합니다.
      답글

    • 2021.03.07 17:10

      비밀댓글입니다
      답글

      • 안녕하세요.
        브금을 이어서 재생하는 방법은 이 글에 잘 나와 있습니다. 천천히 참고하셔서 처음부터 다시 적용해 보세요.
        적용이 그리 간단하지는 않아서 지금 말씀하신 내용만으로 판단하여 문제점을 말씀드리긴 어려워 보입니다.

      • 2021.03.07 21:28

        비밀댓글입니다

    • 2021.04.21 20:50

      비밀댓글입니다
      답글

      • 아 네 안녕하세요~ 제 스킨 소스는 아래 게시물에서 받으실 수 있습니다. 받으셔서 common.js 참고하시면 됩니다.

        https://sangminem.tistory.com/530

      • 2021.04.21 21:13

        비밀댓글입니다

      • 네 맞습니다. 같은 형태로 작성하시면 될 것 같아요~
        스킨에 맞게 커스터마이징 한 거라서 완전 그대로는 사용할 수 없을 수도 있습니다.

      • 2021.04.22 13:10

        비밀댓글입니다

      • 아 네 큰 문제는 없어 보이는데.. 왜 안 되는지는 HTML에 작성한 태그와도 관련이 있어서 자바스크립트 부분만 보고 판단하기는 어렵습니다.
        그리고 어떻게 안 되는지 무슨 오류가 발생하는 지 등을 알려 주셔야 도움을 드릴 수 있을 것 같아요.

      • 2021.04.22 19:03

        비밀댓글입니다

      • 디버깅 해가면서 봐야하는데 한계가 있네요.
        일단 의심되는 부분 알려 드릴게요.

        var saveIndex = window.localStorage.getItem('current-bgm-index');

        여기 값이 잘못되어 있는데 아래와 같이 바꿔서 적용해 보세요.

        var saveIndex = window.localStorage.getItem('current-bgm-index') == "null"?null:window.localStorage.getItem('current-bgm-index');

      • 2021.04.23 14:52

        비밀댓글입니다

      • 콘솔창 보면 에러가 많이 나고 있네요 먼저 에러부터 잡아보세요

        그리고 서근님 블로그 보면 여러 무료 스킨의 코드 일부를 가져다 쓰신 것 같은데 다른 사람이 짠 소스를 참고하는건 좋지만 그대로 쓰는 건 예의가 아닐 수 있습니다.
        무료 스킨을 사용하는 것과 코드 일부만 그대로 가져다 쓰는 건 다른 문제거든요.
        큰 문제는 안 되겠지만 스킨 제작자들에게 좋지 않은 인상을 줄 수 있어서 조심하시는 편이 나아 보여서 말씀드려요.

    • 우롱 2021.04.25 13:17

      안녕하세요 아미넴임 좋은 글 감사드립니다. 한가지 질문이 있는데요 function bgmVolume(type) 의 if(browserCheck()) {
      myBgm.volume = currentVolume; 이쪽에서 콘솔 오류가 나고 있는 현상이 있습니다.

      오류명은 '
      Uncaught DOMException: Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided (1.1) is outside the range [0, 1].' 이네요

      혹시 왜이러는지 알 수 있을까요?
      답글

    • 항상 감사합니다 2021.05.14 20:53

      덕분에 블로그에 배경음악 잘 이식했습니다!
      아직 블로그 접속하면 클릭 한 번을 해야 노래가 끊기지 않고 나오고 있지만.. 만족합니다 감사합니다!
      혹시 노래 재생을 랜덤으로 바꾸려면 어떤 부분을 바꿔야 하는지 알려주실 수 있으실까요???
      답글

      • 오디오 플레이는 사용자와의 상호작용(클릭 또는 터치)이 있어야 한다는 제약이 생겨서 어쩔 수 없어 보이구요.
        노래 재생을 랜덤으로 하시려면
        var currentIndex = saveIndex?Number(saveIndex):Math.floor(Math.random()*bgmSource.length);
        부분에서 saveIndex를 쓰지마시고 Math.floor(Math.random()*bgmSource.length) 부분만 남기시면 됩니다.
        다만 노래가 계속 변경될 수 있으므로 bgm 오브젝트 속성 값인 currentTime에 값을 줄 때 유의바랍니다.

    • 2021.07.15 13:14

      비밀댓글입니다
      답글

    • 2021.09.25 03:23

      비밀댓글입니다
      답글

    • 감사합니다. 2021.10.13 16:35

      좋은 정보 글 감사합니다, 아미넴 님. 덕분에 블로그에 배경 음악을 적용할 수 있었습니다.
      그런데 혹시, 한 가지 여쭤봐도 될까요?
      사용자와의 상호작용이 있어야 한다는 제약을 무시하는 방법은 없는지 궁금합니다.
      아미넴 님의 블로그는 페이지를 이동하여도 음악이 끊기지 않고 재생되는 듯 하여...
      아미넴 님께서 배포해주시는 미넴 스킨은 멋지지만, 기존 것에 편의상 수정해 쓰고 있는 부분이 많아 이동하기 아쉬워서요...
      그럼 날이 점점 쌀쌀해지는데 감기 조심하시고 좋은 하루 되시길 바랍니다.^^
      답글

      • 안녕하세요 ㅎㅎ 제약을 무시하는 방법이 있는건 아니구요. 저 같은 경우는 블로그 페이지 전체를 재생 버튼처럼 활용하여 어느 부분을 클릭하더라도 재생이 되도록 했습니다~

    • ^///^ 2021.10.27 06:25

      너무 멋진 코드네요!! 안 그래도 scm 플레이어는 티스토리 스킨을 아주 먹통으로 만들어놔서 못 쓰고 있었는데 덕분에 제 티스토리에도 드디어!! BGM이 생겼어요 ㅠㅠ 유용하게 잘 쓰겠습니다. 감사합니다!
      그런데 이쪽 방면으로는 제가 워낙 문외한이라...ㅋㅋㅋㅠㅠ 아미넴님의 블로그처럼 볼륨 버튼을 누르면 아래에 지금 볼륨이 몇 퍼센트인지 창이 떴으면 좋겠는데 ... 어떻게 하는지 방법을 모르겠더라구요. ㅠㅠ;; 혹시 여유가 되신다면 어떻게 하는건지 가르쳐주실 수 있을까요?
      답글

    💲 추천 글