Как воспроизводить несколько звуков Youtube видео (по одному) только одной кнопкой - PullRequest
Новая
       15

Как воспроизводить несколько звуков Youtube видео (по одному) только одной кнопкой

0 голосов
/ 22 мая 2019

Я пытаюсь и почти удается воспроизводить звук из видео Youtube, используя только одну кнопку включения / выключения .

Все остальное работает нормально, всплывающие подсказки и смена имени, за исключением того, что я не могу изменить песню, которую должна воспроизводить кнопка.

Только кнопка № 2 может внести изменения (и кнопка 1), на кнопках 3 и 4 нет JS, они ОТКЛЮЧЕНЫ.

Это казалось простой простой задачей, но я не могу найти решения, работаю над ней некоторое время. Может кто-нибудь помочь?

https://jsfiddle.net/RobDelp/a1r86qn9/9/>
песня 1 не воспроизводится в JSFiddle, не знаю почему, в то время как на моем компьютере она играет нормально

Большое спасибо. Роберто. 

// =========== TEST ============
// ============ CHANGE SONG #1
$(".change_song1").on("click", function(e) {
  var YT_link = document.getElementById("youtube-audio");
  YT_link.setAttribute("data-video", "PMhfT7XsDoU");

  var testos = "Charlie Parker - All the things you are";
  document.getElementById("song_name").innerHTML = testos;
});

//==========CHANGE SONG #2 VALUE
$(".change_song2").on("click", function(e) {
  var YT_link = document.getElementById("youtube-audio");
  YT_link.setAttribute("data-video", "K3L5lB8hwcM");

  var testos = "Charlie Parker - Anthropology";
  document.getElementById("song_name").innerHTML = testos;
});
// ========== END TEST

$(".change_song3").on("click", function(e) {
  var testos = "Charlie Parker - Bloomdido";
  document.getElementById("song_name").innerHTML = testos;
});
$(".change_song4").on("click", function(e) {
  var testos = "Charlie Parker - Donna Lee";
  document.getElementById("song_name").innerHTML = testos;
}); // =========== TEST ============
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- SONG ACTIVATORS -->
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

<h4> ... Charlie Parker songs</h4>
<div class='btn-group btn-group-justified down010'>
  <div class='btn-group' role='group'>
    <a class='change_song1 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="Charlie Parker - All the things you are" data-placement='top'>SONG 1</a>
  </div>
  <div class='btn-group' role='group'>
    <a class='change_song2 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="Charlie Parker - Anthropology" data-placement='top'>SONG 2</a>
  </div>

  <div class='btn-group' role='group'>
    <a class='change_song3 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="DISABLED" data-placement='top'>SONG 3</a>
  </div>

  <div class='btn-group' role='group'>
    <a class='change_song4 btn btn-sm btn-success tooltip_color' data-toggle='tooltip' title="DISABLED" data-placement='top'>SONG 4</a>
  </div>
</div>

<div style='padding-top:20px;' data-video='PMhfT7XsDoU' data-autoplay='0' data-loop='1' id='youtube-audio'>
</div>

<h4 id='song_name'>Charlie Parker - All the things you are</h4>
...