Help making a Mute / Unmute button ? [Harlowe]

ilaaa1390

Hey again everyone,

slowly but surely becoming less of a noob but at the moment having some trouble with audio in Harlowe (yes, in hindsight I'm aware that it probably wasn't the best format choice for using music but oh well ^^; )

I'd like to have some background music autoplay in loop but also have a button for users to be able to Mute/UnMute the music if they want. Here's an example I made in standard html.

To replicate that in twine though, So far I have this:

In a passage with a header tag:

{
<audio autoplay loop id="longlost" > 
<source src="https://dl.dropboxusercontent.com/u/56322638/twine/long_lost_8bit.mp3";
type="audio/mpeg">
</audio>

<button type ="button" class="button" id="mute"> 
<img id="muteimg" src="https://dl.dropboxusercontent.com/u/56322638/twine/mymutebuttonwh.png"; 
alt="mute" onClick="toggleMute(this);">
</button>
}

Then in the javascript:

function toggleMute (img) {
	var image = document.getElementById('muteimg');
	var audio = document.getElementById('nowplaying');

	if (img.src.match ("mymutebuttonwh")) {
		image.src = "https://dl.dropboxusercontent.com/u/56322638/twine/myunmutebuttonwh.png";
		audio.muted = true;
	}else {
		image.src = "https://dl.dropboxusercontent.com/u/56322638/twine/mymutebuttonwh.png";
		audio.muted = false;
	}
}

The music autoplays in loop fine , but on clicking the button I get this error message :
"Sorry to interrupt, but this page's code has got itself in a mess. RefferenceError: toggleMute is not defined at HTMLImageElement.onclick. (This is probably a bug in the Twine game Engine.)"


so I'm pretty sure my code is wrong somewhere but I'm not sure how to fix it.

Thanks for the help !!

greyelf

The reason your passage code can't find your Javascript function is described in the answer to the Harlowe - Play a sound on a cycling link thread, basically it is out of Scope. That thread also explains how to get around the issue.

One potential problem with using a header tagged passage to create your audio element is that because the header is actually part of the current passage being shown it is destroyed and re-created each time the Reader navigates between passages. This in turn will cause the music to stop and restart for each navigation.

The Fading out/Stopping Looped Music in Passage(s) thread covers a method that uses a hidden audio element and Javascript to play sound instead, be sure to read the entire thread as there are amendments/suggestions to the solution at the end of it.

You would still need to include the mute/unmute button in a header.

ilaaa1390

Hi greyelf! Thanks for the quick reply as always After reading the posts you mentioned I managed by putting the functions into a window. namespace and that seems to be working. couldn't get the mute button to toggle image / Mute-Unmute so settled for displaying two separate buttons for each function (not great aesthetically but will do for now).
here's the code if you have any suggestions to make it better:

In a passage with a header tag:

{<button type ="button" class="button" id="mute"> 
<img id="muteimg" src="https://dl.dropboxusercontent.com/u/56322638/twine/mymutebuttonwh.png"; 
alt="mute"  onclick="Music.mute();">
</button>}

{<button type ="button" class="button" id="unmute"> 
<img id="unmuteimg" src="https://dl.dropboxusercontent.com/u/56322638/twine/myunmutebuttonwh.png"; 
alt="mute"  onclick="Music.unmute();">
</button>}

In the Java Script:

// Music namespace.
if (typeof Music == "undefined") {
	var Music = {
		play: function(tune) {
			var audio = $('#nowplaying');
			if (! audio.length) {
				audio = document.createElement('audio');
				audio.setAttribute('id', 'nowplaying');
				$("body").append(audio);
			}
			// setup the tune to play.
			audio.src = tune;
			audio.loop = true;
			audio.play();
		},
		mute: function() {
			// find the audio element.
			var audio = $('#nowplaying');
			if (audio.length)
				audio[0].muted = true;
			
		},
		unmute: function() {
			// find the audio element.
			var audio = $('#nowplaying');
			if (audio.length)
				audio[0].muted = false;	
		},
	     }
	};
	window.Music = Music;
}

Music.play('https://dl.dropboxusercontent.com/u/56322638/twine/long_lost_8bit.mp3');

seriu

Hi! Have you been able to make this work?