Support » Allgemeine Fragen » Audioplayer unsichtbar machen

  • Gelöst granus

    (@granus)


    Hallo Liebe Community,

    ich versuche, die Website unseres Vereins barrierefreier zu gestalten und möchte dazu Seiten und Beiträge mit einer Vorlesefunktion ausstatten (s. Beispielseite).

    Der bordeigene Mediaplayer ist leider optisch kein Highlight.

    Gibt es eine Möglichkeit, den Player versteckt im Hintergrung laufen zu lassen? Also ohne schwarze Seite, ohne neuen Tab, etc.

    Ich habe zwar ein paar Optionen gefunden, die Darstellung per Custom-CSS anzupassen, ganz unsichtbar kriege ich das Ding leider nicht. Und meine Fähigkeiten als „Programmierer“ sind begrenzt – sehr begrenzt…;-)

    Liebe Grüße

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Du kannst im Block-Editor einen Audio-Block hinzufügen. Der bettet sich dann in die Seite ein, was (mit einem anderen Theme) z.B. so aussehen kann:

    Screenshot Beitrag mit Audio
    (zum Vergrößern anklicken)

    Thread-Ersteller granus

    (@granus)

    Danke für die schnelle Antwort, aber genau diesen hässlichen Balken würde ich gerne verschwinden lassen.

    Der Player sollte möglichst unsichtbar im Hintergrund laufen, während auf der Seite nur der Button oder ein Bild sichtbar ist.

    Hallo Grabus
    zufällig habe ich dasselbe vor kurzem getestet ich möchte einem Bild einen Ton zuweisen damit man per Mausklick diesen abspielen oder mit der hover Funktion darüberfahren kann und der Ton wird abgespielt. Wäre sicher für viele Anwendungen interessant.
    Ich habe nun dazu das Plugin Audioplayer installiert und alle Bedienelemente ausser Start ausgeblendet somit erscheint nur ein kleiner Pfeil (Dreieck) den man betätigen muss, wenn der Ton beendet ist geht er automatisch wieder in Ausgangsposition. Das funktioniert, ist aber noch nicht ganz meinen Wünschen entsprechend. Ich suche weiter.
    NB: ich benutze Elementor

    Thread-Ersteller granus

    (@granus)

    Hallo neelix1201,

    danke für deine Antwort. Ich habe das Problem inzwischen mit dem Plugin „Compact WP Audio Player“ (https://kinderengel-rheinmain.de/wp-admin/plugins.php) gelöst.

    Siehe Beispielseite: https://kinderengel-rheinmain.de/vorlesen/

    Um die eigenen Symbole für „Play“ und „Stop“ einzubauen, habe ich die Vorgaben des Plugins per Custom-CSS wie folgt angepasst:

    /*Audioplayer*/
    
    .sc_player_container1 {
    display: block;
    }
    .sc_player_container1 .myButton_play {
    background: url(https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesen_klein.png) no-repeat !important;
    cursor: pointer !important;
    width: 100px !important;
    height: 100px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    }
    .sc_player_container1 .myButton_stop {
    background:url(https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesen-Stop_klein.png) no-repeat !important; 
    cursor: pointer !important;
    width: 100px !important;
    height: 100px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    }
    
    .sc_player_container2 {
    max-width:150px;
    }
    .sc_player_container2 .myButton_play {
    background:url(https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesen_klein.png) no-repeat !important;
    cursor:pointer;
    width: 100px;
    height: 100px;
    border: none;
    position:relative;
    }
    .sc_player_container2 .myButton_stop {
    background:url(https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesen-Stop_klein.png) no-repeat !important;
    
    cursor:pointer;
    width: 100px;
    height: 100px;
    border: none;
    position:relative;
    }

    Als „Background: URL“ den Link zu den eigenen Symbolen einfügen, wobei ich „transparent“ entfernt habe.
    Dann noch die Werte für „width:“ und „hight:“ an die Größe der Symbole anpassen. Die „background-position:“ habe ich komplett entfernt.

    Jetzt muss ich das Ding nur noch in die obere rechte Ecke der Seite bekommen und vom Seiteninhalt umfließen lassen…

    Schaut cool aus. Hast toll gemacht.

    Aber wie geht das?
    Liest der, ähm die Dame automatisch vor, was da steht oder muss man/frau das selbst als mp3 erstellen?

    Zitat:

    Das kompakte WordPress Audio Player-Plugin ist ein HTML5 + Flash-basiertes WordPress-Plugin

    FLASH? echt jetzt?

    Thread-Ersteller granus

    (@granus)

    Hallo Pezi,

    ganz so einfach ist das leider nicht. Ich erstelle die Sprachdateien manuel mit einer Software namens Speechelo (https://speechelo-offer.com). Die werden dann in den Shortcode des Players eingebaut. Sieht dann so aus:
    [sc_embed_player fileurl=“https://DEINE SPRACHDATEI.mp3″]

    Das Erstellen der Sprachdatei ist am Anfang etwas fummelig, da man die Texte manuel überarbeiten muss, um ein gutes Ergebnis zu bekommen. Beispielsweise musst Du geläufige Abkürzungen („z.B.“, „etc.“,…) ausschreiben, da dir die Software sonst nur die einzelnen Buchstaben vorliest. Auch mit der Interpunktion muss man etwas experimentieren. So gestaltet man eine gefällige Sprachmelodie. Aber dann ist das Ergebnis durchaus brauchbar.

    Leider verfügt Speechelo derzeit für Deutsch nur über 5 Standardstimmen (die alle nicht so toll klingen…), sowie eine AI-Stimme, die ich verwende. Für Englisch (US) gibt es eine deutlich größere Auswahl, sowie weitere Optionen, die ein verblüffend gutes Ergebnis liefern. Ich hoffe aber, dass sich auch für Deutsch bald einiges tut, da die Software permanent weiterentwickelt wird.

    🙂

    Vielen Dank für die Infos!!!

    so einfach ist das leider nicht

    Tja, mir fällt da immer Win 95 ein, wo wir fasziniert waren, weil dies Wordpad Texte automatisch vorlesen konnte. Klan furchtbar komisch und für uns voll lustig!

    Texte manuel überarbeiten

    Verstehe, klar.
    Aber dieses „Speechelo“ liest das dann von WP oder braucht es eine Office-Datei?

    Wie auch immer, finde das Ergebnis echt toll! Danke im Namen derer, die darauf angewiesen sind.

    PS: Liebe Mods, sorry fürs OT. Doch hier gibt es etliche seh-beeinträchtigte Foristen, denen da sicher auch interessiert. War ich auch mal, mit einst 8 % Sehkraft.

    Thread-Ersteller granus

    (@granus)

    Von WP direkt lesen geht nicht, Du musst die Texte manuell in die Software schreiben oder halt von irgendwoher reinkopieren.

    Gute Lösung genau sowas schwebt auch mir vor. Dafür sollte es doch ein fertiges Plugin oder widget geben.
    Ich würde die Sprache mit Mikrofon aufnehmen und eine mp3 Datei erstellen.
    Meine Lösung war diese: https://modellbahn.f-brunner.ch/audio/
    Deine Lösung ist natürlich eleganter.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „Audioplayer unsichtbar machen“ ist für neue Antworten geschlossen.