Youtube Player API로 유튜브 음소거(mute) 제어하기 (javascript 사용가능)

토글버튼으로 mute/unmute 제어하기

유튜브 플레이어 API 공식문서

<iframe id="youtubePlayer01"  class="toggleYoutubeSound"  src="유튜브 경로" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
<button class="toggleYoutubeSoundBtn">🔈</button>

youtubePlayer01.unMute(); // 음소거 해제
youtubePlayer01.mute(); // 음소거
youtubePlayer01.isMute(); // 음소거 상태 확인(boolean타입)

* isMute()는 사용시 오류가 있어서 사용하지 않고, 전역 변수를 만들어서 관리했다.

 

초기 세팅

        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var youtubePlayer01;
        var isMuted01 = true;

        function onYouTubeIframeAPIReady() { // 유튜브 로딩되면 바로 실행되는 API 관련 함수
          youtubePlayer01 = new YT.Player('youtubePlayer01', { // iframe ID 값
            playerVars:{
              rel:0
            }
          });
        }

 

- onYouTubeIframeAPIReady함수는 다른 곳에서 불러와 사용할 수는 없다. 
   예시) onYouTubeIframeAPIReady(); ❌

- 여러개의 player를 사용한다면 그만큼 변수와 함수를 선언 해줘야한다. 

var youtubePlayer02;
var isMuted02 = true;
var youtubePlayer03;
var isMuted03 = true;
.
.
.

 

- new YT.Player다음에 나온 youtubePlayer01은 iframe 태그의 ID값이다.

 

토글버튼으로 음소거/음소거 해제

$(".toggleYoutubeSoundBtn").on("click",function(e){
  e.preventDefault();
  // 한 개 일 때
  if($(this).siblings("#youtubePlayer01")){
    if (youtubePlayer01) {
      if(isMuted01){
        youtubePlayer01.unMute(); // 음소거 설정
        $(this).text("🔊");
        isMuted01 = false;
      } else{
        youtubePlayer01.mute(); // 음소거 설정
        $(this).text("🔈")
        isMuted01 = true;
      }
    }
  }

  // 한 개 이상 반복문
//   for(i=1; i < $('.toggleYoutubeSoundBtn').length + 1; i++){
//     if($(this).siblings().hasClass("youtubePlayer0" + i)){
//       let player = window["youtubePlayer0" + i];
//       if (player) {
//         if(window["isMuted0" + i]){
//           player.unMute(); // 음소거 설정
//           $(this).text("🔊");
//           window["isMuted0" + i] = false;
//         } else{
//           player.mute(); // 음소거 설정
//           $(this).text("🔈")
//           window["isMuted0" + i] = true;
//         }
//       }
//     }
//   }


})