• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Javascript Dopplungen vermeiden

C

C.Walther

New member
Hallo zusammen :)

Ich hoffe ihr könnt mir bei meinem relativ spezifischen Problem bei der Internetseite unserer ehrenamtlichen Jugendgruppe weiter helfen.
Da wir einige Teilnehmer haben, die z.B. durch nen Verkehrsunfall nicht mehr lesen können und wir auch nach außen hin unser Angebot für alle zugänglich machen möchten, bin ich gerade dabei, TTS: text to speech als mp3 Player für jede Seite einzubinden. Mit einer Anleitung hab ich soweit auch ein eigenen Player kreieren können.
Es kommt allerdings vor, dass ich mehrere Player auf eine Seite einbette möchte, wie z.B. auf unserer News Seite:

Aktuelles - BJ Wuppertal: LesBiSchwule | Inter* | Trans* | Queer Jugendgruppe

Jetzt komm ich allerdings mit meinen JavaScript Kenntnissen nicht mehr weiter.
Es klappt erst, mehrere Playlbutton auf einer Seite zu stellen, wenn ich den gleichen Code einfach nochmal aber mit einem anderen Namen bzw. einer anderen Id schreibe.
Wenn ich also 15 Playlbutton auf eine Seite packe, müsste ich den Code 15 mal mit anderen Namen kopieren und im Head einfügen, also sehr sehr viel unnötiger Traffic...

Gibt es irgend eine Möglichkeit, diese Dopplungen zu vermeiden und das alles in einem Code zu schreiben?

Vielen dank schon mal im Voraus,

Clemens

Code: 
<script type="text/javascript">
//<![CDATA[
    function abspielen()
    {
       document.getElementById("player").play();
       document.getElementById("pausebutton").style.display = "";
       document.getElementById("playbutton").style.display = "none";
    }
    function pausieren()
    {
       document.getElementById("player").pause();
       document.getElementById("playbutton").style.display = "";
       document.getElementById("pausebutton").style.display = "none";
    }
 
  
//]]>
</script>


<script type="text/javascript">
//<![CDATA[
    function abspielen2()
    {
       document.getElementById("player2").play();
       document.getElementById("pausebutton2").style.display = "";
       document.getElementById("playbutton2").style.display = "none";
    }
    function pausieren2()
    {
       document.getElementById("player2").pause();
       document.getElementById("playbutton2").style.display = "";
       document.getElementById("pausebutton2").style.display = "none";
    }
 
  
//]]>
</script>

HTML: 
<div align="center">
    <audio id="player">
        <source src="http://www.bj-wuppertal.de/app/download/11021815399/%C3%9Cber-uns-Hans.mp3?t=1457012794" type="audio/mpeg"></source>
    </audio>

    <img src=
    "http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158" name="playbutton" width="32" height="32" id="playbutton" title="Abspielen" style="cursor: pointer" onclick=
    "abspielen()" onmouseover="playbutton.src='http://www.bj-wuppertal.de/app/download/11022181999/playbright.png?t=1457020199'" onmouseout=
    "playbutton.src='http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158'" alt="" /> <img src="http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543" name=
    "pausebutton" width="32" height="32" id="pausebutton" title="Pause" style="display: none; cursor: pointer" onclick="pausieren()" onmouseover=
    "pausebutton.src='http://www.bj-wuppertal.de/app/download/11022194499/pausebright.png?t=1457020233'" onmouseout=
    "pausebutton.src='http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543'" alt="" />
</div>


