Audioplayer unsichtbar machen

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 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…

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.

🙂

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