Javascript 如何嵌入多个youtube音频

我想嵌入多个youtube音频，以便如果正在播放第一个音频，如果我想播放第二个音频，则第二个音频将播放，第一个音频将自动停止，如果我想播放第三个音频，则第二个音频将自动停止，第三个音频将播放

//2。此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
变量player1、player2、player3、player4；
函数onyoutubeiframeapiredy（）{
var ctrlq1=document.getElementById（“youtube-audio1”）；
ctrlq1.innerHTML=''；
ctrlq1.style.cssText='宽度：150px；边距：2em自动；光标：指针；光标：手；显示：无'；
ctrlq1.onclick=toggleAudio1；
player1=新的YT.Player（'youtube-player1'{
高度：“0”，
宽度：“0”，
videoId:ctrlq1.dataset.video，
playerVars：{
自动播放：ctrlq1.dataset.autoplay，
循环：ctrlq1.dataset.loop，
},
活动：{
“onReady”：onPlayerReady1，
“onStateChange”：onPlayerStateChange1
} 
});
var ctrlq2=document.getElementById（“youtube-audio2”）；
ctrlq2.innerHTML=''；
ctrlq2.style.cssText='宽度：150px；边距：2em自动；光标：指针；光标：手；显示：无'；
ctrlq2.onclick=toggleAudio2；
player2=新的YT.Player（'youtube-player2'{
高度：“0”，
宽度：“0”，
videoId:ctrlq2.dataset.video，
playerVars：{
自动播放：ctrlq2.dataset.autoplay，
循环：ctrlq2.dataset.loop，
},
活动：{
“onReady”：onPlayerReady2，
“onStateChange”：onPlayerStateChange2
} 
});
var ctrlq3=document.getElementById（“youtube-audio3”）；
ctrlq3.innerHTML=''；
ctrlq3.style.cssText='宽度：150px；边距：2em自动；光标：指针；光标：手；显示：无'；
ctrlq3.onclick=toggleAudio3；
player3=新的YT.Player（'youtube-player3'{
高度：“0”，
宽度：“0”，
videoId:ctrlq3.dataset.video，
playerVars：{
自动播放：ctrlq3.dataset.autoplay，
循环：ctrlq3.dataset.loop，
},
活动：{
“onReady”：onPlayerReady3，
“onStateChange”：onPlayerStateChange3
} 
});
var ctrlq4=document.getElementById（“youtube-audio4”）；
ctrlq4.innerHTML=''；
ctrlq4.style.cssText='宽度：150px；边距：2em自动；光标：指针；光标：手；显示：无'；
ctrlq4.onclick=toggleAudio4；
player4=新的YT.Player（'youtube-player4'{
高度：“0”，
宽度：“0”，
videoId:ctrlq4.dataset.video，
playerVars：{
自动播放：ctrlq4.dataset.autoplay，
循环：ctrlq4.dataset.loop，
},
活动：{
“onReady”：onPlayerReady4，
“onStateChange”：onPlayerStateChange4
} 
});
} 
功能切换PlayButton1（播放）{
document.getElementById（“youtube-icon1”）.src=playhttps://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
}
函数toggleAudio1（）{
如果（player1.getPlayerState（）=1 | | player1.getPlayerState（）=3）{
player1.pauseVideo（）；
切换PlayButton1（假）；
}否则{
player1.playVideo（）；
切换PlayButton1（真）；
} 
} 
功能切换PlayButton2（播放）{
document.getElementById（“youtube-icon2”）.src=playhttps://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
}
函数toggleAudio2（）{
如果（player2.getPlayerState（）=1 | | player2.getPlayerState（）=3）{
player2.pauseVideo（）；
切换PlayButton2（假）；
}否则{
player2.playVideo（）；
切换PlayButton2（真）；
} 
} 
功能切换PlayButton3（播放）{
document.getElementById（“youtube-icon3”）.src=playhttps://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
}
函数toggleAudio3（）{
如果（player3.getPlayerState（）=1 | | player3.getPlayerState（）=3）{
player3.pauseVideo（）；
切换PlayButton3（假）；
}否则{
player3.playVideo（）；
切换PlayButton3（真）；
} 
} 
功能切换PlayButton4（播放）{
document.getElementById（“youtube-icon4”）.src=playhttps://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
}
函数toggleAudio4（）{
如果（player4.getPlayerState（）=1 | | player4.getPlayerState（）=3）{
player4.pauseVideo（）；
切换PlayButton4（假）；
}否则{
player4.playVideo（）；
切换PlayButton4（真）；
} 
} 
函数onPlayerReady1（事件）{
player1.设置播放质量（“小”）；
document.getElementById（“youtube-audio1”）.style.display=“block”；
切换PlayButton1（player1.getPlayerState（）！==5）；
}
函数onPlayerStateChange1（事件）{
如果（event.data==0）{
切换PlayButton1（假）；
}
}
函数onPlayerReady2（事件）{
player2.设置播放质量（“小”）；
document.getElementById（“youtube-audio2”）.style.display=“block”；
切换PlayButton2（player2.getPlayerState（）！==5）；
}
函数onPlayerStateChange2（事件）{
如果（event.data==0）{
切换PlayButton2（假）；
}
}
函数onPlayerReady3（事件）{
player3.设置播放质量（“小”）；
document.getElementById（“youtube-audio3”）.style.display=“block”；
切换PlayButton3（player3.getPlayerState（）！==5）；
}
函数onPlayerStateChange3（事件）{
如果（event.data==0）{
切换PlayButton3（假）；
}
}
函数onPlayerReady4（事件）{
player4.设置播放质量（“小”）；
document.getElementById（“youtube-audio4”）.style.display=“block”；
切换PlayButton4（player4.getPlayerState（）！==5）；
}
函数onPlayerStateChange4（事件）{
如果（event.data==0）{
切换PlayButton4（假）；
}
}
<div data-video = "....">
    data-autoplay = "0";
    data-loop = "1";
    id= "youtube-audio";
</div>
<script src = "https://www.youtube.com/iframe_api"></script>
<script src = "https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

    <div data-video="VIDEO_ID"  
         data-autoplay="0"         
         data-loop="1"             
         id="youtube-audio">
  </div>
  <script src="https://www.youtube.com/iframe_api"></script>
  <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

function pauseAll() {
  player1.pauseVideo(); 
  togglePlayButton1(false);
  player2.pauseVideo(); 
  togglePlayButton2(false);
  ....etc
}

function toggleAudio1() {
  if ( player1.getPlayerState() == 1 || player1.getPlayerState() == 3 ) {
    player1.pauseVideo(); 
    togglePlayButton1(false);
  } else {

    pauseAll();       <---

    player1.playVideo(); 
    togglePlayButton1(true);
  } 
} 

<!doctype html>
  <html>
    <head>
      <meta charset = "UTF-8"/>
      <title>Example</title>
    </head>

    <body>
      <button><div data-video = "....">
       data-autoplay = "0";
       data-loop = "1";
       id= "youtube-audio";
      </div></button>
      <script src = "https://www.youtube.com/iframe_api"></script>
      <script src = "https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
    </body>

  </html>