<div align="center">
    <audio id="player2">
        <source src="http://www.bj-wuppertal.de/app/download/11022496199/Aktuelles--2016-Januar--Video-workshop.mp3?t=1457034075"          type="audio/mpeg">
         </source>
    </audio>

    <img src="http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158" name="playbutton2" width="32" height="32"      id="playbutton2" title="Abspielen2" style="cursor: pointer" onclick=
    "abspielen2()" onmouseover="playbutton2.src='http://www.bj-wuppertal.de/app/download/11022181999/playbright.png?t=1457020199'" onmouseout=
    "playbutton2.src='http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158'" alt="" /> 
    <img src="http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543" name=
    "pausebutton2" width="32" height="32" id="pausebutton2" title="Pause2" style="display: none; cursor: pointer" onclick="pausieren2()" onmouseover=
    "pausebutton2.src='http://www.bj-wuppertal.de/app/download/11022194499/pausebright.png?t=1457020233'" onmouseout=
    "pausebutton2.src='http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543'" alt="" />
</div>
 
Zuletzt bearbeitet von einem Moderator:
Genau für so etwas gibt es Funktionsparameter. In deinem Fall könnte man die Nummer des Players übergeben
Code: 
<script>
	function abspielen(nbr){
		document.getElementById("player" + nbr).play();
		document.getElementById("pausebutton" + nbr).style.display = "";
		document.getElementById("playbutton" + nbr).style.display = "none";
	}
	function pausieren(nbr){
		document.getElementById("player" + nbr).pause();
		document.getElementById("playbutton" + nbr).style.display = "";
		document.getElementById("pausebutton" + nbr).style.display = "none";
	}
</script>
Der Aufruf für den ersten wäre dann abspielen("") und für den zweiten abspielen("2").

Aber wenn das immer gleich aufgebaut ist, wäre es sogar zu überlegen, ob du deine Player-Interfaces nicht mit JS baust und dann direkt sauber mit Node-Referenzen arbeitest.
 
Danke für die schnelle Antwort.

Leider klappt das so noch nicht. Ich muss zugeben, ich kann nur nen bisschen HTML und CSS, daher kann das gut sein, dass ich nen doofen Fehler gemacht hab^^

Also ich hab im head jetzt wie du geschrieben hast.

Code: 
<script>
	function abspielen(nbr){
		document.getElementById("player" + nbr).play();
		document.getElementById("pausebutton" + nbr).style.display = "";
		document.getElementById("playbutton" + nbr).style.display = "none";
	}
	function pausieren(nbr){
		document.getElementById("player" + nbr).pause();
		document.getElementById("playbutton" + nbr).style.display = "";
		document.getElementById("pausebutton" + nbr).style.display = "none";
	}
</script>


und im Body


HTML: 
<div align="center">
    <audio id="player">
        <source src="http://www.bj-wuppertal.de/app/download/11021815399/%C3%9Cber-uns-Hans.mp3?t=1457012794" type="audio/mpeg"></source>
    </audio>
    <img src="http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158" name="playbutton" width="32" height="32" id="playbutton" title="Abspielen" style="cursor: pointer" onclick=
    "abspielen("")" onmouseover="playbutton.src='http://www.bj-wuppertal.de/app/download/11022181999/playbright.png?t=1457020199'" onmouseout=
    "playbutton.src='http://www.bj-wuppertal.de/app/download/11021987899/play.png?t=1457020158'" alt="" /> <img src="http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543" name=
    "pausebutton" width="32" height="32" id="pausebutton" title="Pause" style="display: none; cursor: pointer" onclick="pausieren("")" onmouseover=
    "pausebutton.src='http://www.bj-wuppertal.de/app/download/11022194499/pausebright.png?t=1457020233'" onmouseout=
    "pausebutton.src='http://www.bj-wuppertal.de/app/download/11021966799/pause.png?t=1457019543'" alt="" />
</div>


Der Player reagiert so aber leider nicht mehr wenn man auf Play drückt.
 
Du musst die " in den HTML-Attributen (onclick) natürlich maskieren oder ' statt dessen verwenden. Sonst denkt der HTML-Parser, dass das Attribut zu Ende ist...
Code: 
onclick="abspielen('')"
 
Super es klappt. Ich freu mich gerade richtig :) :)
Vielen, vielen Dank dafür, jetzt kann ich die Internetseite endlich fertig umstellen :rolleyes:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben