티스토리 토글형 사운드클라우드 배경음악 구현하기

티스토리 사이트에 배경음악을 따로 설치할 생각은 없었는데, 우연히 괜찮은 라이브러리를 발견해서 설치해봤습니다. 토글형식으로 되어 있고 자주 방문하는 사이트라면 크롬엔진에서도 자동음악재생이 가능해집니다. 어쨌든, 토글형식의 배경음악 기능은 꽤 예쁘고 깔끔합니다.

<div id="cata-page-music">
	<div class="cata-music-toggle-btn cata-toogle">
	<span class="fas fa-moon"></span></div>
	<div class="cata-music-embed cata-music-soundcloud"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/327851300&amp;color=%23ff5500&amp;auto_play=true&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false&amp;visual=true"></iframe>
		<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/240391418&amp;color=%23ff5500&amp;auto_play=true&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false&amp;visual=true"></iframe>
	</div>

	</div>

$('.cata-music-toggle-btn.cata-toogle').on("click", function() {
  $('.cata-music-toggle-btn.cata-toogle').not(this).removeClass('.cata-music-toggle-btn.cata-toogle');
  $(this).toggleClass('active');
})

제 사이트에서는 메인에 위치한 재생버튼도 있지만, 사운드클라우드처럼 리스트 형식의 음악을 재생하고 싶어졌습니다. 자바스크립트를 추가해서 클래스에 active를 구현하고, 클릭했을 경우 토글이 형성되도록 구현했습니다. 아이콘 형식으로 토글이 구현되니, 토글은 Fontawesome으로 구성했습니다. 이외에 사운드클라우드의 임베드 코드로 자동재생이 가능한 코드를 삽입했습니다.

.fa-angle-up:before{content:"\f106"}
.cata-backtotop .fa {
    font-size: 18px;
    color: #e7b5b7;
}
[class^="fa-"], [class*=" fa-"] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#cata-page-music {
    position: fixed;
    z-index: 999;
    bottom: 10px;
    right: auto;
    left: 10px;
	  display: block;
    margin: 11px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-box-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 0 0 20px #e2e2e2;
    -webkit-box-shadow: 0 0 20px #e2e2e2;
    box-shadow: 0 0 20px #e2e2e2;
}
#cata-page-music{
	position:fixed;
	z-index:999;
	bottom:10px;
	right:auto;
	left:10px
}
.cata-music-toggle-btn {
	color: #e7b5b7;
	position:absolute;
	left:0px;
	right:auto;
	bottom:0;
	width:40px;
	height:40px;
	padding:0;
	font-size:13px;
	line-height:38px;
	cursor:pointer;
	text-align:center;
	-webkit-border-radius:50%;
	-moz-box-border-radius:50%;
	border-radius:50% }
#cata-page-music .cata-music-embed{position:absolute;right:auto;left:0;bottom:-999em;width:300px;opacity:0;visibility:hidden}
#cata-page-music .cata-music-embed>p{margin-bottom:3px}
#cata-page-music .cata-music-toggle-btn.active~.cata-music-embed{bottom:40px;opacity:1;visibility:visible}
#cata-page-music .cata-music-embed.cata-music-mp3{left:47px}
#cata-page-music .cata-music-toggle-btn.active~.cata-music-embed.cata-music-mp3{bottom:4px}

//	<script src="https://kit.fontawesome.com/6efc4610ce.js"></script>

이렇게 구성한 배경음악은 현재 제 사이트에 적용된 토글형식으로 구성되어 있습니다.