Customize Audio Block

  • Hello, I would like to be able to customize the css of the audio block. In the classic editor we had the possibility of modifying all parts of the player, I cannot find the equivalent in the new editor.
    How can I do this?

    • This topic was modified 1 year, 2 months ago by pouicpouic.
    • This topic was modified 1 year, 2 months ago by pouicpouic.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator t-p

    (@t-p)

    Useful resource:
    WP documentation on Audio Blockhttps://www.ads-software.com/documentation/article/audio-block/

    Thread Starter pouicpouic

    (@pouicpouic)

    Thank you for t-p for your answer, but this article does not describe what I’m looking for.
    The “old” media player can be split roughly like this, making customization possible:

    <div id="" class="mejs-container mejs-container-keyboard-inactive mejs-android mejs-audio" tabindex="0" role="application" aria-label="">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <mediaelementwrapper id="">
                <audio preload="" width="" src="" id="" style="">
                </audio>
            </mediaelementwrapper>
        </div>
        <div class="mejs-layers">
            <div class="mejs-poster mejs-layer" style="">
            </div>
        </div>
            <div class="mejs-controls">
                <div class="mejs-button mejs-playpause-button mejs-play">
                    <button type="button" aria-controls="mep_0" title="" aria-label="" tabindex="0">
                    </button>
                </div>
                <div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off">
                    <span class="mejs-currenttime">00:00</span>
            </div>
            <div class="mejs-time-rail">
                <span class="mejs-time-total mejs-time-slider" role="slider" tabindex="0" aria-label="Curseur de temps" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="00:00">
                    <span class="mejs-time-buffering" style=""></span>
                    <span class="mejs-time-loaded"></span>
                    <span class="mejs-time-current"></span>
                    <span class="mejs-time-hovered no-hover"></span>
                    <span class="mejs-time-handle">
                        <span class="mejs-time-handle-content"></span>
                    </span>
                    <span class="mejs-time-float">
                        <span class="mejs-time-float-current">00:00</span>
                        <span class="mejs-time-float-corner"></span>
                    </span>
                </span>
            </div>
            <div class="mejs-time mejs-duration-container">
                <span class="mejs-duration">00:00</span>
            </div>
        </div>
    </div>
</div>

    I wonder how to express the Audio Block in divs to allow customization? Or is there another way?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize Audio Block’ is closed to new replies.