[블로그 커스텀] 뮤직플레이어로 블로그에 배경음악 추가하기

 

 

 

음악이 재생중일때만 곡 정보(제목, 프로그레스바)가 표시되는 뮤직 플레이어

 

다크모드에서 이뻐보이도록 노을 색상으로 배경을 넣어 주었다.

음악 바뀔 때마다 하늘 색깔이 바뀌게 설정해 보니 이쁘다!

 

빌딩이랑 달은 무료 svg 사이트에서 가져와서 넣어주었습니다.

 

CSS 로 크기와 위치 조절해서 원하는 곳에 추가하면 된다.

 

참고로 블로그에서 구글 애드센스나 광고로 수익 창출하시는 분들은 배경음악은 자제해 주세요

상업적 목적으로 브금 쓰시면 노노노

 

 

[html 코드]

<div class="music-body">
  <div class="music-container" id="music-container">
      <div class="music-info">
          <h2 id="title" class="title"></h2>
          <div class="progress-container" id="progress-container">
          <div class="progress" id="progress"></div>
          </div>
      </div>
      <audio src=""
      id="audio"></audio>
      <div class="img-container">
      <img decoding="async" src=""
              alt="music-cover"
              id="cover" />
      </div>
      <div class="navigation">
          <button id="prev" class="action-btn">
          <i class="fas fa-backward"></i>
          </button>
          <button id="play" class="action-btn action-btn-big">
          <i class="fas fa-play"></i>
          </button>
          <button id="next" class="action-btn">
          <i class="fas fa-forward"></i>
          </button>
      </div>
      <div class="buildings-container">
        <img class="buildings" src="./images/moonbuildings.png" alt="">
      </div>
  </div>
</div>

 

[자바스크립트 소스]

<!-- 뮤직플레이어 js (24.12.03) -->
<script>
  const musicBody = document.querySelector(".music-body");
  const musicContainer = document.getElementById("music-container");
  const playButton = document.getElementById("play");
  const prevButton = document.getElementById("prev");
  const nextButton = document.getElementById("next");
  const audio = document.getElementById("audio");
  const progress = document.getElementById("progress");
  const progressContainer = document.getElementById("progress-container");
  const title = document.getElementById("title");
  const cover = document.getElementById("cover");

  // 개별 파일 경로와 이름 지정
  const songs = [
      {
      title: "음악제목1",
      audioPath: "음악경로1",
      imagePath: "이미지경로1",
      bgColor: "배경색1"
      },
      {
      title: "음악제목2",
      audioPath: "음악경로2",
      imagePath: "이미지경로2",
      bgColor: "배경색2"   
      },
      {
      title: "음악제목3",
      audioPath: "음악경로3",
      imagePath: "이미지경로3",
      bgColor: "이미지경로3"  
      },
  ];

  let songIndex = 0; // 기본으로 첫 번째 곡 설정

  // 노래 정보를 불러오는 함수
  function loadSong(song) {
      title.innerText = song.title; // 제목 설정
      audio.src = song.audioPath; // 오디오 경로 설정
      cover.src = song.imagePath; // 이미지 경로 설정
      musicBody.style.background = song.bgColor;
  }

  // 노래 재생
  function playSong() {
      musicContainer.classList.add("play");
      playButton.querySelector("i.fas").classList.remove("fa-play");
      playButton.querySelector("i.fas").classList.add("fa-pause");
      audio.play();
  }

  // 노래 일시 정지
  function pauseSong() {
      musicContainer.classList.remove("play");
      playButton.querySelector("i.fas").classList.remove("fa-pause");
      playButton.querySelector("i.fas").classList.add("fa-play");
      audio.pause();
  }

  // 이전 곡으로 이동
  function prevSong() {
      songIndex--;
      if (songIndex < 0) songIndex = songs.length - 1;
      loadSong(songs[songIndex]);
      playSong();
  }

  // 다음 곡으로 이동
  function nextSong() {
      songIndex++;
      if (songIndex > songs.length - 1) songIndex = 0;
      loadSong(songs[songIndex]);
      playSong();
  }

  // 진행 바 업데이트
  function updateProgress(e) {
      const { duration, currentTime } = e.srcElement;
      const progressPercent = (currentTime / duration) * 100;
      progress.style.width = `${progressPercent}%`;
  }

  // 진행 바 클릭 시 위치 설정
  function setProgress(e) {
      const width = this.clientWidth;
      const clickX = e.offsetX;
      const duration = audio.duration;
      audio.currentTime = (clickX / width) * duration;
  }

  // 이벤트 리스너
  playButton.addEventListener("click", () => {
      const isPlaying = musicContainer.classList.contains("play");
      isPlaying ? pauseSong() : playSong();
  });

  prevButton.addEventListener("click", prevSong);
  nextButton.addEventListener("click", nextSong);

  audio.addEventListener("timeupdate", updateProgress);
  progressContainer.addEventListener("click", setProgress);

  audio.addEventListener("ended", nextSong);

  // 첫 곡 로드
  loadSong(songs[songIndex]);
</script> 
<!-- 뮤직플레이어 js (24.12.03) 끝 -->

 

[CSS]는 비공개 >_<