# decorateCookedElement pour chaque changement de page ?

**URL:** <https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218>\
**Category:** Development\
**Created:** [Janvier 8, 2022, 4:54 UTC](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218 "2022-01-08T04:54:17Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)\
**Post date:** [Janvier 8, 2022, 4:54 UTC](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218/1 "2022-01-08T04:54:17Z")

</div>

J’essaie d’utiliser la bibliothèque Mediaelement.js pour remplacer la boîte audio personnalisée, et j’y suis parvenu lorsque la page est chargée/actualisée, cependant, lorsque je navigue d’un sujet à un autre, elle ne semble pas se recharger, affichant à la place la boîte audio native de Discourse.

Lorsque je charge/actualise :

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/d/cd90a2e43ceb19d2e8e3757c29607679b5d5b9c2.png)

Si je navigue ensuite vers un autre sujet :

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0d66cf09db9427ee42139408e71dce8b0afa89f1.png)

Je suis à peu près sûr que je fais quelque chose de mal avec le [chargement de mejs](https://github.com/mediaelement/mediaelement/blob/d8a667fd65560093fb227700a82805600ec9e8e3/docs/usage.md) mais je me suis dit que peut-être pas et que je devais faire quelque chose de spécial avec onPageChange ou autre chose.

**`<html>`**

```javascript

let loadScript = require('discourse/lib/load-script').default;

    api.decorateCookedElement(
      element => {
        const audioplayers = element.querySelectorAll('audio');
        // console.log("player: " + audioplayers[0]);
        if (Object.entries(audioplayers).length > 0) {
            // console.log("audioplayers has length");
            loadScript(
                `https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.4/mediaelement.min.js`
            );
            loadScript(
                `https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.4/mediaelement-and-player.min.js`
            );
        }

        audioplayers.forEach(function (el) {
            el.classList.add("mejs__player");
            const controls = settings.theme_uploads.mejs-controls;
            // console.log("controls: " + controls);
            el.setAttribute("data-mejsoptions",
                `{
                    "pluginPath": "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.4/",
                    "iconSprite": "https://friends.jimkleiber.com/uploads/default/original/1X/a17d9708a19654d9155dd9b79a79a05dea580067.svg",
                    "alwaysShowControls": "true",
                    "features": ["playpause", "current", "progress", "duration", "volume"]
                }`
            );
            el.setAttribute("preload", "auto");            
        });            
      },
      { id: "mediaelement-js", onlyStream: true}
    );

```

**`css`**

```css
@import "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.4/mediaelementplayer.min.css";

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/8/789e8bd4152f6fcb19c81b4ae8ebaf2417a27307.png)

Quelqu’un a-t-il des suggestions sur la façon dont je pourrais l’ajuster pour qu’il se recharge automatiquement à chaque chargement de page ?

---

_[View the full topic](https://meta.discourse.org/t/decoratecookedelement-for-each-page-change/214218)._