• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

zwei (oder mehr?) Funktionen über einen Textlink starten

A

alzach

Neues Mitglied
Hallo,
ich bin jetzt seit einer Woche auf der Suche nach einem Script, mit dem man zwei verschiedene Funktionen starten kann und bin auch ansatzweise auf was ähnliches gestoßen. Leider nur sowas wie Player ein- und ausschalten oder Frame anzeigen und verschwinden lassen, womit ich mein beabsichtigtes Vorhaben nicht realisieren kann.
Unglücklicher Weise bin ich absoluter Laie in Javascript, sehe mich allerdings in der Lage, vorhandenes Script an meine Bedürfnisse anzupassen.
Auf meiner Seite möchte ich über die Feiertage einen Div-Container (Frohes Fest usw.) anzeigen und dazu im Hintergrund eine Weihnachtsmelodie (mp3) abspielen. Da nicht jeder das Gedudel hören will und auch der Container ausgeblendet werden soll, sollte man das über einen Textlink (oder Button) zusammen beenden können.
Das Ausblenden des Divs habe ich über über die Funktion
function hide_div(){
document.getElementById('divID1').style.visibility = 'hidden';
erfolgreich realisiert aber das gleichzeitige Beenden der Musik über eine zweite Funktion in einem Script und Aufruf der beiden Funktionen über "onclick" will mir nicht gelingen.
Ich hab´s zwar probiert aber mit mit einer Funktion wie
function ende(){
document.getElementById('aus').stop();
will mir das nicht gelingen.
 
Du kannst doch beide Anweisungen in einer Funktion notieren:
Code: 
function hide_div_ende(){
    document.getElementById('divID1').style.visibility = 'hidden';
    document.getElementById('aus').stop();
}
Oder ist das nicht, was Du vorhast?
 
vielen Dank für den Tip.
Das habe ich so schon ausprobiert aber es wird nur die erste Funktion ausgeführt.
Mein html-code dazu sieht so aus:
Code: 
<div id="aus" style="display:none;"> <audio src="images/chr_dhtxmas.mp3" autoplay="true"> </audio> </div>
<div id="divID1" class="divClass" onmousedown="startDrag(this);"> <br>
<center>
<h2 style="text-align:center"><b>Wir w&uuml;nschen allen ein frohes Weihnachtsfest....</b></h2>
<img src="images/nikorock.gif"width="120px"><img src="images/nikorock.gif"width="120px">
   <h2 style="text-align:center"><b>...einen guten Rutsch und ein gesundes, erfolgreiches Neues Jahr!</b></h2>
   <img src="images/sil53.gif" width="120px"> <br><br>
<a href="#" onclick="hide_div()"><b>schließen</b></a> 
</center>
    </div>
Ich habe auch schon erfolglos versucht, den Player innerhalb des zu schließenden Div-Container zu platzieren.
 
Kann mir nicht vorstellen, dass das nicht funktioniert. Poste doch noch dein vollständiges Javascript.
Ich habe auch schon erfolglos versucht, den Player innerhalb des zu schließenden Div-Container zu platzieren.
Zum Vergrößern anklicken....
Das wundert mich nicht, weil Du den Container ja nur unsichtbar machst und nicht vom DOM entfernst.
Edit: Habe mir deinen Code noch etwas angesehen. Es kann nicht funktionieren, weil Du das stop() auf den div-Container anwendest und nicht auf das Audio-Tag. Du musst es so machen:
Code: 
<audio id="aud" src="images/chr_dhtxmas.mp3"  ...
und
Code: 
function hide_div_ende(){
    document.getElementById('divID1').style.visibility = 'hidden';
    document.getElementById('aud').stop();
}
 
Zuletzt bearbeitet von einem Moderator:
Nein, das ist schon OK. Wenn Du das div unsichtbar machst werden auch alle Elemente, die darin eingebettet sind, unsichtbar. Diese Vererbung funktioniert jedoch nur bei CSS-Eigenschaften, nicht bei einem Funktionsaufruf wie stop().
 
es funktioniert leider auch mit "audio id..." nicht. Es wird immer nur der Container versteckt aber nicht die mp3 beendet.
Ergänzend möchte ich erwähnen, dass ich die beiden Funktionen in eine .js-Datei geschrieben und mit "<script type="text/javascript" src="aus.js"></script> in die html-datei eingebunden habe.
Aber damit kann es ja eigentlich nicht zusammenhängen, denn das Verstecken funktioniert ja?
 
Ich hab´s geschafft!
Nachdem ich irgendwo gelesen hatte, dass audio die Methode stop nicht kennt (o.s.ä.?), bin ich bei der weiteren Recherche drauf gestoßen, dass man die Methode pause benützen kann (warum auch immer) und damit funktionierts.
Vielleicht kannst du mir ja (zur Vertiefung meiner Kenntnisse) noch ganz grob die Zusammenhänge erklären, damit ich wenigstens ungefähr weiß, was ich da getan habe :confused:;)
 
Ah so, ich kenne die Javascript-API des audio-Tags nicht so gut. Las sich mit stop() ganz plausibel. Offenbar sind sogar die Experten bei stackoverflow vor solchen Irrtümern nicht sicher, wie man hier sehen kann:
http://stackoverflow.com/questions/9283656/stopping-html5-audio
Bei der Google-Suche findet man auch die Möglichkeit, das src-Attribut auf leer zu setzen, aber das soll unerwünschte Nebeneffekte haben können.
Weiß nicht so richtig, was man da erklären soll. Wie Du mit getElementById() CSS-Attribute setzen kannst, hast Du ja schon herausgefunden. Und bei der Google-Suche bist Du sicher auf Beschreibungen der Javascript-API gestoßen, z. B. hier:
http://www.w3.org/wiki/HTML/Elements/audio
Dort ist in der Tat nirgends von einer Funktion stop() die Rede.
Und dass man die API-Funktionen direkt auf das audio-Element anwenden muss, habe ich ja schon geschrieben. Am besten postest Du mal, was dir unklar ist, dann kann man es gezielter beantworten.
 
na ja, irgendwie bin ich noch ganz am Anfang von JS. Ich kann zwar Beispiele, die ich im Internet finde, weitgehend an meine Bedürfnisse anpassen und sehe dann, dass es funktioniert aber ich weiß eigentlich nicht warum. Wenn ich dann auf so ein Problem stoße, wie oben, tappe ich völlig im Dunkeln und überlege die ganze Zeit: "Benutze ich nur falsche Tags und/oder Methoden (s. div id oder audio id) oder muß ich etwas ganz anderes verwenden.
Ich hatte ja zunächst statt dem audio-tag den embed-tag erfolglos probiert und vermute jetzt im nachhinein, dass ich dabei auch embed id... hätte verwenden müssen und dass dann die Methode stop funktioniert hätte?
Mit deinem Hinweis auf die id im audio-tag hast du mir auf jeden Fall weitergeholfen und mir auch mit der Definition der Funktionen bestätigt, dass ich zumindest damit richtig lag - und ein bisschen muss ich ja auch selbst machen;)
Vielen Dank also!
 
