Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[sugarcube 2] How to: Buttons/Links play a click sound?

edited February 2016 in Help! with 1.x
I'm using Twine 1.4.2 and sugarcane 2. I'd like any passages that have the [computer] tag to play a short sound (click.wav) when the user makes their selection. For passages marked [telephone], I'd like a different sound (beep.wav) to play when the player selects a choice/link.

What's the easiest way to do this?

One side issue: I've found sound effect sounds to be slightly unpredictable in my experiments where sometimes there's a significant delay (several seconds) between when I call the sound (e.g. <<audio "newmessage" play>> ) and when it actually plays. Is that a common issue? I am doing cache audio in the storyinit (e.g. <<cacheaudio "newmessage" "./assets/audio/NewMessage.wav">> )

Comments

  • Brad wrote: »
    I'd like any passages that have the [computer] tag to play a short sound (click.wav) when the user makes their selection. For passages marked [telephone], I'd like a different sound (beep.wav) to play when the player selects a choice/link.

    What's the easiest way to do this?
    Depends. Assuming one of the audio tags exists, should all of the passage links play the appropriate track or only select links?

    For example, if all passage links should initiate playback, then you could do something like the following: (goes in a script-tagged passage)
    postdisplay["setupAudioOnClick"] = function () {
    	var curTags = tags();
    	var trackId;
    
    	// Determine which track should be played, if any.
    	if (curTags.contains("computer")) {
    		trackId = "computerClick";
    	} else if (curTags.contains("telephone")) {
    		trackId = "telephoneBeep";
    	}
    
    	// If a track should be played, setup all links within the passage to
    	// initiate playback.
    	if (trackId) {
    		$("#story").find("a.link-internal,button.link-internal")
    			.on("click", function () {
    				new Wikifier(null, '<<audio "' + trackId + '" play>>');
    			});
    	}
    };
    

    Brad wrote: »
    One side issue: I've found sound effect sounds to be slightly unpredictable in my experiments where sometimes there's a significant delay (several seconds) between when I call the sound (e.g. <<audio "newmessage" play>> ) and when it actually plays. Is that a common issue? I am doing cache audio in the storyinit (e.g. <<cacheaudio "newmessage" "./assets/audio/NewMessage.wav">> )
    In general, no. Are your audio assets being loaded from a local drive or over the network? Do they have some initial silence or are they gapless? Are you trying this in a desktop or mobile browser? Have you tried other browsers?
  • I cut and paste the code snippet into a script-tagged passage and added the corresponding cacheaudio commands in the StoryInit passage. It's not working, however. Are there any other steps I might be forgetting?
  • While it's not exactly a complex piece of code, I did test it to ensure that it works as intended. Hmm.

    You did change the track IDs within the snippet to whatever they should be, or used those IDs with your <<cacheaudio>> invocations, yes?

    Also, are the links within normal passages? I assumed they were, so that's where the task looks for them (well, it checks the entire story display area, but that amounts to the same thing, practically). If the links are someplace else (in the UI bar, a dialog, a custom element elsewhere), then they won't be found by the current code.

    Finally, just to make sure, have you tested those tracks to ensure they're working?
  • Yes, I did those things. I'll play around a bit more and troubleshoot with different sounds, projects, browsers, etc to try and isolate which piece is causing the problem.
  • I've narrowed it down. I have two issues:
    1. Using the code above, it works for the first button clicked, but never again until you restart the game. This is just for a short (1sec) sound effect. Do I need to issue a stop or rewind command before playing it again?
    2. The second issue is that for the passages that are using a typewriter post render function, it doesn't work. I'll experiment with coordination between the two.
  • Brad wrote: »
    1. Using the code above, it works for the first button clicked, but never again until you restart the game. This is just for a short (1sec) sound effect. Do I need to issue a stop or rewind command before playing it again?
    You do not, no. While issuing new play actions to a track while it's playing won't cause it to restart or queue up additional playbacks, you should not be having issues with a 1s duration track.

    Which browser are you testing this in?

    If you'd care to try some debugging. In the example code I gave previously, find the following:
    		$("#story").find("a.link-internal,button.link-internal")
    			.on("click", function () {
    				new Wikifier(null, '<<audio "' + trackId + '" play>>');
    			});
    
    And replace it with this: (I added some debugging code)
    		var clicks = 0;
    		var track  = Macro.get("cacheaudio").tracks[trackId];
    
    		track.onEnd(function () { console.log(trackId, 'playback ended'); });
    
    		$("#story").find("a.link-internal,button.link-internal")
    			.on("click", function () {
    				console.log(
    					trackId,
    					'click (#' + (++clicks) + ') -> issuing play action',
    					(track.isPlaying() ? '(already in playback state)' : '')
    				);
    
    				new Wikifier(null, '<<audio "' + trackId + '" play>>');
    			});
    
    Afterwards. Open your browser's developer console, go to one of the passages you're testing this in and click on some links to see what shows up in the console.

    Brad wrote: »
    2. The second issue is that for the passages that are using a typewriter post render function, it doesn't work. I'll experiment with coordination between the two.
    Depending on which "typewriter post render function" you're referring to, you may not be able to put links into it without it breaking them. Beyond that, the setupAudioOnClick task cannot patch links which do not yet exist within the DOM, so depending on how the typewriter module you're using works, the task might fire long before the typewriter puts any links where it might have been able to find them.
Sign In or Register to comment.