YouTube API 音量控制答案

【问题标题】：YouTube API volume controlYouTube API 音量控制
【发布时间】：2021-04-10 18:26:00
【问题描述】：

我有一个使用 YouTube API 的嵌入式 iframe。

我还嵌入了一个 LastFM API，用于显示当前正在播放的歌曲。如果没有歌曲在播放，那么它会使用 CSS 消失。

我想要发生的是当歌曲消失（未播放）时，iframe 的音量已满，但当歌曲正在播放时，iframe 被静音。页面上的歌曲通过 ajax 动态变化。

现在我的音量在 0 到 100 之间正确变化，但它需要重新加载页面才能让 iframe 承担新的音量。

我不确定是否可以在不重新加载页面的情况下动态使用 YouTube API。

下面是代码：

HTML

<div id="newsPlayer"></div>

<!--Spotify-->
<div id="spotify">
 <img id="spotifyLogo" src="/img/spotifyLogo.png">
 <p>Currently listening to: <p id="track"></p> on Sams's Spotify </p>
 <img id="artwork">
</div>

JavaScript

$(function refreshMusic() {
  $.ajaxSetup ({
    cache: false,
    complete: function () {
      setTimeout (refreshMusic, 1000);
    }
  })


username="*******";
key="************************";



$.get( "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=" + username + "&api_key=" + key + "&format=json", function( spotifyData ) 
{


    if (typeof spotifyData.recenttracks.track[0]["@attr"] != "undefined")
    {
        artist=spotifyData.recenttracks.track[0].artist["#text"];
        track=spotifyData.recenttracks.track[0].name;
        album=spotifyData.recenttracks.track[0].album["#text"];
        artwork=spotifyData.recenttracks.track[0].image[1]["#text"];
        $("#artwork").attr("src", artwork).removeClass("hideArtwork");
      $("#track").html(track + " by " + artist + " from " + album);
      window.volume = "0";
  
  
  }
  else {
    $("#artwork").addClass("hideArtwork");
    $("#track").html("Nothing");
    window.volume = "100";
    
  }

  
});


});


//YouTube API

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


//This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;

function onYouTubePlayerAPIReady() {
    
    player = new YT.Player('newsPlayer', {

        videoId: '9Auq9mYxFEE',
        playerVars: {'autohide': 0,
                    'cc_load_policy': 0,
                    'controls': 1,
                    'disablekb': 1,
                    'iv_load_policy': 3,
                    'modestbranding': 1,
                    'rel': 0,
                    'showinfo': 0,
                    'autoplay': 1,
                    'm':0
                    
                    },
                    events: {
                      'onReady': function(newsVolume){
                        newsVolume.target.setVolume(window.volume);
                      },
                      
                      
                    }
    });

}


function onPlayerStateChange(event) {
  event.target.setVolume(window.volume);
  // event.target.playVideo();
}

window.volume 正在将正确的音量传递给 Youtube API，但就像我说的那样，我需要它来更改音量而无需刷新页面。

我觉得我已经很接近了，但无法克服最后的障碍！

谢谢！

【问题讨论】：

您有设计问题。我没有看到 volume 是窗口的属性。您想调用与加载 AJAX 相同的函数吗？昂贵的。你应该在onYouTubePlayerAPIReady 中运行你的jQuery 就绪$(function(){})。 .ajaxSetup 只有一次，不是递归的。只是 cmets。

标签： javascript jquery iframe youtube youtube-api

【解决方案1】：

事实证明我非常接近，只需要以下内容：

每半秒运行或“检查”一次更改并做出相应反应。

var player;

function onYouTubePlayerAPIReady() {
    
    player = new YT.Player('newsPlayer', {

        videoId: '9Auq9mYxFEE',
        playerVars: {'autohide': 0,
                    'cc_load_policy': 0,
                    'controls': 1,
                    'disablekb': 1,
                    'iv_load_policy': 3,
                    'modestbranding': 1,
                    'rel': 0,
                    'showinfo': 0,
                    'autoplay': 1,
                    'm':0
                    
                    },
                    events: {
                      // 'onReady': function(newsVolume){
                      //   newsVolume.target.setVolume(volume);
                      // },
                      onStateChange: onPlayerStateChange
                      
                    }
    });



function onPlayerStateChange(event) {
  if($("#artwork").hasClass("hideArtwork")){
    player.unMute();
    // alert("nothing is playing on music");
  }
  else
  {
        player.mute();
        // alert("music is playing");
        
  }
}

setInterval(onPlayerStateChange, 500);

}

【讨论】：