Search code examples
youtubeyoutube-apishuffle

Youtube API; shuffle playlist?


So for some time now I am trying to make a proper shuffle script, using the youtube api, in order to play my youtube playlist. I've found a lot of examples, but none of them seem to be working very well. Some do shuffle the list but not the first song being played, and some do the precise opposite.

What I would like is to shuffle the full playlist and then start playing. So the first played song should be random and the next one played should be random/shuffled as well.

Ive found the script below to shuffle the playlist. However the first song played is not shuffled. Can someone help me out with this? Thanks a million!

<html>
  <body>
    <div id="player"></div>
    <script>
        // 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.
        function onYouTubeIframeAPIReady() {
            var player = new YT.Player("player", {
                height: '390',
                width: '640',
                events: {
                    'onReady': function (event) {
                        event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                        event.target.playVideo();
                        setTimeout(function() {
                            event.target.setShuffle({'shufflePlaylist' : true});
                        }, 1000);
                    }
                }
            });
        }
    </script>
  </body>
</html>

Solution

  • This worked for me!

    <html>
      <body>
        <div id="player"></div>
        <script>
            // 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.
            function onYouTubeIframeAPIReady() {
                var numPl = Math.floor((Math.random() * 50) + 1);
                var player = new YT.Player("player", {
                    height: '390',
                    width: '640',
                    playerVars: {
                        listType:'playlist',
                        list:'PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT',
                        index: numPl,
                        autoplay: 1,
        },
                    events: {
                        'onReady': function (event) {
                            //event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                            //event.target.playVideo();
                            setTimeout(function() {
                                event.target.setShuffle({'shufflePlaylist' : true});
                            }, 1000);
                        }
                    }
                });
            }
        </script>
      </body>
    </html>