So erstellen Sie eine nur mute/unmute-Taste (wie youtube) in html

Ich war das erstellen einer website, ich lege Musik im hintergrund, und mein problem ist, ich weiß nicht, wie man eine Schaltfläche erstellen, die(nur) für stummschalten/aufheben der Stummschaltung den Ton. Ich hätte gerne ein mute button stumm/laut schalten je nach situation(wenn die Musik stumm geschaltet ist, dann sollte der button das Bild von einem Lautsprecher,für das Geräusch, wenn Sie drücken, dann werden Sie beginnen, hören die Musik und das Bild der Schaltfläche wechselt und Umgekehrt)

was ich jetzt habe ist dieses:

<td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="this.src='images/sonidoOFF.png'" width=30% height=7%>
                        </td>

Ich muss nur wissen, wie zu erstellen, die Taste, nicht die Funktionen für die Hintergrundmusik.

Vielen Dank im Voraus

Wie spielst du den sound? Nur ein bgsound tag?

InformationsquelleAutor user3507245 | 2014-04-07

  1. 3

    HTML

    <input type="checkbox" name="un-mute" id="un-mute">
<label for="un-mute" class="unmute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
</label>

    CSS

    input#un-mute {
  display: none;
}

.unmute img {
  display: none;
}

input#un-mute:checked ~ .unmute img {
  display: initial;
}

input#un-mute:checked ~ .mute img {
  display: none;
}

    JavaScript

    var un_mute = document.getElementById('un-mute');

un_mute.onclick = function() {
   alert('toggle player here');
};

    http://jsfiddle.net/Ffccv/2/

    mit :checked pseudo-Klassen-Selektor

    InformationsquelleAutor Jaka Dirnbek

  2. 0

    Können Sie dies tun, wechseln Sie 

    <script>
function toggleSound(img)
{
   img.src= img.src=="images/sonidoON.png" ? "images/sonidoOFF.png" : "images/sonidoON.png";
}
</script>

    sowie onclick="toggleSound(this);" erstellen oder img von Skript und Nutzung addEventListener ("click",toggleSound())

    <td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="toggleSound(this);" width=30% height=7%>
                        </td>

    fiddle-demo : http://jsfiddle.net/K9553/

    InformationsquelleAutor Tarun

Schreibe einen Kommentar