YouTube API 音量控制

Posted 2023-05-09

【中文标题】YouTube API 音量控制

【英文标题】：YouTube API volume control

【发布时间】：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。

【参考方案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);