Is there a way to play audio in all the passages without adding it in every passage?

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2
Story Format: Snowman 2.0.2

I want to use a background music on loop in all the passages of my game, but I’m not sure how to do it without adding it individually in every single passage (this approach is quite cumbersome and there’s loss in continuity of the audio.)

How can I accomplish this?

2

I’m not great with Twine, but I know Snowman is the barebones “build it all yourself” story format. Do you need to use Snowman? I’ve had great luck with the audio macros in Sugarcube which give a lot of control to play and loop individual sounds and BGM/ambience simultaneously with crossfades and playlists and conditional control of audio independent of passages. (Although the cues and audio control do have to generate from a current passage.)

3

Yes, unfortunately I’ve to stick with this format and my story is now almost complete. I do have audio added at specific places, but its not quite seamless as it would have been if it was playing throughout.

4

Again, Snowman is the part of Twine I know the least about…but it would seem the answer would be some kind of JS to call audio that is hosted from a webpage separate from what the game is doing. Hopefully someone more knowledgeable will chime in.

1 Like
5

Thanks, I hope so too.

6

You didn’t explain which technique you are current using to play audio, nor did you supply an example of such, so I will assume you are using a HTML <audio> element. Like the following TWEE Notation based example demonstrates…

:: Start
[[Second]]

:: Second
Should hear music.
<audio id="music" autoplay loop>
	<source src="music/seniortheme.mp3" type="audio/mpeg" />
	<source src="music/seniortheme.ogg" type="audio/ogg" />
</audio>

The reason such an <audio> element stops playing when a Passage Transition occurs is because it is a child/descendent of the <tw-passage> element which represents the content of the Passage being shown, and the contents of the <tw-passage> is destroyed during the Passage Transition process.

For an <audio> element to keep playing it would need to be a child of some other parent element, one whose direct contents isn’t affected by Passage Transition, like the <tw-story> element.

The Second Passage in the following TWEE Notation based example demonstrates how to use jQuery’s append() function to add a new <audio> element to <tw-story>, which will result in “background” like music being played. Navigating to the Third Passage shows that the music keeps playing even after a Passage Transition. The Forth Passage then uses the jQuery remove() function to destroy the <audio> element which causes the music to stop.

:: Start
[[Second]]

:: Second
Should hear music.
<%
	$('tw-story').append('<audio id="music" autoplay loop src="music/seniortheme.ogg" type="audio/ogg">');
%>

[[Third]]<br>

:: Third
Should still hear music.

[[Stop Music]]

:: Stop Music
Music should stop.
<%
	$('#music').remove();
%>

WARNINGS:

  1. The Snowman Story Format is meant to be used by people who already have a good understanding of HTML, CSS, and especially JavaScript. Because Snowman’s engine includes almost no functionality besides how to show a Passage and how to create a link between two Passages.
  2. the above example should not be considered best-practice for achieving the outcome you want, as
    it contains no error catching, and many things could go wrong with it.
  3. Ideally audio code like the above should be abstracted out into a set of custom functions that can be used instead, or replaced with am existing JavaScript audio library like Howler.js
3 Likes
7

Apologies for not specifying it, I did use the audio element in the passage and added either the autoplay attribute or called audio.play() function in <% %>.

Thank you for your help.