Soundcloud Widget API gives Error only in Chrome: The AudioContext was not allowed to start

Question

I had an simple Player on my Website where a Soundcloud Track can be played. I'm using the Widget API. Everything was working fine the last weeks, but now i get this Error in Chrome Browser (Desktop): The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

I just simplified the code for you:

<!-- Own Play Button -->
<div id="playBtn">Play</div>

<!-- SC Widget -->
<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/406078437" scrolling="no" frameborder="no"></iframe>

<!-- JS -->
<script src="/src/vendors/jquery-3.3.1/jquery.min.js"></script>
<script src="/src/vendors/sc-widget-api/sc-widget-api.js"></script>
<script>
    $(document).ready(function()
    {
        var widgetIframe   = document.getElementById('sc-widget');
        var widget         = SC.Widget(widgetIframe);

        widget.bind(SC.Widget.Events.READY, function()
        {

        });

        $('#playBtn').on('click', function()
        {
            widget.play();
        })

    });
</script>

When I use the Soundcloud widget Button itself, I get this Error message too, but it plays the song.

When I use my own Playbutton I get this Error message and the song does not play. Was working the last days.

I think Chrome changed something, but I'm not sure how to get this to work now? I hope you can help me <3

Answer 1

(Just for cleaning up, I turn the question author's edit to the question into an answer and will undo the edit).

Just add the attribute allow="autoplay" to the iframe and it works fine!