마참내! 즐겁다!

유포니엄 듀엣

2018. 4. 8. 05:40

<!DOCTYPE html>
      <html>
                                                                      <head>
                <script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2900160,"name":"ipsida","title":"IPSI","isDormancy":false,"nickName":"잎씨","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://ipsida.tistory.com/18","DEFAULT_URL":"https://ipsida.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"};
window.T.entryInfo = {"entryId":18,"isAuthor":false,"categoryId":746984,"categoryLabel":"보관/유포니엄"};
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};

window.TistoryBlog = {
    basePath: "",
    url: "https://ipsida.tistory.com",
    tistoryUrl: "https://ipsida.tistory.com",
    manageUrl: "https://ipsida.tistory.com/manage",
    token: "o8w6yymxKHAr88z8w76k6iPUgTqUsU+O3CtavFoZFaKKrBkKkFfisuP1MyQWwcpj"
};
var servicePath = "";
var blogURL = "";</script>

<link href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/plugin/BusinessLicenseInfo/style.css" rel="stylesheet" type="text/css"/>

if (businessLayer) {
        if (businessLayer.className.indexOf("unfold_license") > 0) {
            businessLayer.className = "business_license_layer";
        } else {
            businessLayer.className = "business_license_layer unfold_license";
        }
    }
}
</script>

<style type="text/css">#daumSearchBox {
    height: 21px;
    background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bg_search2_2.gif);
    margin: 5px auto;
    padding: 0;
}

#daumSearchBox input {
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
}

#daumSearchBox #daumLogo {
    width: 34px;
    height: 21px;
    float: left;
    margin-right: 5px;
    background-image: url(//i1.daumcdn.net/img-media/tistory/img/bg_search1_2_2010ci.gif);
}

#daumSearchBox #show_q {
    background-color: transparent;
    border: none;
    font: 12px Gulim, Sans-serif;
    color: #555;
    margin-top: 4px;
    margin-right: 15px;
    float: left;
}

#daumSearchBox #show_btn {
    background-image: url(//i1.daumcdn.net/imgsrc.search/search_all/show/tistory/plugin/bt_search_2.gif);
    width: 37px;
    height: 21px;
    float: left;
    margin: 0;
    cursor: pointer;
    text-indent: -1000em;
}
</style>

<link href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/plugin/TistoryProfileLayer/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/plugin/TistoryProfileLayer/script.js"></script>

<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://ipsida.tistory.com/18","name":null},"url":"https://ipsida.tistory.com/18","headline":"유포니엄 듀엣","description":"","author":{"@type":"Person","name":"잎씨","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99F0C04F5AC92C9B06","width":"800px","height":"800px"},"datePublished":"2018-04-08T05:40:19+09:00","dateModified":"2018-04-08T05:40:19+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>

<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e277fe6a14309f6794c4544e50887e1134c4dd06/static/script/common.js"></script>

