Einen Button zum abspielen und anhalten einer Musikdatei (javascript)

      Einen Button zum abspielen und anhalten einer Musikdatei (javascript)

      Hallo zusammen,

      ich versuch schon seit Stunden ein kleines "Programm" zu schreiben, mit dem ich eine Musikdatei auf Knopfdruck abspielen und stoppen kann. Dabei soll das ganze nur mit einem Button funktionieren.

      Da ich mich noch nicht lang mit javascript beschäftige, kann ich noch nicht alles so scripten, wie ich mir die Funktion vorstelle...
      Hier 'mal mein Versuch, das ganze zu realisieren:

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <script language="JavaScript">
      4. var variable = "";
      5. function playSound(){
      6. document.sound.play();
      7. variable = 1;
      8. }
      9. function stopSound(){
      10. document.sound.stop();
      11. variable = 0;
      12. }
      13. function check(){
      14. if (variable == 1){
      15. button.value = "Stoppen";
      16. button.onmousedown = "stopSound();";
      17. }
      18. if (variable == 0){
      19. button.value = "Abspielen";
      20. button.onmousedown = "playSound();";
      21. }
      22. }
      23. </script>
      24. </head>
      25. <body>
      26. <center>
      27. <embed src="Musikdatei.wma" autostart="false" loop="false" hidden="" name="sound">
      28. <br>
      29. <input type="button" name="button" value="Abspielen" onmousedown="playSound();" onmouseup="check();">
      30. </center>
      31. </body>
      32. </html>

      Dabei funktioniert der Austausch von onmousedown="stopSound();" nicht... warscheinlich dann auch onmousedown="playSound();" nicht...

      Wäre super, wenn Ihr mir weiterhelfen könntet! :)
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Daniel“ ()

      Die Datei wird abgespielt, soweit so gut... erst beim Loslassen des Buttons funktionier das Script nicht so wie ich will ^^: Wenn man den Button loslässt, soll --onmousedown = "playSound();"-- durch --onmousedown = "stopSound();"-- ersetzt werden, damit beim erneuten klicken auf den Button die Musikdatei gestoppt wird.
      Wegen Befehl "onclick" - hab' ich gerade ausprobiert, funktioniert komplett nicht... die Datei wird nicht einmal gestartet... :(
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP
      Mir ist gerade aufgefallen, dass Du die Variable "variable" mit einem vorgestellten var definiert hast. Eventuell verhindert dies, dass diese Variable global verfügbar ist, vgl: de.selfhtml.org/javascript/sprache/variablen.htm

      Eventuell kommst Du auch ganz ohne diese Variable aus; folgender Ansatz:

      Quellcode

      1. function check(){
      2. if (button.value = "Abspielen"){
      3. playSound();
      4. button.value = "Stoppen";
      5. }
      6. if (button.value = "Stoppen"){
      7. stopSound();
      8. button.value = "Abspielen";
      9. }
      10. }


      Aufrufen musst Du dann jeweils nur noch die Funktion check();

      Ich habe das jetzt nicht getestet. Aber vom logischen Ansatzpunkt her müsste es gehen wie ich meine ;)

      Viele Grüße,
      Fabian Karg

      >>> flf-book.de
      Hey,
      danke erst mal für den Lößungsvorschlag! :) - Ich hab das mal so ausprobiert; nur tut sich da leider nix... (ich hab auch schon "onclick" durch "onmousedown" ersetzt; genauso wenig...)
      Das Ganze sieht so aus, vieleicht hab ich ja 'nen Fehler reingebaut:

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <script language="JavaScript">
      4. function playSound(){
      5. document.sound.play();
      6. }
      7. function stopSound(){
      8. document.sound.stop();
      9. }
      10. function check(){
      11. if (button.value = "Abspielen"){
      12. playSound();
      13. button.value = "Stoppen";
      14. }
      15. if (button.value = "Stoppen"){
      16. stopSound();
      17. button.value = "Abspielen";
      18. }
      19. }
      20. </script>
      21. </head>
      22. <body>
      23. <center>
      24. <embed src="Musikdatei.wma" autostart="false" loop="false" hidden="" name="sound">
      25. <br>
      26. <input type="button" name="button" value="Abspielen" onclick="click();">
      27. </center>
      28. </body>
      29. </html>


      Nachdem dieses Script wie gesagt nicht funktioniert hat, hab ich die "Werte-Änderungs-Befehle" button.value = "Stoppen"; in function playSound(); und button.value = "Abspielen"; in stopSound(); verschoben, onclick im input auf startSound(); gesetzt und onmouseup="check();" :

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <script language="JavaScript">
      4. function playSound(){
      5. document.sound.play();
      6. button.value = "Stoppen";
      7. }
      8. function stopSound(){
      9. document.sound.stop();
      10. button.value = "Abspielen";
      11. }
      12. function check(){
      13. if (button.value = "Abspielen"){
      14. playSound();
      15. }
      16. if (button.value = "Stoppen"){
      17. stopSound();
      18. }
      19. }
      20. </script>
      21. </head>
      22. <body>
      23. <center>
      24. <embed src="Musikdatei.wma" autostart="false" loop="false" hidden="" name="sound">
      25. <br>
      26. <input type="button" name="button" value="Abspielen" onclick="playSound();" onmouseup="check();">
      27. </center>
      28. </body>
      29. </html>

      Jetzt wird die Musikdatei gestartet (beim loslassen des Buttons, was doch komisch ist: der Befehl "playSound();" wird doch durch "onclick" gefordert, also beim draufklicken... ?()
      Wenn jetzt erneut auf den Button geklickt wird und man lässt los, wird der Sound gestoppt, beginnt aber wieder beim Loslassen von Vorne. Wenn man dagegen einen Doppelklick auf den "Stoppen-Button" ausführt, wird der Sound erfolgreich gestoppt und kann wieder mit "Abspielen" normal gestartet werden.

      @Fabian: Ich hoffe, ich hab mich nicht zu kompliziert ausgedrückt... :P
      _________
      EDIT:
      Ich habe vergessen zu sagen, dass mir klar ist, warum der Sound gestoppt wir und danach wieder von Vorne beginnt, dafür ist "onmouseup="check();" verantwortlich... aber ich bekomme es nicht hin, dass der Sound trotzdem nicht wieder Startet...
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Daniel“ ()

      Hallo,

      warum startest Du den Funktionsaufruf nicht einfach so: <input type="button" name="button" value="Abspielen" onclick="check();">

      Führt das zum gewünschten Ergebnis?

      Ansonsten befürchte ich habe ich Dich nicht richtig verstanden^^

      Sollte es immer noch nicht klappen: Du hast nicht zufällig online eine Demo davon?

      Viele Grüße,
      Fabian Karg

      >>> flf-book.de
      Oh, onclick="click();" ist ein Tippfehler von mir, hätte natürlich onclick="check();" heißen sollen... funktioniert aber leider trotzdem nicht, obwohl die Logik des Scriptes einleuchtet und trotzdem tut sich nix, die Datei wird nicht einmal gestartet.

      Onlineversion: --- Vom Server genommen... ---

      Danke für die Bemühungen!!! ;)
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Daniel“ ()

      Hallo Increase,

      wenn Du den Button mit 2 Eventhandlern belegst, weiß das Script ja gar nicht, was es machen soll. X( 8o ?( ;( :(

      So rein gefühlsmäßig sollte es funktionieren, wenn mit onclick() immer die gleiche Funktion aufgerufen wird und diese dann testet, ob play oder stop folgen soll. Allerdings funktioniert die Abfrage von button.value dafür nicht (zumindest bei mir - ich weiß nicht, wie ich's hinbringen soll).

      Da ich der unheimliche JavaScript-Freak bin :) :) :) :) :) habe ich das Web nach einer solchen Funktion ausgequetscht, etwas modifiziert, reorganisiert, interpretiert und variiert. 8)

      Herausgekommen ist dies:

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <script type="text/javascript">
      4. var merker = 1
      5. function Check($Zahl)
      6. {
      7. if($Zahl%2!=0)
      8. {
      9. button.value = "Stoppen";
      10. document.sound.play();
      11. merker = merker - 1;
      12. }
      13. else
      14. {
      15. button.value = "Abspielen";
      16. document.sound.stop();
      17. merker = merker + 1;
      18. }
      19. }
      20. </script>
      21. </head>
      22. <body>
      23. <center>
      24. <embed src="Say No.wma" autostart="false" loop="false" hidden="" name="sound" MASTERSOUND>
      25. <br/>
      26. <input type="button" name="button" value="Abspielen" onclick="Check(merker)">
      27. <br/>
      28. <br/>
      29. </center>
      30. </body>
      31. </html>

      Der Merker wird mit 1 initialisiert und dann von der Funktion je nach play oder stop auf 1 oder 0 gesetzt. Durch den Merker weiß das Script immer, ob die Musik gerade spielt oder nicht.

      Die besten Grüße von Uwe

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Mister“ ()

      Hallo Uwe,

      DANKE für das Script!!! =)
      Ich hätte da wohl noch etwas länger daran herumgebastelt bis es vieleicht funktioniert hätte...

      wenn Du den Button mit 2 Eventhandlern belegst, weiß das Script ja gar nicht, was es machen soll. X( 8o ?( ;( :(

      -> ich beschäftige mich noch nicht sehr lange mit Javascript und habe die Grundlagen nur kurz überflogen ^^ ... aber jetzt habe ich ja wieder etwas dazugelernt.
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP
      Hallo ihr zwei,

      @Increase: Denke nicht, dass ich nicht lange daran herumgebastelt habe!

      Direkt beschäftigt mit JavaScript habe ich mich auch noch nicht, deshalb auch die vielen Smilies hinter JavaScript-Freak. Ich habe schon mit einer Reihe von Programmiersprachen gebastelt und meinte, das wäre doch recht leicht hinzubekommen. Dass aber die Abfrage if (button.value = "XXX") beim Aufruf der Check-Funktion nur jeweils ein Mal funktioniert hat, hat mich schon etwas verwundert. Danach kam ich auf die Idee mit dem Merker. Meine erste Variante mit merker = 1; und merker = 0; schien irgendwie eine lokale Variable merker in der Funktion Check() zu verwenden, was deshalb leider nicht funktionierte. Durch merker = merker + 1; wurde anscheinend die (richtige) globale Variable merker benutzt, damit funktionierte es zufriedenstellend. Übrigens geht auch merker++; (anstelle der Zeilen 11 und 17 - ein paar Zeichen eingespart). Mit der +/- Variante muss die Abfrage auch nicht auf gerade/ungerade auswerten, es würde wohl reichen, auf 0/1 zu prüfen. Mir fällt da gerade noch was ein, was ich gleich noch mal ausprobieren muss.

      Bin gleich wieder da.

      Die besten Grüße von Uwe
      Aus irgendeinem blöden Grund funktioniert der ELSE-Zweig nicht, wenn man auf Gleichheit prüft (s. u.). Habe mich trotz Warnung meines Informatiklehrers verleiten lassen, auf Gleichheit zu prüfen, stand ja schon so da, nicht wahr?

      Quellcode

      1. function Check()
      2. {
      3. if (button.value = "Abspielen")
      4. {
      5. button.value = "Stoppen";
      6. document.sound.play();
      7. }
      8. else
      9. {
      10. button.value = "Abspielen";
      11. document.sound.stop();
      12. }
      13. }
      14. </script>

      Wenn es nicht notwendig ist, sollte man dies wohl nicht tun und anstelle dessen lieber auf Ungleichheit prüfen, was auch sofort funktioniert. Damit kann dann der Merker wieder entfallen und man hat nicht nur einen funktionierenden Code, sondern auch einen schönen. Wenn Du willst, kannst Du sogar noch eine andere Startbeschriftung definieren (s. u.) Eine feste Breite für die Taste kommt auch ganz gut.

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <script type="text/javascript">
      4. function Check()
      5. {
      6. if (button.value != "Stoppen")
      7. {
      8. button.value = "Stoppen";
      9. document.sound.play();
      10. }
      11. else
      12. {
      13. button.value = "Abspielen";
      14. document.sound.stop();
      15. }
      16. }
      17. </script>
      18. </head>
      19. <body>
      20. <center>
      21. <embed src="Say No.wma" autostart="false" loop="false" hidden="" name="sound" MASTERSOUND>
      22. <br/>
      23. <input type="button" name="button" style="width:200px" value="Lied hier abspielen" onclick="Check()">
      24. <br/>
      25. <br/>
      26. </center>
      27. </body>
      28. </html>

      Die besten Grüße von Uwe
      Ja, so hat mir das Fabian gegeben, glaube ich ^^:

      Quellcode

      1. function Check()
      2. {
      3. if (button.value = "Abspielen")
      4. {
      5. button.value = "Stoppen";
      6. document.sound.play();
      7. }
      8. else
      9. {
      10. button.value = "Abspielen";
      11. document.sound.stop();
      12. }
      13. }

      @Fabian: Wenn's nicht so is: sry :D :P ;)

      Das mit "nur auf Ungleichheit prüfen" ist ein guter Tipp! :)
      Jetzt weis ich, an wen ich mich wenden muss, wenn ich wieder Probleme hab mit Javascript texten :D

      DANKE nochmal ;)
      Grüße,
      Daniel

      >>>fsghannsklemm.de<<<
      My software never has bugs. It just develops random features... xP
      Zwei Gleichheitszeichen?! That's it! Javascript-Kenner werden jetzt wahrscheinlich etwas schmunzeln. Vielleicht sollte man doch erst ein paar Grundlagen erlernen, bevor man so einfach "herumprogrammiert" (völlige Selbstüberschätzung bei totaler Ahnungslosigkeit :])

      Der Erfolg gab mir aber doch recht, oder?

      Die besten Grüße von Uwe