아 너무 어렵다
현재 시도해본 것
1. 유튜브 API 이용해 BGM 넣기
장점
블로그 내에서 이동해도 노래가 끊기지 않음. 새로고침하면 끊김
CSS로 꾸미기 간편함
유튜브 재생목록 그냥 복사붙여넣기 하면 됨. 편함
단점
제목이 안 나옴 (어떻게 넣는지 모르겠음. 실력 부족 ㅜㅜ)
유튜브 프리미엄+애드블록 사용 중이라 모르겠는데 중간중간에 광고가 뜨는 모양
글쓰기 모드에 들어가면 절대 노래를 멈출 방법이 없음
참고
2. HTML을 이용해 넣기
거의 아미넴님의 코드 이용. CSS만 조금 고쳐서 넣음
장점
블로그 내에서 이동해도 노래 끊기지 않음. (JS 코드로) 단 조금씩 끊기는 부분이 있음
어지간히 마개조하지 않는 이상 오류날 일 X
플레이 중인 노래 제목 나옴
CSS로 꾸미기 간편
단점
하나하나 음악 파일을 가지고 있어야하고 그걸 티스토리 내에 게시글로 업로드해야하는 번거로움이 있음
아래는 BGM바에 적용한 CSS와 조금 뜯어고친 HTML
/*브금바-bgm*/
.bgm-box {
display: inline-table;
animation-duration: 2s;
animation-name: fade-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
margin-left: 1.2em;
position: relative;
/* text-align: center; */
border-radius: 12px;
line-height: 10px;
font-weight: 700;
font-size: 8px;
padding: 0em 0.3em;
min-width: 29px;
}
h2#bgm-title {
color: white !important;
display: inline-block;
font-size: 1em;
}
.bgm-title-wrap {
display: inline-flex;
width: auto;
font-size: 1.6em;
}
.module.module_plugin {
display: inline-block;
float: left;
display: inline-table;
vertical-align: middle;
animation-duration: 2s;
animation-name: fade-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
margin-left: 1.2em;
border: 2px outset rgb(255 255 255);
position: relative;
text-align: center;
border-radius: 12px;
line-height: 13px;
font-weight: 700;
font-size: 8px;
padding: 0.8em 0.3em;
min-width: 29px;
display: inline-block;
}
.bgm-btn {
color: #ffffff;
font-family: 'Font Awesome 5 Free', 'noto', Bitter,IropkeBatang,"Noto Sans DemiLight",AppleSDGothicNeo,"Malgun Gothic","맑은 고딕","돋움",dotum,sans-serif,'Font_Awesome_5_Free' !important;
position: relative;
text-align: center;
border-radius: 12px;
line-height: 10px;
font-weight: 700;
padding: 1px 1em;
min-width: 29px;
display: inline-block;
}
.bgm-btn:hover
{cursor: pointer;}
current-bgm{margin-left:20px;}
span#bgm-status {
color: #ffffff;
font-family: 'Font Awesome 5 Free', 'noto', Bitter,IropkeBatang,"Noto Sans DemiLight",AppleSDGothicNeo,"Malgun Gothic","맑은 고딕","돋움",dotum,sans-serif,'Font_Awesome_5_Free' !important;
font-weight: 700;
display: inline-block;
}
.bgm-playing {
animation: fade-in-out 1s infinite linear alternate,
flow-text 10s infinite linear;
display: inline-block;
}
.bgm-playing:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
button#bgm-loop {
color: white;
}
.bgm-title-box {
overflow: hidden;
position: relative;
width: 100%;
display: inline-block;
}
h2#bgm-title:before {
content: "♬BGM";
padding-left: 11px;
font-size: 1.9em;
font-family: monospace;
}
@keyframes flow-text {
from { transform: translate(100%);}
100%,to { transform: translate(-100%);}
}
/* animation
@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;
}<!-- 배경음악 켜기/끄기 --> <!-- bgmtag2-->
<div class="module module_plugin">
<h2 id="bgm-title">
<span class="bgm-header"></span>
<span class="bgm-title-wrap">
<span class="bgm-title-box">
<span id="current-bgm">플레이 버튼을 눌러 주세요</span>
</span>
</span>
</h2>
<div class="bgm-box">
<button class="bgm-btn" onclick="nextBgm('-')" style="margin:auto;">
 <!--prev btn -->
</button>
<button class="bgm-btn" onclick="toggleBgm()" id='bgm-switch' style="margin:auto;">
<span id="bgm-status"></span> <!-- play btn -->
</button>
<button class="bgm-btn" onclick="nextBgm('+')" style="margin:auto;">
 <!-- next btn -->
</button>
<button class="bgm-btn" onclick="bgmVolume('+')" style="margin:auto;">
 <!-- volume up btn -->
</button>
<button class="bgm-btn" onclick="bgmVolume('-')" style="margin:auto;">
 <!-- volume down btn -->
</button>
</div>
</div>
https://sangminem.tistory.com/84
https://sangminem.tistory.com/211
3. Wikiplayer로 넣는 방법
Wikplayer를 사용한 방법. 왼쪽 하단에 보이는 것이 플레이바이고, https://nobroken.tumblr.com/skins에서 가져온 소스를 내 블로그에 맞게 수정
SCMPlayer에 비해 오류가 적고 일단 작동은 잘 되지만... 역시나 오류때문에 가끔 안나오기도하고, 프레임이 막혀서 관리자로그인을 할때 귀찮게 됨
다른 페이지로 이동해도 끊김없이 재생된다는 점에서 참 유용하지만 오류때문에 쓸 일은 적을듯
장점
블로그 내에서 이동해도 노래가 끊기지 않음
스킨 예쁨
단점
미친 오류
로그인 안됨
그래도 혹시나 쓰고 싶다면 아래 코드 사용. html의 <body> 아래에 넣으면 됨
<!-- Wikplayer https://www.wikplayer.com -->
<!--
<script type="text/javascript" src="https://www.wikplayer.com/code.js"
data-config="{'skin':'https://static.tumblr.com/ru3gcsj/1arr1n070/wikplayerskin.css','volume':100,'autoplay':true,'shuffle':true,'repeat':2,'showcomment':false,'marqueetexton':true,'placement':'left','showplaylist':false,'playlist':[{'title':'500%2C000','url':'https%3A%2F%2Fyoutu.be%2FdFgy7lvNLuU'},{'title':'92982.3','url':'https%3A%2F%2Fyoutu.be%2Fc-EMwY-2dkQ'},{'title':'Claire%20de%20lune','url':'https%3A%2F%2Fyoutu.be%2FO2deXwf4drE'},{'title':'Dark%20Winter%20Music%20%26%20Medieval%20Fantasy%20Music%20-%20Arctic%20Forest','url':'https%3A%2F%2Fyoutu.be%2F6Y2WSKU2Nig'},{'title':'Days','url':'https%3A%2F%2Fyoutu.be%2F2DHIJHJ3qyY'},{'title':'El%20Camino%20Real','url':'https%3A%2F%2Fyoutu.be%2F8snzt-umd0g'},{'title':'Lost%20Village%20of%20Snow','url':'https%3A%2F%2Fyoutu.be%2FlThG2088pnw'},{'title':'My%20Tamako%2C%20my%20Sookee','url':'https%3A%2F%2Fyoutu.be%2F8Ek4rbmblbI'},{'title':'Seraphim','url':'https%3A%2F%2Fyoutu.be%2FLf099gm1Mz8'},{'title':'Sleeping%20Lotus','url':'https%3A%2F%2Fyoutu.be%2Fg2X_pyDCTzQ'},{'title':'dlp%203','url':'https%3A%2F%2Fyoutu.be%2FLGddm-hw-Xc'}]}" ></script>
<!-- Wikplayer code end -->곡은 사이트를 사용해 넣는 것이 편하고, 스킨은 html에 붙여넣을 때 수정하는 게 편함
내가 사용한 스킨은 이쪽 -> https://static.tumblr.com/ru3gcsj/1arr1n070/wikplayerskin.css
댓글