https://ultra-violet.tistory.com/ ko Wed, 3 Jun 2026 15:32:06 +0900 TISTORY 100 호우우 https://tistory1.daumcdn.net/tistory/3467686/attach/dd4ab1e6d53f4855826021a0c465f351 https://ultra-violet.tistory.com https://ultra-violet.tistory.com/13 <p data-ke-size="size16">&nbsp;</p> <!-- ======================== 메뉴형 유리 음악 플레이어 볼륨 조절 / 크기 조절 / 마퀴 제목 지원 ⋮ 버튼을 누르면 메뉴가 펼쳐짐 ======================== --> <p data-ke-size="size16">&nbsp;</p> <!-- ▼▼▼ 유튜브 링크를 아래 data-youtube-url 안에 입력 ▼▼▼ --> <div class="glass-player-container" data-youtube-url="https://youtu.be/obsbr57gB6w?si=NjZRkfHpKYdZiuM2"><!-- ▲▲▲ 유튜브 링크를 위 data-youtube-url 안에 입력 ▲▲▲ --> <style> .glass-player-container { margin: 20px auto; width: fit-content; } .glass-player { width: 210px; padding: 8px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.3); border-radius: 14px; position: relative; transition: transform 0.2s ease; overflow: hidden; } /* 앨범 커버 (회전하는 바이닐) */ .vinyl-container { width: 44px; height: 44px; flex-shrink: 0; position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #000; } .vinyl-container img { width: 100%; height: 100%; object-fit: cover; display: block; } .groove { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.1) 3px, rgba(0,0,0,0) 4px); pointer-events: none; } .hole { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: white; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; } /* 정보 영역 (제목 + 컨트롤) */ .info-side { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .title-row { display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .title-wrap { flex: 1; overflow: hidden; white-space: nowrap; margin-right: 5px; } .song-title { display: inline-block; font-size: 10px; font-weight: 800; color: #333; padding-right: 20px; } /* 컨트롤 바 (재생버튼 + 시크바 + 시간) */ .control-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; } .play-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.3); color: #333; font-size: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .seek-bar { flex: 1; min-width: 0; height: 2px; appearance: none; background: rgba(0,0,0,0.1); border-radius: 999px; outline: none; } .seek-bar::-webkit-slider-thumb { appearance: none; width: 6px; height: 6px; background: #222; border-radius: 50%; } .time-text { font-size: 7px; color: #666; width: 45px; flex-shrink: 0; text-align: right; } .menu-dots { font-size: 14px; cursor: pointer; color: #444; line-height: 1; flex-shrink: 0; } /* ⋮ 버튼으로 펼치는 메뉴 (크기 조절 + 볼륨) */ .player-menu { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 6px; width: 100%; } .player-menu.active { max-height: 60px; opacity: 1; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.2); } .menu-item { display: flex; align-items: center; justify-content: space-between; } .menu-label { font-size: 7px; font-weight: 800; color: #555; } .size-btns { display: flex; gap: 4px; } .size-btns span { cursor: pointer; padding: 1px 5px; background: rgba(255,255,255,0.3); border-radius: 4px; font-size: 7px; user-select: none; } .vol-container { display: flex; align-items: center; gap: 6px; flex: 1; margin-left: 8px; } .vol-range { flex: 1; height: 2px; appearance: none; background: rgba(0,0,0,0.1); outline: none; } .vol-range::-webkit-slider-thumb { appearance: none; width: 7px; height: 7px; background: #444; border-radius: 50%; } /* 제목이 길 때 흘러가는 효과 */ .marquee { animation: marquee-anim 8s linear infinite; } @keyframes marquee-anim { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 재생 중 바이닐 회전 */ .spin { animation: spin-anim 4s linear infinite; } @keyframes spin-anim { to { transform: rotate(360deg); } } .yt-hidden-player { position: absolute; left: -9999px; } .wrapper { display: flex; flex-direction: column; width: 100%; } </style> <div class="glass-player"> <div class="wrapper"><!-- 상단: 앨범아트 + 제목 + 컨트롤 --> <div style="display: flex; align-items: center; gap: 10px; width: 100%;"> <div class="vinyl-container"><img class="cover-img" alt="Thumbnail" /> <div class="groove">&nbsp;</div> <div class="hole">&nbsp;</div> </div> <div class="info-side"> <div class="title-row"> <div class="title-wrap"> <div class="song-title">Loading...</div> </div> <div class="menu-dots">⋮</div> <!-- 메뉴 열기 버튼 --></div> <div class="control-row"><button class="play-btn">▶</button> <input class="seek-bar" max="100" min="0" type="range" value="0" /> <div class="time-text">0:00/0:00</div> </div> </div> </div> <!-- 하단: ⋮ 버튼 클릭 시 펼쳐지는 메뉴 --> <div class="player-menu"> <div class="menu-item"><span class="menu-label">SIZE</span> <div class="size-btns"><span class="size-down">S</span> <!-- 축소 --> <span class="size-reset">●</span> <!-- 원래 크기 --> <span class="size-up">L</span> <!-- 확대 --></div> </div> <div class="menu-item"><span style="cursor: pointer; font-size: 10px;" class="mute-btn"> </span> <!-- 음소거 토글 --> <div class="vol-container"><input class="vol-range" max="100" min="0" type="range" value="60" /> <!-- 볼륨 슬라이더 --></div> </div> </div> </div> <div class="yt-hidden-player">&nbsp;</div> <!-- YouTube 플레이어 숨김 영역 --></div> </div> <script> (function () { // YouTube IFrame API 스크립트 로드 (페이지 전체에서 딱 한 번만) window.ytApiLoaded = window.ytApiLoaded || false; if (!window.ytApiLoaded) { var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.getElementsByTagName("script")[0].parentNode.insertBefore(tag, document.getElementsByTagName("script")[0]); window.ytApiLoaded = true; } // API 로드 완료 시 커스텀 이벤트 발사 → 각 플레이어가 이를 받아 초기화 window.onYouTubeIframeAPIReady = function () { window.dispatchEvent(new Event("YTAPIReady")); }; // 페이지 내 모든 .glass-player-container를 찾아 각각 초기화 document.querySelectorAll(".glass-player-container").forEach(function (container) { function init() { // ① data-youtube-url 속성에서 링크 읽기 var url = container.getAttribute("data-youtube-url"); // ② URL → 영상 ID 추출 var vid = (function (u) { try { var d = new URL(u); if (d.hostname.includes("youtu.be")) return d.pathname.slice(1); if (d.pathname.includes("/shorts/")) return d.pathname.split("/shorts/")[1]; return d.searchParams.get("v"); } catch (e) { return u; } })(url); // ③ UI 요소 참조 var ui = { main: container.querySelector(".glass-player"), cover: container.querySelector(".cover-img"), title: container.querySelector(".song-title"), vinyl: container.querySelector(".vinyl-container"), playBtn: container.querySelector(".play-btn"), seek: container.querySelector(".seek-bar"), time: container.querySelector(".time-text"), menu: container.querySelector(".player-menu"), menuBtn: container.querySelector(".menu-dots"), vol: container.querySelector(".vol-range"), mute: container.querySelector(".mute-btn"), yt: container.querySelector(".yt-hidden-player"), up: container.querySelector(".size-up"), down: container.querySelector(".size-down"), reset: container.querySelector(".size-reset") }; ui.cover.src = "https://img.youtube.com/vi/" + vid + "/mqdefault.jpg"; var player, isPlaying = false, isMuted = false, lastVol = 60, scale = 1.0, fade; // ④ 페이드 인: 볼륨 0에서 슬라이더 설정값까지 서서히 올리며 재생 function fadeIn() { clearInterval(fade); var v = 0; var targetVol = parseInt(ui.vol.value, 10); player.setVolume(0); player.playVideo(); fade = setInterval(function () { if (v < targetVol) { v += 2; player.setVolume(v); } else clearInterval(fade); }, 35); } // ⑤ 페이드 아웃: 현재 볼륨에서 0까지 서서히 내리며 일시정지 function fadeOut() { clearInterval(fade); var v = player.getVolume(); fade = setInterval(function () { if (v > 0) { v -= 2; player.setVolume(v); } else { player.pauseVideo(); clearInterval(fade); } }, 35); } // ⑥ YouTube IFrame 플레이어 생성 player = new YT.Player(ui.yt, { videoId: vid, playerVars: { controls: 0, playsinline: 1, rel: 0, enablekb: 1, origin: window.location.origin }, events: { onReady: function (e) { var t = e.target.getVideoData().title || "BGM Player"; ui.title.textContent = t; // 제목이 길면 마퀴(흘러가는) 효과 적용 setTimeout(function () { if (ui.title.offsetWidth > ui.title.parentElement.offsetWidth) { ui.title.innerHTML = "<span>" + t + " </span><span>" + t + " </span>"; ui.title.classList.add("marquee"); } }, 500); }, onStateChange: function (e) { // 일시정지(2) 또는 종료(0) 시 버튼·바이닐 상태 복구 if (e.data === 2 || e.data === 0) { isPlaying = false; ui.playBtn.textContent = "▶"; ui.vinyl.classList.remove("spin"); } } } }); // ⑦ 메뉴 열기/닫기 ui.menuBtn.onclick = function () { ui.menu.classList.toggle("active"); }; // ⑧ 크기 조절 (S / ● / L) ui.up.onclick = function () { scale += 0.1; ui.main.style.transform = "scale(" + scale + ")"; }; ui.down.onclick = function () { if (scale > 0.5) scale -= 0.1; ui.main.style.transform = "scale(" + scale + ")"; }; ui.reset.onclick = function () { scale = 1.0; ui.main.style.transform = "scale(1)"; }; // ⑨ 재생/일시정지 (페이드 인/아웃 적용) ui.playBtn.onclick = function () { if (!player || !player.playVideo) return; if (!isPlaying) { fadeIn(); ui.playBtn.textContent = "❚❚"; ui.vinyl.classList.add("spin"); isPlaying = true; } else { fadeOut(); ui.playBtn.textContent = "▶"; ui.vinyl.classList.remove("spin"); isPlaying = false; } }; // ⑩ 볼륨 슬라이더 / 음소거 토글 ui.vol.oninput = function () { player.setVolume(ui.vol.value); ui.mute.textContent = ui.vol.value == 0 ? " " : " "; }; ui.mute.onclick = function () { if (!isMuted) { lastVol = ui.vol.value; player.setVolume(0); ui.vol.value = 0; ui.mute.textContent = " "; } else { ui.vol.value = lastVol; player.setVolume(lastVol); ui.mute.textContent = " "; } isMuted = !isMuted; }; // ⑪ 시크바 조작 ui.seek.oninput = function () { player.seekTo(player.getDuration() * (ui.seek.value / 100), true); }; // ⑫ 재생 시간 업데이트 (500ms마다) setInterval(function () { if (player && player.getCurrentTime && isPlaying) { var cur = player.getCurrentTime(), dur = player.getDuration(); if (dur) { ui.seek.value = (cur / dur) * 100; var fmt = function (s) { return Math.floor(s / 60) + ":" + String(Math.floor(s % 60)).padStart(2, "0"); }; ui.time.textContent = fmt(cur) + "/" + fmt(dur); } } }, 500); } // API가 이미 로드됐으면 즉시 실행, 아니면 이벤트 대기 if (typeof YT !== "undefined" && YT.Player) init(); else window.addEventListener("YTAPIReady", init); }); })(); </script> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imagegridblock"> <div class="image-container"><span data-url="https://blog.kakaocdn.net/dn/TkV5n/dJMcaarpQCN/WMXI9ShBQZNV9Vi3ArOsK0/img.png" data-phocus="https://blog.kakaocdn.net/dn/TkV5n/dJMcaarpQCN/WMXI9ShBQZNV9Vi3ArOsK0/img.png" data-is-animation="false" data-origin-width="600" data-origin-height="500" data-filename="KakaoTalk_20260412_200342839.png" style="width: 49.4186%; margin-right: 10px;" data-widthpercent="50"><img src="https://blog.kakaocdn.net/dn/TkV5n/dJMcaarpQCN/WMXI9ShBQZNV9Vi3ArOsK0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTkV5n%2FdJMcaarpQCN%2FWMXI9ShBQZNV9Vi3ArOsK0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="600" height="500"/></span><span data-url="https://blog.kakaocdn.net/dn/bianAg/dJMcaaSuFHk/OZiSGE5eBEVGkxyirELFr0/img.png" data-phocus="https://blog.kakaocdn.net/dn/bianAg/dJMcaaSuFHk/OZiSGE5eBEVGkxyirELFr0/img.png" data-is-animation="false" data-origin-width="600" data-origin-height="500" data-filename="KakaoTalk_20260412_200342839_01.png" style="width: 49.4186%;" data-widthpercent="50"><img src="https://blog.kakaocdn.net/dn/bianAg/dJMcaaSuFHk/OZiSGE5eBEVGkxyirELFr0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbianAg%2FdJMcaaSuFHk%2FOZiSGE5eBEVGkxyirELFr0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="600" height="500"/></span></div> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">가증스러운 배너 교환 친목질의 장</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><a href="https://ultra-violet.tistory.com/"><img src="https://i.imgur.com/mOfqsTN.png" /></a></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><a href="https://crayon-show.tistory.com/"><img src="https://i.imgur.com/iuhF89w.png" /></a></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><a href="https://megacline.tistory.com/notice/100"><img src="https://tistory1.daumcdn.net/tistory/2113865/skin/images/banner.png" /></a></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><a href="https://brandnewday1231.tistory.com"><img src="https://imgur.com/HefQT25.png" /></a></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> ultraviolet 호우우 https://ultra-violet.tistory.com/13 https://ultra-violet.tistory.com/13#entry13comment Sat, 29 May 2021 15:10:47 +0900 https://ultra-violet.tistory.com/notice/2 <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="blob" data-origin-width="500" data-origin-height="407"><span data-url="https://blog.kakaocdn.net/dn/bKKTxy/dJMcaayuOoq/CcOi9fxwvkH64h69xbhkTK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bKKTxy/dJMcaayuOoq/CcOi9fxwvkH64h69xbhkTK/img.png"><img src="https://blog.kakaocdn.net/dn/bKKTxy/dJMcaayuOoq/CcOi9fxwvkH64h69xbhkTK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKKTxy%2FdJMcaayuOoq%2FCcOi9fxwvkH64h69xbhkTK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="500" height="407" data-filename="blob" data-origin-width="500" data-origin-height="407"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">트친 정리 거의 안 함 블언 실수 없음 <br />끊은 사람 재연결 X </span></p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">모든 푸시 알림 전부 꺼져 있음 연락 늦게 확인하고 스루 잦음 <br />중요한 일이라면 꼭!! 용건까지 한번에 보내 주세요</span></p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">극렬 까빠</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">말 막 하고 내 장르 남의 장르 가리지 않고 총질함</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">내로남불 안 함 내 장르 총질이 제일 재미있음 진정성 있는 까빠<br />장르와 향유자를 완전히 분리하는 편, 저격 의도 전혀 XXX <br />그래도 불편하시다면 그냥 블언해 주세요 조율 시도 XXX</span></p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">실행 의사 없는 빈말/립서비스 정말 싫어함</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">특히 TRPG 공수표/커미션/기타 등등 자놀 관련 빈말 XXX</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">무조건 진담으로 받습니다 그럼 저희 둘 다 불행해지겠죠</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">괜한 책임감/의무감으로 어영부영 견인하지 마세요</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">안 그러셔도 유감 전혀 안 가집니다 오히려 저러시면 유감 생깁니다</span></p> <p style="text-align: justify;" data-ke-size="size16"><span style="background-color: #ffffff; color: #000000; text-align: start;">요즘 빈말 진담 구분할 체력도 심력도 없습니다 제발 부탁드립니다</span></p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> <p style="text-align: justify;" data-ke-size="size16">&nbsp;</p> 호우우 https://ultra-violet.tistory.com/notice/2 Sat, 28 Mar 2020 12:46:06 +0900 https://ultra-violet.tistory.com/1 <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="blob" data-origin-width="1477" data-origin-height="643"><span data-url="https://blog.kakaocdn.net/dn/s27Pk/dJMcagqUn0u/dpL1pqiqm98iquXZekdkUk/img.png" data-phocus="https://blog.kakaocdn.net/dn/s27Pk/dJMcagqUn0u/dpL1pqiqm98iquXZekdkUk/img.png"><img src="https://blog.kakaocdn.net/dn/s27Pk/dJMcagqUn0u/dpL1pqiqm98iquXZekdkUk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fs27Pk%2FdJMcagqUn0u%2FdpL1pqiqm98iquXZekdkUk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1477" height="643" data-filename="blob" data-origin-width="1477" data-origin-height="643"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">최근 캐릭터: 하나에 하나츠, 샤오위엔 달링턴</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> ultraviolet 호우우 https://ultra-violet.tistory.com/1 https://ultra-violet.tistory.com/1#entry1comment Sat, 28 Mar 2020 12:45:32 +0900