Adding a mute/unmute button in Harlowe?

Question

I have added Howler.js to add background music to my story. However, I want to also add a music button that can mute and unmute the music if you click it. How can I do that?

I have read the documentation of Howler.js, but I'm still pretty confused.

Answer 1

Something like this: 

In your JavaScript: 

window.muteSound = window.muteSound || {
    isMuted : false, 
    muteButton : function () {
        muteSound.isMuted = !muteSound.isMuted; 
        Howler.mute(muteSound.isMuted);
    }
}

Then, in passage: 

<tw-link onclick='muteSound.muteButton()'>Mute Sound</tw-link>

You can also use the controls system from my howler-for-harlowe repo, which includes a slightly more full-featured mute button and a volume control. 

Comments

Thanks! But what if I wanted the button to just simply be an image of a mute button, like in most games, instead of having a button with words on it. Can I do that, too?

---

Yep. 

<img id="mute-button" src="url to your image" onclick="muteSound.muteButton()" />

Optional CSS for the pointer-style cursor: 

#mute-button { cursor: pointer; }

If you wanted to change the symbol when it's muted, I would recommend using my controls script from the repo (but if that's not an option let me know) and then you can use classes and set the image as a background and swap between them using the .muted class. 

---

So I did exactly what you said, but the button is not showing anywhere?

---

I can't see anything obviously wrong with the code I gave you, but I didn't actually test it, so it's possible I made a mistake somewhere. I'll check everything over when I get back to my computer.

---

After testing the code I gave you, the problem isn't on my end.

Test html file I made. (Note: may take a minute to load / cache.  The file is currently hosted on my domain, it will get deleted eventually, so grab it now if you want to see it.)

If you want to look at the code to compare it to yours, save the webpage (right click -> save as on Windows; file -> save as on Mac) and import it into Twine.

---

Thank you, I'll check everything and see what I did wrong.