연습장:Yuc/2 문서 원본 보기

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 음악 선택</title>
</head>
<body>
    <label for="musicSelect"></label>
    <select id="musicSelect">
        <option value="audio1">dilkenition extended</option>
        <option value="audio2">눈의 진군 (걸판ver)</option>
    </select>
    <button id="toggleMusic">음악 재생</button> <!-- 버튼으로 음악 ON/OFF -->
    <audio id="audio1" preload="auto">
        <source src="https://evewiki.kr/w/images/c/c4/Mauve_-_dilkenition_extended.mp3" type="audio/mpeg">
    </audio>
    
    <audio id="audio2" preload="auto">
        <source src="https://evewiki.kr/w/images/9/9f/%EB%88%88%EC%9D%98%EC%A7%84%EA%B5%B0_%28%EA%B1%B8%ED%8C%90%29.mp3" type="audio/mpeg">
    </audio>
    <!-- 플레이바 추가 -->
    <div>
        <input type="range" id="playbackBar" value="0" max="100" step="1" style="width: 100%;">
        <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
    </div>
    <script>
        var audio1 = document.getElementById("audio1");
        var audio2 = document.getElementById("audio2");
        var musicSelect = document.getElementById("musicSelect");
        var toggleButton = document.getElementById("toggleMusic");
        var playbackBar = document.getElementById("playbackBar");
        var currentTimeDisplay = document.getElementById("currentTime");
        var durationDisplay = document.getElementById("duration");
        
        var isPlaying = false; // 현재 음악 재생 상태 확인 변수
        var currentAudio = audio1; // 기본 음악 설정
        audio1.volume = 0.15;
        audio2.volume = 0.15;
        
        // 음악 길이 업데이트
        function updateDuration(audio) {
            audio.addEventListener("loadeddata", function() {
                var duration = audio.duration;
                var durationMinutes = Math.floor(duration / 60);
                var durationSeconds = Math.floor(duration % 60);
                durationDisplay.textContent = durationMinutes + ":" + (durationSeconds < 10 ? "0" + durationSeconds : durationSeconds);
            });
        }
        
        // 음악 선택 시 변경
        musicSelect.addEventListener("change", function() {
            // 기존 음악 멈추기
            currentAudio.pause();
            currentAudio.currentTime = 0; // 음악을 처음부터 시작하게 설정
            // 새로운 음악 설정
            currentAudio = document.getElementById(musicSelect.value);
            // 음악이 정지되어 있으면 바로 재생
            if (isPlaying) {
                currentAudio.play();
            }
            // 음악 길이 업데이트
            updateDuration(currentAudio);
            // 플레이바 초기화 및 업데이트
            playbackBar.value = 0;
            // 현재 음악에 대한 timeupdate 이벤트 등록
            updateTimeUpdateEvent(currentAudio);
        });
        // 버튼 클릭 시 음악 재생/정지 토글
        toggleButton.addEventListener("click", function() {
            if (!isPlaying) {
                currentAudio.play();
                toggleButton.textContent = "음악 정지"; // 버튼 텍스트 변경
                isPlaying = true;
            } else {
                currentAudio.pause();
                toggleButton.textContent = "음악 재생"; // 버튼 텍스트 변경
                isPlaying = false;
            }
        });
        // 음악이 끝나면 자동으로 다음 음악 재생
        audio1.addEventListener("ended", function() {
            if (currentAudio === audio1) {
                musicSelect.value = "audio2";
                currentAudio = audio2;
                if (isPlaying) currentAudio.play();
                updateDuration(currentAudio);
                updateTimeUpdateEvent(currentAudio);
            }
        });
        audio2.addEventListener("ended", function() {
            if (currentAudio === audio2) {
                musicSelect.value = "audio1";
                currentAudio = audio1;
                if (isPlaying) currentAudio.play();
                updateDuration(currentAudio);
                updateTimeUpdateEvent(currentAudio);
            }
        });
        // 음악 진행 상황 업데이트
        function updateTimeUpdateEvent(audio) {
            audio.removeEventListener("timeupdate", onTimeUpdate);
            audio.addEventListener("timeupdate", onTimeUpdate);
        }
        // timeupdate 이벤트 핸들러
        function onTimeUpdate() {
            var currentTime = currentAudio.currentTime;
            var duration = currentAudio.duration;
            // 진행 시간과 길이 표시
            var currentMinutes = Math.floor(currentTime / 60);
            var currentSeconds = Math.floor(currentTime % 60);
            currentTimeDisplay.textContent = currentMinutes + ":" + (currentSeconds < 10 ? "0" + currentSeconds : currentSeconds);
            var durationMinutes = Math.floor(duration / 60);
            var durationSeconds = Math.floor(duration % 60);
            durationDisplay.textContent = durationMinutes + ":" + (durationSeconds < 10 ? "0" + durationSeconds : durationSeconds);
            // 플레이바 업데이트
            var progress = (currentTime / duration) * 100;
            playbackBar.value = progress;
        }
        // 플레이바 클릭 시 음악 위치 변경
        playbackBar.addEventListener("input", function() {
            var newTime = (playbackBar.value / 100) * currentAudio.duration;
            currentAudio.currentTime = newTime;
        });
        // 처음 오디오의 길이 업데이트
        updateDuration(audio1);
        updateTimeUpdateEvent(audio1);
    </script>
</body>
</html>

== . ==

{| class="wikitable" style="border: 2px solid #1b0e64; width: 100%; text-align: center"
! colspan="12" style="color: #29176E; background-image: linear-gradient(to right, #190D43, #29176E 20%, #29176E 80%, #190D43)"|[[파일:대한제국 국장.svg|40px|link=]]<br>{{color|#FFD400|조선 이왕}}
|-
| style="background-image:linear-gradient(to right, #190D43, #29176E 20%, #29176E 80%, #190D43)" | <div class="mw-customtoggle-Great_Empire" style="color:#FFD400; text-align:center; font-size:10.5pt"><div style="margin-left:2.5px; margin-top:-2.0px">'''[ 펼치기  ·  접기 ]'''</div></div>
<div id="mw-customcollapsible-Great_Empire" class="mw-collapsible mw-collapsed">
<div class="mw-collapsible-content" style="margin:0px -10.0px 0px; background:none">
{| class="dark:bg-evewiki-010" style="margin:4.0px 0px -6.0px 0.0px; width:100%; background:#FFF; text-align:center; font-size:10.5pt"
|-
| width=30% colspan="1" style="width: 25%; background: #29176E; color: #FFD400; font-size: 9pt" | 초대
| colspan="1" style="width: 25%; background: #29176E; color: #FFD400; font-size: 9pt" | 제2대
| colspan="1" style="width: 25%; background: #29176E; color: #FFD400; font-size: 9pt" | 제3대
|-
| width=30% colspan="1" | <div style="margin:0px -9.0px; word-break:keep-all">이은</div>
| width=30% colspan="1" | <div style="margin:0px -9.0px; word-break:keep-all">이구</div>
| width=30% colspan="1" | <div style="margin:0px -9.0px; word-break:keep-all">이원</div>
|-
|}
|}

== 2 ==
{| class="wikitable" style="border:2px solid #2fc38d; background:#f7fffc; width:100%; max-width:420px; font-size:11pt; margin:auto; border-collapse:separate; border-radius:16px; overflow:hidden;"
|-
! colspan="2" style="background:#222; color:#fff; font-size:18px; text-align:center; padding:14px; border-top-left-radius:16px; border-top-right-radius:16px;" | 이름<br><span style="font-size:12px; color:#a8f2d1;">Name</span>
|-
| colspan="2" style="padding:0;" | [[파일:이미지.png|center|420px]]
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 생일
|
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 나이
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | MBTI
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 상징색
| <span style="background:#2fc38d; color:#fff; padding:3px 6px; border-radius:5px;">민트 (#2fc38d)</span>
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 신체
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 팬네임
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 첫 방송일
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 별명
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 소속
| 
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 플랫폼
| [[파일:치지직 아이콘.svg|18px]] 치지직 / [[파일:유튜브 아이콘.svg|18px]] 유튜브
|-
! style="background:#e9fcf5; color:#2c2c2c;" | 커뮤니티
| 
|-
! colspan="2" style="background:#f0f0f0; color:#222; text-align:center; font-weight:bold; border-top:2px solid #2fc38d;" | 플랫폼 현황 (2025년 5월 12일 기준)
|-
| style="background:#ffffff;" | 치지직 구독자
| style="background:#ffffff;" | <span style="color:#2fc38d; font-weight:bold;">명</span>
|-
| style="background:#ffffff; border-bottom-left-radius:16px;" | 유튜브 구독자
| style="background:#ffffff; border-bottom-right-radius:16px;" | <span style="color:#2fc38d; font-weight:bold;">명</span>
|}
{{-}}