Toggle Ein/Aus-Tasten in Javascript

Question

Ich stecke fest. Ich habe zwei Tasten mit jeweils einer Funktion, eine, die beim Klicken einen Ton abspielt und eine, die den Ton beim Klicken pausiert. Ich möchte in der Lage sein, zwischen ihnen hin- und herzuschalten, also sehe ich nur einen Knopf, der "Ton an" sagt, wenn es aus ist und umgekehrt. Problem ist: mein Javascript Knowhow!

<audio id="spacesound"> </audio> 
<button type="button" id="offbutton" class="offbutton" onclick="disableSound()">Sound off</button><br> 
<button type="button" id="onbutton" class="onbutton" onclick="reenableSound()">Sound on</button> 

Dies sind die Schaltflächen und, falls erforderlich, die Funktionen, die sie aufrufen.

//it plays on auto when the page is loaded 
myAudiothree = new Audio('media/deepspace.mp3'); 
myAudiothree.loop = true; 
myAudiothree.play(); 

//continue sound  
function reenableSound() 
{ 
myAudiothree.play(); 
} 

//pause sound 
function disableSound() 
{ 
myAudiothree.pause(); 
} 

Es könnte ein bisschen CSS-Code dafür sein, aber ich hätte es lieber in JS, danke!

Answer 1

Die Lösung ist einfach „Speicher“, um den Ist-Zustand in einer Variablen ...

var isPlaying=false; 

function playOrPause() 
{ 
    if(isPlaying) 
    { 
    myAudiothree.pause(); 
    isPlaying=false; 
    }else 
    { 
    myAudiothree.play(); 
    isPlaying=true; 
    } 
} 

jetzt nur Sie eine Funktion anstelle von zwei.

Edit:

Ich habe eine für Sie snipped, zu zeigen, wie auch auf die Schaltfläche Text ändern.

var isPlaying=false; 
 

 
$('#myButton').click(function(){ 
 
    var $this = $(this); 
 
    if(isPlaying) 
 
    { 
 
     isPlaying=false; 
 
     $this.text('start'); 
 
     
 
     }else{ 
 
     isPlaying=true; 
 
     $this.text('stop'); 
 
     } 
 
       
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton">Play</button>