<![CDATA[
<p><html lang="ko"> <br><head> <br>  <meta charset="utf-8" /> <br>  <title>랜덤 음악 플레이어</title> <br>  <style> <br>    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto; padding: 24px; } <br>    button { margin: 6px; padding: 8px 12px; } <br>    .track { margin-top: 12px; } <br>  </style> <br></head> <br><body> <br>  <h1>랜덤 음악 플레이어</h1> <br><br>  <div> <br>    <button id="playBtn">재생</button> <br>    <button id="pauseBtn">일시정지</button> <br>    <button id="nextBtn">다음 (랜덤)</button> <br>    <label><input type="checkbox" id="repeatChk">반복</label> <br>  </div> <br><br>  <div class="track"> <br>    현재 재생: <span id="now">-</span> <br>  </div> <br><br>  <!-- 오디오 엘리먼트 (보이지 않아도 됨) --> <br>  <audio id="audio"></audio> <br><br>  <script> <br>    // 재생할 곡(파일 URL 또는 상대경로). 예: "music/song1.mp3" <br>    const tracks = [ <br>      "<a href="https://www.example.com/audio/song1.mp3" target="_blank" class="ke-link">https://www.example.com/audio/song1.mp3</a>", <br>      "<a href="https://www.example.com/audio/song2.mp3" target="_blank" class="ke-link">https://www.example.com/audio/song2.mp3</a>", <br>      "<a href="https://www.example.com/audio/song3.mp3" target="_blank" class="ke-link">https://www.example.com/audio/song3.mp3</a>" <br>    ]; <br><br>    // DOM <br>    const audio = document.getElementById("audio"); <br>    const playBtn = document.getElementById("playBtn"); <br>    const pauseBtn = document.getElementById("pauseBtn"); <br>    const nextBtn = document.getElementById("nextBtn"); <br>    const nowEl = document.getElementById("now"); <br>    const repeatChk = document.getElementById("repeatChk"); <br><br>    // 셔플 리스트와 인덱스 관리 (중복 없이 한 바퀴 돌고 다시 섞음) <br>    let shuffled = []; <br>    let idx = 0; <br><br>    function shuffleArray(arr) { <br>      // Fisher-Yates shuffle (original 배열을 변경하지 않음) <br>      const a = arr.slice(); <br>      for (let i = a.length - 1; i > 0; i--) { <br>        const j = Math.floor(Math.random() * (i + 1)); <br>        [a[i], a[j]] = [a[j], a[i]]; <br>      } <br>      return a; <br>    } <br><br>    function resetShuffle() { <br>      shuffled = shuffleArray(tracks); <br>      idx = 0; <br>    } <br><br>    function playCurrent() { <br>      if (!shuffled.length) resetShuffle(); <br>      const url = shuffled[idx]; <br>      audio.src = url; <br>      audio.play().catch(err => { <br>        console.warn("재생 실패(자동재생 차단 등):", err); <br>      }); <br>      nowEl.textContent = getFilename(url); <br>    } <br><br>    function getFilename(url) { <br>      try { <br>        return new URL(url).pathname.split("/").pop(); <br>      } catch (e) { <br>        return url; <br>      } <br>    } <br><br>    function playNext() { <br>      if (!shuffled.length) resetShuffle(); <br>      idx++; <br>      if (idx >= shuffled.length) { <br>        if (repeatChk.checked) { <br>          resetShuffle(); <br>        } else { <br>          // 재생 종료 <br>          idx = shuffled.length - 1; <br>          audio.pause(); <br>          nowEl.textContent = "재생 종료"; <br>          return; <br>        } <br>      } <br>      playCurrent(); <br>    } <br><br>    // 이벤트: 트랙 끝나면 자동으로 다음 재생 <br>    audio.addEventListener("ended", () => { <br>      playNext(); <br>    }); <br><br>    // 버튼 바인딩 <br>    playBtn.addEventListener("click", () => { <br>      // 사용자 상호작용 보장 -> 브라우저가 play 허용 <br>      if (!shuffled.length) resetShuffle(); <br>      // 만약 audio.src가 비어있다면 현재 트랙 재생 <br>      if (!audio.src) { <br>        playCurrent(); <br>      } else { <br>        audio.play().catch(err => console.warn(err)); <br>      } <br>    }); <br><br>    pauseBtn.addEventListener("click", () => { <br>      audio.pause(); <br>    }); <br><br>    nextBtn.addEventListener("click", () => { <br>      // 수동으로 다음곡 재생: 현재 인덱스 증가 후 재생 <br>      idx++; <br>      if (idx >= shuffled.length) { <br>        if (repeatChk.checked) resetShuffle(); <br>        else { <br>          idx = shuffled.length - 1; <br>          audio.pause(); <br>          nowEl.textContent = "마지막 곡"; <br>          return; <br>        } <br>      } <br>      playCurrent(); <br>    }); <br><br>    // 페이지 로드 시 셔플 준비 (자동 재생은 하지 않음) <br>    resetShuffle(); <br>  </script> <br></body> <br></html></p>
<!-- -->
]]>
카페 게시글
도사의컴퓨터강의
음악..랜덤으로 나오게 하는 자바스크립트 소스....
김종록
추천 0
조회 14
25.09.27 11:49
댓글 0
다음검색