Das audio-Tag ist die Zukunft und das embed-Tag ist veraltet. Insofern hast Du dich richtig entschieden. Das embed-Tag ist kein Standard und man weiß nie genau, ob der Browser eines Besuchers es unterstützt. Ich habe daher für meine Videos - vor dem video-Tag - einen Flash-Player verwendet und nach Möglichkeit ohne Javascript mit dem object-Tag eingebunden. In den wenigen Fällen, wo ich eine Audiodatei abspiele, benutze ich ebenfalls einen kleinen Flash-Player, den EMFF. Hatte noch keinen Bock, es auf das audio-Tag umzustellen.
irgendwie bin ich noch ganz am Anfang von JS
Zum Vergrößern anklicken....
Dann ist die Benutzung einer Javascript-API für einen Audio-Player IMO schon etwas fortgeschrittenes. Was mich betrifft, war es mir bei dem Aufbauen von Playlists für meine Videos zu kompliziert und ich habe es stattdessen mit PHP gelöst.
 
wie ich schon sagte, kupfere ich Vorlagen aus dem Netz ab und passe sie an meine Bedürfnisse an.
Als Audioplayer verwende ich z. B. das Script von Thilo Brai
http://www.thilobrai.onlinehome.de/HTML5-Audio-Player.htm
Das ist zwar sehr umfangreich (er prüft allerlei mögliche Eventualitäten ab) aber so gut erklärt, dass sogar ich mit meinen bescheidenen Kenntnissen problemlos damit zurecht gekommen bin.
Er verwendet übrigens für die Audiowiedergabe alternativ einen Object-Player für die alten IE (diese Funktion hat sich mir nicht erschlossen) und einen html5-Player, ebenfalls mit dem audio-Tag. Letztendlich musste ich nur im Script die für mich überflüssigen Teile ausblenden, den Player im html-Code optisch frisieren und die Playlist mit meinen eigenen Daten füttern.
Schwieriger als PHP kann das auch nicht sein;)
 
Ja, solche Player-Skripts gibt es einige. Der Vorteil ist, dass die Bedienoberfläche dann in allen Browsern gleich ist und dass man eine Rückfallebene in Form eines Flash-Players hat für Browser, die das audio-Tag nicht unterstützen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben