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:
(zum Vergrößern anklicken)
Thread-Starter
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-Starter
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…
Anonymous User 14429768
(@anonymized-14429768)
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-Starter
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.
🙂
Anonymous User 14429768
(@anonymized-14429768)
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-Starter
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.