</head>
      <body>
          <div id="gemini-player">
              <div id="yt-player-hidden" style="display:none;"></div>
              <div class="player-info"><span id="current-title">노래를 재생해 주세요</span></div>
              <div class="player-controls">
                  <button id="mode-btn" onclick="toggleMode()">순서</button>
                  <button class="control-btn" onclick="prevVideo()">⏮</button>
                  <button class="control-btn" id="play-pause-btn" onclick="togglePlay()">▶</button>
                  <button class="control-btn" onclick="nextVideo()">⏭</button>
                  <button class="control-btn" onclick="toggleVolumePopup()">🔊</button>
                  <button class="control-btn" onclick="togglePlaylistPopup()">☰</button>
              </div>
              <div class="progress-container">
                  <span id="current-time" class="time-font">0:00</span>
                  <input type="range" id="seek-bar" min="0" max="100" value="0" onchange="seekTo(this.value)">
                  <span id="duration" class="time-font">0:00</span>
              </div>
              <div id="volume-popup" class="popup-window"><input type="range" id="volume-range" min="0" max="100" value="10" oninput="changeVolume(this.value)"></div>
              <div id="playlist-popup" class="popup-window"></div>
          </div>
          
          <script src="https://www.youtube.com/iframe_api"></script>
          <script>
              var player, timer, currentIndex = 0, playMode = 'normal';
              const playlist = [
                  {title:'그러려니', id:'3bcywMhqcqI'}, {title:'전화하기 전에 생각했나요?', id:'wTx7H0IdVa0'},
                  {title:'KIDDING (키딩)', id:'rDFUl2mHIW4'}, {title:'상상', id:'LPZDKf29IRs'},
                  {title:'리와인드 (RE:WIND)', id:'fgSXAKsq-Vo'}, {title:'플라워걸', id:'e2MC1SWnqb8'},
                  {title:'금요일에 만나요', id:'e4xKKEwyo54'}, {title:'This Is A Life', id:'N2QSvYwrEaI'},
                  {title:'사이킥! 빠뤼 나잇☆', id:'wgcMiTFSSl4'}, {title:'미라클 텔레파시시', id:'_koHnzVtjTM'},
                  {title:'김철수 씨 이야기', id:'0kmHEKcRjpo'}, {title:'오 사랑아', id:'U0LnjY2uYLM'},
                  {title:'Pink', id:'8uIxoCs7iv8'}, {title:'What Was I Made For?', id:'cW8VLC9nnTo'},
                  {title:'LADY', id:'crvPldgKJIo'}, {title:'확신', id:'lVtWwMIjtCI'},
                  {title:'ON YOUR MARK', id:'rXgZOCiIMrE'}, {title:'Express', id:'f89FnJZKqu4'},
                  {title:'MONSTAR', id:'OAu3in0KjTk'}, {title:'Misty Rainbow', id:'DJLa8QYUtmQ'},
                  {title:'SYZYGY', id:'v9Jqz13gg8k'}, {title:'MEMORY', id:'V6sbEUCKp7s'}, {title:'Stargazers', id:'poeO7eDT_Xo'},
                  {title:'ELEVATE', id:'42FCSSxlAqo'}
              ];
              function onYouTubeIframeAPIReady() { player = new YT.Player('yt-player-hidden', { height: '0', width: '0', videoId: playlist[0].id, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
              function onPlayerReady() { renderPlaylist(); startTimer(); player.setVolume(10); }
              function renderPlaylist() {
                  const listDiv = document.getElementById('playlist-popup');
                  playlist.forEach((item, index) => {
                      const div = document.createElement('div');
                      div.className = 'playlist-item';
                      div.innerText = item.title;
                      div.onclick = (e) => { e.stopPropagation(); playAt(index); togglePlaylistPopup(); };
                      listDiv.appendChild(div);
                  });
              }
              function startTimer() { timer = setInterval(() => { if (player && player.getCurrentTime && player.getPlayerState() === 1) { const curr = player.getCurrentTime(); const dur = player.getDuration(); if (dur > 0) { document.getElementById('seek-bar').value = (curr / dur) * 100; document.getElementById('current-time').innerText = formatTime(curr); document.getElementById('duration').innerText = formatTime(dur); } } }, 1000); }
              function formatTime(s) { const m = Math.floor(s/60); const sc = Math.floor(s%60); return m+":"+(sc<10?'0':'')+sc; }
              function seekTo(v) { player.seekTo(player.getDuration() * (v/100)); }
              function toggleVolumePopup() { document.getElementById('playlist-popup').style.display='none'; const v=document.getElementById('volume-popup'); v.style.display=(v.style.display==='block')?'none':'block'; }
              function togglePlaylistPopup() { document.getElementById('volume-popup').style.display='none'; const p=document.getElementById('playlist-popup'); p.style.display=(p.style.display==='block')?'none':'block'; }
              function playAt(i) { currentIndex=i; player.loadVideoById(playlist[currentIndex].id); updateUI(); }
              function togglePlay() { player.getPlayerState() === 1 ? player.pauseVideo() : player.playVideo(); }
              function toggleMode() { const btn = document.getElementById('mode-btn'); if (playMode === 'normal') { playMode = 'repeat'; btn.innerText = "반복"; btn.classList.add('active'); } else { playMode = 'normal'; btn.innerText = "순서"; btn.classList.remove('active'); } }
              function onPlayerStateChange(e) { if (e.data === 1) { document.getElementById('play-pause-btn').innerText = "⏸"; updateUI(); } else if (e.data === 2) { document.getElementById('play-pause-btn').innerText = "▶"; } else if (e.data === 0) { playMode === 'repeat' ? player.playVideo() : nextVideo(); } }
              function nextVideo() { currentIndex = (currentIndex + 1) % playlist.length; playAt(currentIndex); }
              function prevVideo() { currentIndex = (currentIndex - 1 + playlist.length) % playlist.length; playAt(currentIndex); }
              function changeVolume(val) { player.setVolume(val); }
              function updateUI() { document.getElementById('current-title').innerText = playlist[currentIndex].title; const items = document.querySelectorAll('.playlist-item'); items.forEach((item, idx) => item.classList.toggle('active', idx === currentIndex)); }
              document.addEventListener('click', function(e) { if (!document.getElementById('gemini-player').contains(e.target)) { document.getElementById('volume-popup').style.display = 'none'; document.getElementById('playlist-popup').style.display = 'none'; } });
          </script>
      <div class="#menubar menu_toolbar ">
  <h2 class="screen_out">티스토리툴바</h2>
</div>
<div class="#menubar menu_toolbar "></div>
<div class="layer_tooltip">
  <div class="inner_layer_tooltip">
    <p class="desc_g"></p>
  </div>
</div>
<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>

<script src="//search1.daumcdn.net/search/statics/common/js/fe/search-library-workspace/drag-search/1.0.2/main.js"></script>

</body>
      </html>

IPSI

Notice

Category

Menu

유포니엄 듀엣

티스토리툴바