Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 14, 2025 at 10:15 am #1481293
    kalla77

    Liebes Enfold Team,

    ich möchte gerne eine Grafik so einbinden, dass beim Klicken auf diese automatisch eine lokal gehostete Audiodatei abgespielt wird. Die Grafik soll also als Auslöser für die Audiowiedergabe dienen.

    Könnten Sie mir bitte mitteilen, wie sich das mit Enfold umsetzen lässt?

    Für Ihre Unterstützung und eine kurze Anleitung hierzu wäre ich Ihnen sehr dankbar.

    Mit freundlichen Grüßen
    Andrè

    Dear Enfold Team,

    I would like to integrate an image in such a way that clicking on it automatically starts the playback of a locally hosted audio file. The image should serve as the trigger for the audio playback.

    Could you please let me know how this can be implemented using Enfold?

    I would greatly appreciate your assistance and a short guide on how to achieve this.

    Kind regards,
    Andrè

    • This topic was modified 5 days, 8 hours ago by kalla77.
    April 15, 2025 at 5:51 am #1481356
    Ismael

    Hey kalla77,

    Thank you for the inquiry.

    Add an image and an audio element, apply the ID “playImage” to the image element and “audioClip” to the embedded audio element, then add this script to trigger playback when the image is clicked.

    add_action( 'wp_footer', 'av_image_audio_script' );
function av_image_audio_script() {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const image = document.getElementById("playImage");
        const audio = document.getElementById("audioClip");

        if (image && audio) {
          image.addEventListener("click", function () {
            audio.play();
          });
        }
      });
    </script>
    <?php
}

    If you can create a test page, we’ll try to check it further.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.