험난했던 하루

내일배움단 미니프로젝트 cheese_project

youtube 음악을 자동재생 하는 것은 chrome 문제로 불가능하다..는 것을 알았다..
음소거로 하면 자동재생이 가능하다는 이상한 점도 알게 됌..

유튭 음악을 재생하는 박스를 만드는 것은 정말 쉬웠는데 이걸 버튼과 연결하는게 어려웠다.

특정 버튼과 연결하여 재생과 일시정지가 가능하도록 여러 시도를 해봤지만 실패했다

가장 큰 원인은 chat gpt를 이용하여 하다가 독자적으로 하다가 다른 개발자분의 게시물을 참고하다가.. 결국 다 섞여버렸는데 어설프게 작동이 되어 이도저도 못하고 포기했다...

아예 안 되면 싹 밀어버리고 하겠는데 버튼을 누르면 노래가 첨부터 시작된다던지 하는 이상한 일이 생겨서 하.. ㅠ

그래서 결국 방법은 내가 아니라 팀원분이 찾아 주셨다.

우선은 노래를 mp3파일로 준비하고
html

<div class="bgm">
                  <button type="boutton" id="play-pause-button" class="btn">bgm on ♫</button>
                <audio id="audio-player">
                  <source src="../static/af.mp3" type="audio/mpeg">                  
                </div>            

css

$(document).ready(function () {
  var audioPlayer = document.getElementById('audio-player');
  var playPauseButton = document.getElementById('play-pause-button');
  var isPlaying = false;

  playPauseButton.addEventListener('click', function () {
    if (isPlaying) {
      audioPlayer.pause();
      playPauseButton.textContent = 'bgm on ♫';
      isPlaying = false;
    } else {
      audioPlayer.currentTime = 3;
      audioPlayer.play();
      playPauseButton.textContent = 'bgm off 🔇';
      isPlaying = true;
    }
  });
});

하면 끝!

이 상태에서 자동재생 하려다가 실패..

audioPlayer.currentTime = 3;

는 전주 없이 재생하기 위해 앞 3초를 자르려고 넣은 것임.

///////////////////////////////////////

<a href="#">

이 녀석은 이유도 모르고 삽질하게 만든 코드..
저 #이 없어도 되고 있어도 되고 있으면 안되는데 없어도 안되는 아주 난장판이었다.. 사실 아직도 저게 왜 있어야 되는지, 없어야 되면 왜 없어야 하는지 의문... 언젠가 깨달을 수 있겠지