时间戳

首页 > 解决方案 > YouTube API 音量控制

javascript - YouTube API 音量控制

问题描述

我有一个使用 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，但就像我说的那样，我需要它来更改音量而无需刷新页面。

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

谢谢！

标签： javascriptjqueryiframeyoutubeyoutube-api

解决方案

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

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

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

}

推荐阅读