Bild in WP mit Sound hinterlegen

    Hallo Leute,
    ich habe in einem Artikel auf meiner Homepage ein Bild. Dieses Bild möchte ich mit einem Sound hinterlegen.
    Wenn man aufs Bild klickt wird der Sound abgespielt.
    Habe bereits einen Versuch gemacht, doch da wird dann beim Klick aufs Bild die Seite mit dem HTML5-Player geöffnet.. ich möchte aber dass die Seite mit dem Bild bestehen bleibt, wenn der Sound abgespielt wird.

    Hat jemand einen Tipp für mich, wie ich da vorgehen muß.

    http://sir-henry.bplaced.net/player-test/

    Schonmal Danke

    Gruß, Mr.Grufti

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das geht am einfachsten mit einem "unsichtbaren" HTML5-Audio-Tag und eine bißchen JavaScript:

    HTML
    <audio id="audio-id" src="sound.mp3" preload="auto">
<img src="bild.jpg" onclick="document.getElementById('audio-id').play()" style="cursor:pointer;" />

    Das "Style Cursor:Pointer" is optional, damit sieht das Bild aber zumindest anklickbar aus.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Na dann hatte ich das wohl falsch verstanden. Ich dachte, der Sound soll abgespielt werden, wenn man auch das Bild klickt.

    Wenn ich bei Deiner Seite jetzt auf das Bild klicke, wird das Bild allein angezeigt und Sound ist nicht zu hören.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Hallo Ingo,

    leider funktioniert es momentan nur im Google Chrome, falls du mir schreiben könntest welchen Code ich noch brauche für die anderen Browser, wäre ich höchst zufrieden:|

    Mit dem embed-Code kenn ich mich nicht aus.

    Das von mir gezeigte Beispiel funktioniert in Chrome 28, Firefox 21, IE 9 und sogar auf meinem Smartphone mit Android 2.3.6.

    In Wordpress solltest Du vom "Visuell" zum "Text"-Editor wechseln, um den HTML-Code einzugeben, sonst könnte es Probleme geben.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Hallo Ingo,

    bin leider noch Anfänger was dies betrifft.

    ich habe den verborgenen Player mit dem Code:

    HTML
    <embed name="sound" src="http://sir-henry.bplaced.net/wp-content/uploads/2013/06/song.mp3" autostart="true" loop="true" hidden="true" width="0" height="0">

    in meinen Artikel eingefügt. Es funktioniert aber nur im Google Chrome.

    Wenn ich nun deinen Code:

    HTML
    <audio id="audio-id" src="sound.mp3" preload="auto">
<img src="bild.jpg" onclick="document.getElementById('audio-id').play()" style="cursor:pointer;" />

    verwende, wie muß ich da vorgehen, bzw. wo muß ich da meinen Musiktitel der abgespielt werden soll einbinden...

    Gruß, Mr.Grufti

    So wie Du den Player mit embed eingebunden hast, spielt er den Sound gleich direkt nach dem Laden der Seite ab. Wenn es aber erst beim Klick auf das Bild losgehen soll, wir das so nichts.

    Nimm das mit dem embed wieder raus und andere meinen Code-Beispiel so:
    - da wo "sound.mp3" steht, kommt die Adresse deiner Sound-Datei rein, also "/wp-content/uploads/2013/06/song.mp3"
    - da wo "bild.jpg" steht, kommt die Adresse Deines Bildes rein, also "/wp-content/uploads/2013/06/Moxxies-Bar-e1372225445361.jpg"

    Und wie gesagt, zum Bearbeiten in den Text-Modus des Editors schalten.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Hallo Ingo,

    danke, habe alles so gemacht, wie von dir beschrieben, siehe hier:

    HTML
    <audio id="audio-id" src="/wp-content/uploads/2013/06/song1.mp3" preload="auto"><img src="/wp-content/uploads/2013/06/Moxxies-Bar-e1372225445361.jpg" onclick="document.getElementById('audio-id').play()" style="cursor:pointer;" />

    mit dem Ergebnis, dass weder Bild noch Sound da sind.

    Siehe selbst: http://sir-henry.bplaced.net/moxxies-radio/


    Gruß, Mr.Grufti

    Ja, da habe ich noch einen kleinen Fehler drin. Es fehlt das schließende Audio-Tag. Das muß da noch vor das <img src...
    Also so:

    PHP
    <audio id="audio-id" src="/wp-content/uploads/2013/06/song1.mp3" preload="auto"></audio><img src="/wp-content/uploads/2013/06/Moxxies-Bar-e1372225445361.jpg" onclick="document.getElementById('audio-id').play()" style="cursorointer;" />

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Freut mich, daß es nun funktioniert.

    Ich habe aber noch einen kleinen Fehler gefunden der verhindert, das der "Klickfinger" angezeigt wird.
    Ändere:

    Code
    style="cursorointer;"


    in:

    Code
    style="cursor:pointer;"

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Test:

    PHP
    <audio id="audio-id" src="/wp-content/uploads/2013/06/song1.mp3" preload="auto"><img src="/wp-content/uploads/2013/06/Moxxies-Bar-e1372225445361.jpg" onclick="document.getElementById('audio-id').play()" style="cursorointer;" />


    :p

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Hallo Ingo oder Kollege,

    ich habe mit dem folgenden Code Audio eingebunden:

    Code
    <audio id="audio-id" width="300" height="32" src="/wp-content/uploads/2013/07/14.-Cris-Velasco-Sascha-Dikiciyan-Lynchwood-Sheriff-Combat.mp3" preload="auto"></audio><img class="aligncenter" style="cursor: pointer;" onclick="document.getElementById('audio-id').play()" alt="" src="/wp-content/uploads/2013/07/Moxxies-Bar.png" />

    Gibt es eine Möglichkeit das auch in Opera hörbar zu machen?? Opera spielt nämlich kein mp3 Format, nur das ogg Format. Konvertiert habe ich den entsprechenden Sound schon.


    Gruß, Mr.Grufti

    Ja, das geht auch. Man kann beim Audio-Tag alternative Formate angeben, dann würde die Sound-Einbindung so aussehen:

    Code
    <audio id="audio-id" width="300" height="32" preload="auto">
  <source src="/wp-content/uploads/2013/07/14.-Cris-Velasco-Sascha-Dikiciyan-Lynchwood-Sheriff-Combat.ogg" type="audio/ogg">  
  <source src="/wp-content/uploads/2013/07/14.-Cris-Velasco-Sascha-Dikiciyan-Lynchwood-Sheriff-Combat.mp3" type="audio/mpeg">  
</audio>

    Die Sounddatei wird oben als src-Attribut rausgenommen und wandert in eigene source-Tags. Der Browser nimmt nun einfach das erste Format aus der Liste, das er wiedergeben kann.

    Weiterführende Informationen zur Medien-Einbettung in HTML5 findest Du hier (da habe ich auch mein "Wissen" her):
    https://developer.mozilla.org/en-US/docs/Web…audio_and_video

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden