✔ Sound on/off

[nordi]

Hi,
ich würde gerne mal euren Rat einholen. Ich will einen Sound on/off Button realisieren. Wie der Name schon sagt, soll er Sound stoppen, wenn man auf den Button draufklick und sich das Icon verändern. Am besten wäre es, wenn es ohne "Refresh" der Seite passieren würde. Kennt jemand ein Skript, was sowas kann? Oder ist es schwierig sowas selber zu machen? Gibt quasi 2 Icons (Lautsprecher mit und ohne Schallwellen) und eine Mp3-Datei. Das wars

 

[tombe]

Ist zwar ohne Bild und ungetestet, aber es sollte funktionieren:

<script language="javascript" type="text/javascript">
function music_start() {
	document.getElementById("music").innerHTML = "<embed src='lied.mp3' autostart='true' loop='true' hidden='true'></embed>";
	document.getElementById("stop").style.display = "block";
	document.getElementById("start").style.display = "none";
}

function music_stop () {
	document.getElementById("music").innerHTML = "";
	document.getElementById("stop").style.display = "none";
	document.getElementById("start").style.display = "block";

}
</script>

<div id="music"></div>
<div id="start" style="display: none;" onclick="music_start()">START</div>
<div id="stop" style="display: block;" onclick="music_stop()">STOP</div>

 

[nordi]

Hi, danke für den Ansatz! Das mit dem Bild würde ich hinbekommen, wie kann ich jedoch die music_stop & music_start in einem Link vereinen?

 

[tombe]

<!-- Als Link -->
<a id="start" style="display: none;" href="javascript:music_start()">START</a>
<a id="stop" style="display: block;" href="javascript:music_stop()">STOP</a>
<!-- Als Bild -->
<img src="bild1.jpg" title="Starten" width="50" height="50" id="start" style="display: none;" onclick="music_start()" />
<img src="bild2.jpg" title="Stoppen" width="50" height="50" id="stop" style="display: block;" onclick="music_stop()" />

Du musst dich natürlich für eine von beiden Möglichkeiten entscheiden, sonst gibt es die jew. ID doppelt.

Das Musik-DIV sollte auch noch eine CSS Angabe bekommen:

<div id="music" style="display: none;"></div>

Sonst belegt es Platz auf der Seite wenn es den Inhalt verpasst bekommt!

Wobei ich mich frage ob ich das mit dem "in einem Link vereinen" überhaupt so verstanden habe wie du es gemeint hast!?

NACHTRAG: Du hast es sicher so gemeint

<script language="javascript" type="text/javascript">
function music(art) {

if (art == 1) {
    document.getElementById("music").innerHTML = "<embed src='lied.mp3' autostart='true' loop='true' hidden='true'></embed>";
	document.getElementById("bild").innerHTML = "<img src='stop.png' title='Musik stoppen' width='50' height='50' onclick='music(0)' />";
} else if (art == 0) {
	document.getElementById("music").innerHTML = "";
	document.getElementById("bild").innerHTML = "<img src='start.png' title='Musik starten' width='50' height='50' onclick='music(1)' />";
}

}
</script>

<div id="music" style="display: none;"></div>

<span id="bild"><img src="start.png" title="Musik starten" width="50" height="50" onclick="music(1)" /></span>

 

[nordi]

Hi Tombe, genau wie im Nachtrag meinte ich es. Es ist aber nichts zu hören, habe extra alle Pfade gecheckt, kommt leider kein Ton aus meinen Lautsprecher

 

[tombe]

Und schon wieder was gelernt: Ein unsichtbarer DIV-Container spielt keine Musik ab!!

Ändere die Angaben für den Container so ab und es klappt (zumindest bei mir hier):

<div id="musik" style="width: 1px; height: 1px;"></div>

War sowieso ein Fehler drin. Die ID hatte die gleiche Bezeichnung wie die Funktion!

NACHTRAG: Mit 0 Pixel geht es auch, weiß aber nicht ob das eine korrekte Angabe ist!?