티스토리 브금

<body id="tt-body-page">
<!-- 배경음 -->
<audio loop autoplay id='bgm' 
src=티스토리에 갖고 계신 노래파일을 올리고 우클릭 후 링크 주소 복사 한 뒤 그 링크를 여기다가 넣으면 됩니다>
</audio>
<script>
$('#bgm')[0].volume = 0.1;
</script>

예시 ↓

<body id="tt-body-page">
<!-- 배경음 -->
<audio loop autoplay id='bgm' 
src=https://blog.kakaocdn.net/dn/kTlTc/btrQqkVHfyx/DApk3kOQZr5QanKwdyWLRk/tfile.mp3>
</audio>
<script>
$('#bgm')[0].volume = 0.2;
</script>

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

<!-- 배경음악 켜기/끄기 -->
<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>

<script>
var myBgm = $('#bgm')[0];
var bgmSource = [
    {title: 'Across the wind',
     src: 'https://blog.kakaocdn.net/dn/8cMmq/btr7xU6D2Rx/ua3xDte7kuKZQ7QwDKMb0k/tfile.mp3'} 
     ,{title: 'カナリアスキップ',
     src: 'https://blog.kakaocdn.net/dn/cAG6JE/btrQsGwA71m/h9XtKczKt0SYLw5nph3Su1/tfile.mp3'}
     ,{title: 'Dawn through leaves',
     src: 'https://blog.kakaocdn.net/dn/bLF5ug/btrZ0KbJK75/MhXk6yfyypNcyAokRkzJn1/tfile.mp3'}
     ,{title: 'WSArabesque',
     src: 'https://blog.kakaocdn.net/dn/KzwqX/btrZ0JxaivX/twmu5FkkkKuzzJUbOQ3wiK/tfile.mp3'}
];
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;

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);
}

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 = true;
        bgmPlaying = true;
    } 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.3;
                }).catch(function(error){
                    console.log(error);
                    bgmStart = true;
                    bgmPlaying = true;
                });
            }
        }

        $('.bgm-box').removeClass('paused');
        $('#bgm-status').html('끄기');
    }
}

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();
}

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();
}

function browserCheck(){
    if(navigator.userAgent.toLowerCase().indexOf('chrome') > 0) {
        return true;
    } else {
        return false;
    }
}

if(!browserCheck()) {
    $('#bgm-switch').css('display', 'none');
}

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();
}

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;
});
</script>

https://sangminem.tistory.com/211 <<참고

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

잠깐! 이 포스팅은 HTML, CSS, JavaScript 기초가 있으신 분들 대상으로 작성되었습니다. #배경음악넣기_초급버전 sangminem.tistory.com/84 티스토리(TISTORY) 블로그 배경음악(BGM) 직접 넣기 (초급 버전) 안녕

sangminem.tistory.com

티스토리툴바