bgm 넣기
2022. 9. 20.
1. </head> 위에 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<script>
//////////////////////////////////////////////////////////////////////
// BLOG BGM With Youtube
// BY. https://d-dl.tistory.com/
//////////////////////////////////////////////////////////////////////
// [ SETTING ]
const youtubeVideoKey = "비디오 키";
const youtubePlayListKey = "재생목록 키";
const URLChange = true;
const setShuffle = true;
const volumeUpDownValue = 10; // 0~100
const config = {
'loop': 1,
'autoplay': 1,
'controls': 1,
'disablekb': 1,
'enablejsapi': 1,
'iv_load_policy': 3,
'origin': document.location.origin
};
//////////////////////////////////////////////////////////////////////
// [ BODY ]
let YTplayer = null;
window.addEventListener('DOMContentLoaded', (event) => {
console.clear();
if (parent[0].name !== '') return;
let docIframe = document.createElement("iframe");
docIframe.style.cssText = `width: 100vw; height: 100vh; overflow: auto; border: 0; margin: 0; position: absolute;`;
docIframe.name = "MAIN";
docIframe.id = "BGM_DOC_IFRAME";
docIframe.src = document.location;
docIframe.addEventListener("load", function(e) {
const iframePath = docIframe.contentDocument.location.pathname;
if (URLChange && document.location.pathname !== iframePath){
history.replaceState(null, null, iframePath);
}
});
let musicDiv = document.createElement("div");
musicDiv.name = "MUSIC";
musicDiv.id = "Youtube_Music_Iframe";
document.body.style.overflow = "hidden";
document.body.innerHTML = "";
document.body.prepend(docIframe);
document.body.prepend(musicDiv);
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
function onYouTubeIframeAPIReady() {
YTplayer = new YT.Player('Youtube_Music_Iframe', {
videoId: youtubeVideoKey,
playerVars: config,
height: '0',
width: '0',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
let listSet = false;
function onPlayerReady(event) {
if (!listSet && youtubePlayListKey !== null) {
YTplayer.loadPlaylist({
list:youtubePlayListKey,
listType:'playlist',
index:0,
startSeconds:0,
suggestedQuality:'small'
});
YTplayer.setShuffle(setShuffle);
listSet = true;
}
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
if (listSet)
YTplayer.nextVideo();
else
YTplayer.playVideo();
}
}
function onPlayerError(event) {
console.error(event.data);
}
function receiveBGMMessage(event)
{
let state = event.data.BGM;
if (!state) return;
switch (state.toString().toLowerCase()) {
case 'play':
YTplayer.playVideo();
break;
case 'pause':
YTplayer.pauseVideo();
break;
case 'previous':
YTplayer.previousVideo();
YTplayer.playVideo();
break;
case 'next':
YTplayer.nextVideo();
YTplayer.playVideo();
break;
case 'volumeup':
YTplayer.setVolume(YTplayer.getVolume() + volumeUpDownValue);
break;
case 'volumedown':
YTplayer.setVolume(YTplayer.getVolume() - volumeUpDownValue);
break;
}
console.log(`%c♬ BGM : NOW "${state.toUpperCase()}"`, 'color:blue');
}
addEventListener("message", receiveBGMMessage, false);
</script>
|
cs |
2. </body> 위 원하는 레이아웃 위치에 작성
|
1
2
3
4
5
6
7
8
|
<!-- IN HTML Button -->
<button onclick="parent.postMessage({BGM:'play'}, '*')">재생</button>
<button onclick="parent.postMessage({BGM:'pause'}, '*')">정지</button>
<button onclick="parent.postMessage({BGM:'previous'}, '*')">이전</button>
<button onclick="parent.postMessage({BGM:'next'}, '*')">다음</button>
<button onclick="parent.postMessage({BGM:'volumeup'}, '*')">볼륨업</button>
<button onclick="parent.postMessage({BGM:'volumedown'}, '*')">볼륨다운</button>
|
cs |
3. css
|
1
2
3
4
5
6
7
|
/*브금*/
.bgm {
text-align: center;
margin-top: ★px;
margin-bottom: ★px;
}
|
cs |
번외) 페이지 이동 시 끊기지만 백그라운드에서 자동재생 가능한 방법
|
1
2
3
4
5
|
<!-- 배경음악 태그 -->
<iframe src="./images/silence.mp3?attach=1&knm=tfile.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
<source src="https://blog.kakaocdn.net/dn/dZqAVM/btrMDDKqMlK/z0IqwHfzDLNbTf6wczWreK/Sacred%20Play%20Secret%20Place.mp3?attach=1&knm=tfile.mp3">
</audio>
|
cs |