Toggle on/off buttons in Javascript
<p>I'm stuck. I've got two buttons with each a single function, one that plays a sound when clicked and one that pauses the sound when clicked. I want to be able toggle between them so I just see one button saying "Sound on" when it's off and vice versa. 
Problem is: my Javascript knowhow! </p>

<pre><code>&lt;audio id="spacesound"&gt; &lt;/audio&gt;
&lt;button type="button" id="offbutton" class="offbutton" onclick="disableSound()"&gt;Sound off&lt;/button&gt;&lt;br&gt;
&lt;button type="button" id="onbutton" class="onbutton" onclick="reenableSound()"&gt;Sound on&lt;/button&gt;
</code></pre>

<p>These are the buttons, and in case if necessary, the functions they call.   </p>

<pre><code>//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();
}
</code></pre>

<p>There might be some CSS code for this but I'd much rather have it in JS, thank you!</p>