ruffle-rs / ruffle

A Flash Player emulator written in Rust
https://ruffle.rs
Other
15.61k stars 809 forks source link

web: The AudioContext was not allowed to start - although there is no audio on the page. #2711

Open KMicha opened 3 years ago

KMicha commented 3 years ago

When I start the module at http://www.webgeo.de/g_001

I will get the "large, yellow buttons" although the script starts the ruffle player automatically. Sometimes the button is across the allready visible content, sometimes the content is not visible. ("F5" is needed to reproduce, when the module was played once.) In the console there are messages about "The AudioContext was not allowed to start". But as far as I can tell, there is no audio on the page. If there is any audio on any webgeo-page at all, it is inside a video, that must be additionally started manually.

Ruffle-Version: nightly 2021-01-21

g_001 www.webgeo.de-1611226399276.log

jtieri commented 1 year ago

I'm using ruffle-selfhosted to add support for a few flash movie files on my site via the nightly build here: https://github.com/ruffle-rs/ruffle/tree/nightly-2023-03-24

When I access the page that my SWF file is located the movie will start without issue, however, if you refresh the page then the movie will not autoplay and will display the same play button pictured in the original issue here. In the web console you will see these errors displayed also

Screen Shot 2023-03-23 at 11 41 27 PM

I realize modern browsers block autoplaying movies that have sound on them but there is no sound involved here.

Here is what my html/js looks like

<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<script>
    window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "autoplay": "on",
            "unmuteOverlay": "hidden",
            "splashScreen": false,
        };
        window.addEventListener("load", (event) => {
            const ruffle = window.RufflePlayer.newest();
            const player = ruffle.createPlayer();
            const container = document.getElementById("redacted");
            container.innerHTML = '';
            container.appendChild(player);
            player.load({
                url: 'https://redacted/redacted.swf',
                parameters: 'base=https://redacted&',
                allowScriptAccess: true,
            });
            player.style.width = "600px";
            player.style.height = "400px";
            player.style.frameRate = "8";
        });
</script> 

Edit: Not that I fully understand why this works but I seem to have solved my issue by

A. Moving the script that loads the ruffle package to the very top of <head>

<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

B. Breaking out the ruffle configuration into its own script before loading the player

<script>
    window.RufflePlayer = window.RufflePlayer \|\| {};
    window.RufflePlayer.config = {
    "autoplay": "on",
    "unmuteOverlay": "hidden",
    "splashScreen": false,
    };
</script>

C. Moving the script that calls player.load to the very bottom of <body> after the embedded SWF logic takes place