1

I have a problem. When I go to Spotify and get the iframe code, I want it to play automatically and on repeat on my website.

I've tried the following:

<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Also tried

<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" <button title="Play" class="b8 b9 ba ao bb bc bd be bf bg bh bi bj"><svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; color: white;"><title>Play</title><path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill="currentColor" fill-rule="evenodd"></path></svg></button> onclick="myFunction()">width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

I can't figure it out. Any ideas? I basically need it to loop.

m4n0
  • 29,823
  • 27
  • 76
  • 89
Sergio Gomez
  • 11
  • 1
  • 2
  • Does this answer your question? [How to play and pause Spotify embed with JAVASCRIPT?](https://stackoverflow.com/questions/71979852/how-to-play-and-pause-spotify-embed-with-javascript) – zhuhang.jasper Feb 02 '23 at 13:39

1 Answers1

0

Your second example is incorrect as you are mixing HTML for an IFRAME and a BUTTON element together.

Spotify does not allow you to auto-play its embedded player. It's unfortunate as I would like to do this too.

The closest I have got was to create a locally hosted copy of the embed on my web site, and then add Javascript to manually 'click' the Play button.

The Javascript goes before the closing </BODY> tag:

<script>
    function autoplay() {
        var t = setTimeout(function(){
            var button = document.querySelector('[title="Play"]') || false;
            if (button) {
                console.log('Click', button)
                button.click()
            }
        }, 999)
    }
    document.addEventListener('DOMContentLoaded', (event) => {
        autoplay()
    })
</script>

The timeout might not be necessary but I include it anyway.

This has worked for me inconsistently. It works the first time but then and subsequent refreshing of the page it won't. I am unable to get further than that.

It works every time if you try this in the Developer Console:

document.querySelector('[title="Play"]')

If you figure it out - please post here.

donohoe
  • 13,867
  • 4
  • 37
  • 59
  • because of cors, the locally hosted version only gave me a preview (30 second snippet) of the song. What did you do to get the whole song from the locally hosted version? – LoLucky Sep 04 '22 at 00:07