Flash en wordpress amb Ruffle

A la xarxa d’aula del meu centre no tinc accés a archive.org, i això em feia impossible utilitzar alguns materials antics de música i altres activitats didàctiques que encara estan en format Flash (.swf). Com que molts d’aquests recursos són útils per al meu alumnat, he buscat la manera de fer-los accessibles directament des del meu blog.

La solució ha sigut pujar els arxius Flash al servidor d’Edutictac i utilitzar l’emulador Ruffle, que permet executar-los en navegadors moderns sense necessitat de tenir instal·lat Adobe Flash Player (que ja està obsolet).

Per a aconseguir-ho, només he hagut d’afegir aquest codi amb Snippets, perquè es carregue de manera global en el blog:

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

I he creat un shotcode

<?php
/**
 * Shortcode [swf url="..." width="800" height="600" ratio="4/3" nightly="0" fullscreen="1"]
 * - fullscreen="1": añade botón de pantalla completa.
 */

add_action('wp_enqueue_scripts', function () {
    if (!wp_script_is('ruffle', 'enqueued')) {
        $src = 'https://cdn.jsdelivr.net/npm/@ruffle-rs/ruffle/ruffle.js';
        wp_enqueue_script('ruffle', $src, [], null, false);
        $loader = <<<JS
(function(){
  window._ruffleSwfQueue = window._ruffleSwfQueue || [];
  function boot(){
    if(!window.RufflePlayer || typeof window.RufflePlayer.newest !== "function"){
      return setTimeout(boot, 50);
    }
    var r = window.RufflePlayer.newest();
    window._ruffleSwfQueue.forEach(function(item){
      var mount = document.getElementById(item.id);
      if(!mount || mount.dataset.ruffleMounted) return;
      var player = r.createPlayer();
      mount.appendChild(player);
      mount.dataset.ruffleMounted = "1";
      player.load(item.url);
      if(item.fsbtn){
        var btn = document.getElementById(item.id + "_fsbtn");
        btn.addEventListener("click", () => player.enterFullscreen());
      }
    });
  }
  document.addEventListener('DOMContentLoaded', boot, {once:true});
  boot();
})();
JS;
        wp_add_inline_script('ruffle', $loader);
    }
});

add_shortcode('swf', function ($atts) {
    $a = shortcode_atts([
        'url'    => '',
        'width'  => '800',
        'height' => '600',
        'ratio'  => '',
        'nightly'=> '0',
        'fullscreen' => '0',
    ], $atts, 'swf');

    if (strpos($a['url'], 'http://') === 0) {
        $a['url'] = preg_replace('#^http://#', 'https://', $a['url']);
    }

    $id     = 'swf_' . wp_generate_uuid4();
    $url    = esc_url($a['url']);
    $width  = intval($a['width']);
    $height = intval($a['height']);
    $ratio  = trim($a['ratio']);
    $fs     = ($a['fullscreen'] === '1');

    if (!$url) return '<em>[swf] Falta el atributo url.</em>';

    if ($ratio) {
        $style = sprintf('position:relative;max-width:%dpx;aspect-ratio:%s;', $width, esc_attr($ratio));
        $inner = 'position:absolute;inset:0;';
    } else {
        $style = sprintf('width:%dpx;height:%dpx;position:relative;', $width, $height);
        $inner = 'position:absolute;inset:0;';
    }

    $html  = '<div style="'. esc_attr($style) .'">';
    $html .= '<div id="'. esc_attr($id) .'" style="'. esc_attr($inner) .'"></div>';
    $html .= '</div>';

    if ($fs) {
        $html .= '<button id="'. esc_attr($id) .'_fsbtn" style="margin-top:6px;">Pantalla completa</button>';
    }

    $html .= '<script>window._ruffleSwfQueue=window._ruffleSwfQueue||[];window._ruffleSwfQueue.push({id:"'
          . esc_js($id) . '",url:"' . esc_js($url) . '",fsbtn:'. ($fs?'true':'false') .'});</script>';

    return $html;
});

Després en un bloc html

[swf url="https://edutictac.es/inici/flash/aulademusica24aranas.swf" ratio="4/3" width="800" fullscreen="1"]

Ací un exemple del resultat:

Pantalla completa

Pàgina web https://ruffle.rs/downloads