Tistory 배경 음악 설정 방법

 

 

일단 블로그에 mp3 파일을 올려주세요

저는 비공개로 올려서 저만 볼 수 있게 했습니다

 

 <div class="music_player">
    <div class="music_player_background">
      <marquee class="song_name"direction="left" scrolldelay="200">8PM - Animal Crossing Wild World</marquee>
      <audio id="audio" loop>
        <source src="파일 주소" type="audio/mpeg">
      </audio>
      <button class="play_button" id="playButton" onclick="togglePlay()"></button>
    </div>
 </div>

 

 

mp3 파일 우클릭 후

'새 창에서 링크 열기'를 선택해서

나오는 링크를 저기 파일 주소에 넣어주세요

 

let isPlaying = false;

function togglePlay() {
  const playButton = document.getElementById('playButton');
  const audio = document.getElementById('audio');
  
  if (isPlaying) {
      // 음악이 재생 중이면 일시정지
      audio.pause();
  } else {
      // 음악이 일시정지 중이면 재생
      audio.play();
  }
  isPlaying = !isPlaying; // 상태 토글
}

 

 

버튼에 자바 스크립트 기능을

연결하고 bool 값을 이용해

toggle처럼 작동할 수 있게 해주었습니다