How to embed Ruffle flash player emulator into HTML file?

I need help on implementing a swf into my HTML site with ruffle (https://ruffle.rs/), I added "AddType application/wasm .wasm" into httpd.conf in in apache, and this is my code but it does not display on my localhost server :

<html><head><script src="ruffle/ruffle.js"></script>
</head>
<body>
<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.addEventListener("load", (event) => {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();
        const container = document.getElementById("container");
        container.appendChild(player);
        player.load("mig29.swf");
    });
</script>
<script src="ruffle/ruffle.js"></script>

</body>
</html

I also tried this code, also no luck:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WORKAROUND</title>

    <script>
        window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "public_path": "ruffle/",
            "polyfills": ["static-content", "plugin-detect", "dynamic-content"]
        };
    </script>
    <script src="ruffle/ruffle.js"></script>

    <!-- Start workaround -->
    <script>
        const swfobject = {};
    </script>
    <script>
        Object.defineProperty(swfobject, "embedSWF", {
            value: function() {
                var ruffle = window.RufflePlayer.newest();
                var player = ruffle.create_player();
                var container = document.getElementById(arguments[1]);
                container.innerHTML = "";
                container.style.width = arguments[2] + "px";
                container.style.height = arguments[3] + "px";
                player.style.width = container.style.width;
                player.style.height = container.style.height;
                container.appendChild(player);
                player.stream_swf_url(arguments[0]);
            },
            writable: false,
            configurable: false
        });
    </script>
    <!-- End workaround - This code also works if placed before <swfobject.js> -->

    <script src="swfobject.js"></script>

</head>
<body>

<div id="file_div">Flash Player not detected!</div>
<script>
    swfobject.embedSWF("mig29.swf", "file_div", "550", "400", "8");
</script>

</body>
</html>

I asked their discord but no answer so far. If anyone is more familiar with ruffle please assist.

Solution

I have recently discovered how to get this working. Calling .play on the player returned by ruffle.createPlayer() takes an object or at least expects one. Doing player.load({ url: '/path/to/swf.swf' }) will work

swfobject.embedSWF = function(url, cont, width, height){
    var ruffle = window.RufflePlayer.newest(),
        player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
            width: width,
            height: height,
            style: 'width: ' + width + 'px; height: ' + height + 'px',
        });
    
    player.load({ url: url });
}

Full code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf8'>
    </head>
    <body>
        <div id='ruffle'></div>
        <script src='https://e9x.github.io/ruffle-example/ruffle.js'></script>
        <script>
var swfobject = {};

swfobject.embedSWF = function(url, cont, width, height){
    var ruffle = window.RufflePlayer.newest(),
        player = Object.assign(document.getElementById(cont).appendChild(ruffle.createPlayer()), {
            width: width,
            height: height,
            style: 'width: ' + width + 'px; height: ' + height + 'px',
        });
    
    player.load({ url: url });
}

swfobject.embedSWF('https://e9x.github.io/ruffle-example/1on1soccer_24.swf', 'ruffle', 500, 500);
        </script>
    </body>
</html>

(Replace github.io links with your own)