Je veux incorporer plusieurs fichiers audio YouTube afin que si le 1er audio est en cours de lecture et si je veux lire le 2e audio, le 2e audio sera lu et le 1er audio s'arrêtera automatiquement et si je veux lire le 3e audio, le 2e audio s'arrêtera automatiquement et le 3e audio jouera.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player1, player2, player3, player4;
  function onYouTubeIframeAPIReady() {

    var ctrlq1 = document.getElementById("youtube-audio1");
    ctrlq1.innerHTML = '<img id="youtube-icon1" src=""/><div id="youtube-player1"></div>';
    ctrlq1.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq1.onclick = toggleAudio1;

    player1 = new YT.Player('youtube-player1', {
      height: '0',
      width: '0',
      videoId: ctrlq1.dataset.video,
      playerVars: {
        autoplay: ctrlq1.dataset.autoplay,
        loop: ctrlq1.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady1,
        'onStateChange': onPlayerStateChange1 
      } 
    });

    var ctrlq2 = document.getElementById("youtube-audio2");
    ctrlq2.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player2"></div>';
    ctrlq2.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq2.onclick = toggleAudio2;

    player2 = new YT.Player('youtube-player2', {
      height: '0',
      width: '0',
      videoId: ctrlq2.dataset.video,
      playerVars: {
        autoplay: ctrlq2.dataset.autoplay,
        loop: ctrlq2.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady2,
        'onStateChange': onPlayerStateChange2
      } 
    });

    var ctrlq3 = document.getElementById("youtube-audio3");
    ctrlq3.innerHTML = '<img id="youtube-icon3" src=""/><div id="youtube-player3"></div>';
    ctrlq3.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq3.onclick = toggleAudio3;

    player3 = new YT.Player('youtube-player3', {
      height: '0',
      width: '0',
      videoId: ctrlq3.dataset.video,
      playerVars: {
        autoplay: ctrlq3.dataset.autoplay,
        loop: ctrlq3.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady3,
        'onStateChange': onPlayerStateChange3 
      } 
    });

    var ctrlq4 = document.getElementById("youtube-audio4");
    ctrlq4.innerHTML = '<img id="youtube-icon4" src=""/><div id="youtube-player4"></div>';
    ctrlq4.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq4.onclick = toggleAudio4;

    player4 = new YT.Player('youtube-player4', {
      height: '0',
      width: '0',
      videoId: ctrlq4.dataset.video,
      playerVars: {
        autoplay: ctrlq4.dataset.autoplay,
        loop: ctrlq4.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady4,
        'onStateChange': onPlayerStateChange4 
      } 
    });
  } 

  function togglePlayButton1(play) {    
    document.getElementById("youtube-icon1").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

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

  function togglePlayButton2(play) {    
    document.getElementById("youtube-icon2").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio2() {
    if ( player2.getPlayerState() == 1 || player2.getPlayerState() == 3 ) {
      player2.pauseVideo(); 
      togglePlayButton2(false);
    } else {
      player2.playVideo(); 
      togglePlayButton2(true);
    } 
  } 

  function togglePlayButton3(play) {    
    document.getElementById("youtube-icon3").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio3() {
    if ( player3.getPlayerState() == 1 || player3.getPlayerState() == 3 ) {
      player3.pauseVideo(); 
      togglePlayButton3(false);
    } else {
      player3.playVideo(); 
      togglePlayButton3(true);
    } 
  } 

  function togglePlayButton4(play) {    
    document.getElementById("youtube-icon4").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio4() {
    if ( player4.getPlayerState() == 1 || player4.getPlayerState() == 3 ) {
      player4.pauseVideo(); 
      togglePlayButton4(false);
    } else {
      player4.playVideo(); 
      togglePlayButton4(true);
    } 
  } 

  function onPlayerReady1(event) {
    player1.setPlaybackQuality("small");
    document.getElementById("youtube-audio1").style.display = "block";
    togglePlayButton1(player1.getPlayerState() !== 5);
  }

  function onPlayerStateChange1(event) {
    if (event.data === 0) {
      togglePlayButton1(false); 
    }
  }

  function onPlayerReady2(event) {
    player2.setPlaybackQuality("small");
    document.getElementById("youtube-audio2").style.display = "block";
    togglePlayButton2(player2.getPlayerState() !== 5);
  }

  function onPlayerStateChange2(event) {
    if (event.data === 0) {
      togglePlayButton2(false); 
    }
  }

  function onPlayerReady3(event) {
    player3.setPlaybackQuality("small");
    document.getElementById("youtube-audio3").style.display = "block";
    togglePlayButton3(player3.getPlayerState() !== 5);
  }

  function onPlayerStateChange3(event) {
    if (event.data === 0) {
      togglePlayButton3(false); 
    }
  }

  function onPlayerReady4(event) {
    player4.setPlaybackQuality("small");
    document.getElementById("youtube-audio4").style.display = "block";
    togglePlayButton4(player4.getPlayerState() !== 5);
  }

  function onPlayerStateChange4(event) {
    if (event.data === 0) {
      togglePlayButton4(false); 
    }
  }
  
<div data-video="DMl1YJyqEdo" > 
<div style="display:flex;justify-content:center;align-items:center;">
    <div style="width:400px;height:300px;">
        <div data-video="JC08Fu3QfJg" data-autoplay="0" data-loop="1" id="youtube-audio1"></div>
        <div data-video="7_WWz2DSnT8" data-autoplay="0" data-loop="1" id="youtube-audio2"></div>
        <div data-video="t3217H8JppI" data-autoplay="0" data-loop="1" id="youtube-audio3"></div>
        <div data-video="cbZ7V2ifh20" data-autoplay="0" data-loop="1" id="youtube-audio4"></div>
        
    </div>
</div>
</div>
0
Arpit Gupta 12 avril 2018 à 15:57

5 réponses

Meilleure réponse
<!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>

Je ne sais pas si c'est ce que tu voulais dire. Ne vous y trompez pas, cela ne fonctionnera pas tant que vous n'entrerez pas de partie après v = dans l'adresse http de votre vidéo dans div data-video =

1
Javanew 13 avril 2018 à 06:28

Recherchez simplement la vidéo dont vous voulez "extraire" l'audio. Copiez ensuite la partie après "v = ..." à partir de son adresse http. Insérez ensuite ceci dans votre code html:

<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>

J'espère que cela répond à votre question!

0
Javanew 12 avril 2018 à 13:11
function pauseAll() {
  player1.pauseVideo(); 
  togglePlayButton1(false);
  player2.pauseVideo(); 
  togglePlayButton2(false);
  ....etc
}

Puis ajouter

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

    pauseAll();       <---

    player1.playVideo(); 
    togglePlayButton1(true);
  } 
} 
0
HollyLeaves 12 avril 2018 à 14:33
    <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>

Recommandé pour voir l'article complet https://www.labnol.org/internet/youtube-audio-player / 26740 /

0
Sharifur Robin 12 avril 2018 à 13:15
<!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>

N'oubliez pas que vous devez nommer le butteon, sinon il vous suffira d'afficher votre code,

0
Javanew 13 avril 2018 à 06:17