New Sugarcube version: How to play audio?

Authoring Twine
1

Hello! First of all, I have to say that I don’t know anything about CSS codes or any computer language. Maybe something basic, but almost nothing. I’m working on an election-based game for my master’s thesis and I need to know how can I handle with the audio. I explain myself:

I need to put background audio on certain passages. For example: When the game starts, I want quiet background music to be played, but then, when the player gets into a fight, I would like to remove that background music and change it to a more violent song.

On the other hand, I would like to add sound effects while the background music plays. (This is not mandatory, but it would be great)

The problem is:
Before the new Sugarcube update, this June, it was easy for me to put the audio because you only had to add in the passage “StoryInit” the cacheaudio tag with the key name of the song that you want to be played in quotation marks, and then, In the specific passage, simply put the audio tag with the key name in quotation marks too and add the address of the folder where the music file is. However, now this doesn’t work and there seems to be something called “simplyaudio” or “API” that I have no idea what it is or how does it works.

Could anyone help me please? I am starting to learn CSS for the first time in my life and it is very difficult for me, but I would like to learn something.

Thanks.

1 Like
2

I’m going to assume that when you use the term ‘tag’ in both of the above statements you actually mean ‘macro’.
You can still use the <<cacheaudio>> macro within the StoryInit special passage to define your audio tracks, and the <<audio>> macro to play or control a specific pre-defined track. The SimpleAudio API is a means to programatically interact with SugarCube’s audio system using JavaScript.

If you mean automatically playing audio when the story’s initial Passage is shown at start-up then the reason why that may not be working is because the security system of many modern web-browser’s now require that the end-user interacts with the page at least once before any audio will auto-play.

This is why we generally recommend making the initial Passage of a project some sort of welcome / summary / credits page, which contains a link to the actual start of the story.

1 Like
3

You should probably take a look at the “Music” section of my Twine/SugarCube sample code collection. It includes several tips and tricks to get it to work properly.

One thing you should be aware of is that, fairly recently, some browsers have changed to require user interaction with the web page before any audio can play, due to security reasons. This means that audio code which used to work just fine in an older version of the browser, may no longer work now.

The easiest way around that problem is to put up some sort of “splash screen”, where you show the game’s logo or whatever, and they have to click something to go to the first page where the music starts.

Anyways, if you take a look at the “Music” section of the page I linked to above, it should help you fix that, as well as help you make sure that the audio plays properly after loading a saved game.

Hope that helps! :smiley:

P.S. Audio has nothing to do with CSS. CSS is what affects how the page is styled. Playing audio is a combination of HTML and JavaScript, though SugarCube also has some built-in methods to make working with audio easier. Also, “API” stands for “application programming interface”, basically a description of how to talk to a piece of code to get it to do what you want.

1 Like
4

In fact I was working with those codes:

StoryInit:
<<cacheaudio "codename" "music/nameofthesong.mp3">>

Passage:
<<audio codename play>>

It used to work, but not anymore. I don’t understand why. :frowning:

5

Okay, I have a couple questions. When that page says “this passage” it means I must put that code on a passage I want, right? and then, when it says “StoryInit passage:” I must put that code on the StoryInit passage in order to get it work… but what’s StoryCaption passage?

Do I need to put all the codes to get the musik work?

Sorry if I bother you!! This is complicated for me.

6

The track ID should be within quotes, like this:

<<audio "codename" play>>

But, again, I note that the user needs to interact with the page first, since security models in some browsers have changed recently.

It’s actually saying that that’s the code in the passage you’re looking at, but yes, you’d put something like that in the passage where you want your audio to play.

Correct, though you’d change it appropriately for your filenames.

That’s a part of the UI bar on the left, where the volume control will go. (See StoryCaption passage.)

That’s an example of how to get it to work and use a volume slider in the UI bar.

Alternately, if you look a bit further down in that sample code, you could use the <<PlayTrack>> widget which it shows the code for there.

No bother. It’s not like anybody is born knowing this stuff. :wink:

Hope that helps! :smiley:

7

I’m following your code on your site but it doesn’t seem to be working for me. I know it works for you, I can hear the audio when I look at your page, so it’s something wrong on my end. I just don’t get what it could be. Especially since the audio example from the motoslave documentation doesn’t work either when I download the html file? (I’m using Twine Version: 2.6.2 and SugarCube Version: 2.36.1 if that matters.)
I copied the JS and inserted my pathway, I fixed the filenames and codenames to be what I need, I put a buffer page before the music starts playing, but I can’t make the audio play, whether I run it through twine or export to html.
The following is what my StoryInit looks like:

<<set _bgm = setup.SoundPath + "Snow.mp3">>
<<cacheaudio "snow_bgm" _bgm>>
<<set _bgm = setup.SoundPath + "Blood.mp3">>
<<cacheaudio "blood_bgm" _bgm>>
<<createaudiogroup ":ui">>
	<<track "snow_bgm">>
	<<track "blood_bgm">>
<</createaudiogroup>>

then I call it with <<audio "snow_bgm" volume 1 play loop>>
Everything is where it should be but it just won’t play. Please help, I feel like I’m going mad.

8

What value are you assigning to the setup.SoundPath variable when accessing your project via either the Twine 2.x application’s Test and Play options, or via the Story HTML file you generated via the Publish to File options?

What is the folder structure you are saving your generated Story HTML file into, and where in that structure are you saving that file?

Are you calling that <<audio>> macro in the first Passage your project shows to the end-user?
Or are you calling it in another Passage that is accessed from that first Passage via a ‘link’?

I ask because most modern web-browsers, especially those used on mobile devices, don’t allow the playing of audio (including in video) until after the end-user has interacted with the page.

note: This is why it is generally advised to make the first Passage shown a Welcome / Summary / Credits page of some sort, that contains a link to the real start of the story/game.

1 Like
9

setup.soundPath is the following, as copied from HiEv’s code:

hasOwnProperty.call(window, "storyFormat")) {
	// Change this to the path where the HTML file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Users/[username]/Documents/Twine/Stories/Blood and Snow/";  // Running inside Twine application
} else { 
	setup.Path = "";  // Running in a browser
}
setup.SoundPath = setup.Path + "sounds/";

I’m calling it in the second passage, accessed from the first by a link.

10

The C:/Users/[username]/Documents/Twine/Stories/ part of the above String value looks like the path to the folder that the Twine 2.x application uses to store its internal Project HTML files in on Windows.

If it is, and you have created the Blood and Snow folder in that location then I strongly suggest you move your Blood and Snow folder to somewhere else on your local hard-drive.

That being said, and if I understand things correctly, your current project folder & file structure looks something like…

C:/Users/
	[username]/
		Documents/
			Twine/
				Stories/
					Blood and Snow/
						sounds/
							Snow.mp3
							Blood.mp3

…and when you save the Story HTML file you generate using the Twine 2.x application’s Publish to File option, you save that file in the C:/Users/[username]/Documents/Twine/Stories/Blood and Snow/ folder. So the above structure ends up looking something like the following…

C:/Users/
	[username]/
		Documents/
			Twine/
				Stories/
					Blood and Snow/
						Blood-and-Snow.html
						sounds/
							Snow.mp3
							Blood.mp3

And that you are opening the following file in your web-browser…

C:/Users/[username]/Documents/Twine/Stories/Blood and Snow/Blood-and-Snow.html

WARNING: Most Operating Systems (other than Windows) are letter-case sensitive when it comes to Folder and File names, which means that Blood-and-Snow.html and blood-and-snow.html would be considered two different files in most operating systems. For this reason most Web Developers use a single letter-casing (mostly lower-case) when naming their folder and files.

Also most operating systems (other than Window) require punctuation characters (like SPACE) to be encoded when included in a URL For this reason most Wed Developers don’t use punctuation characters in their Folder & File names, and in situations where SPACE characters would help improve the readability of the Folder / File name, either a standard dash (minus) or an standard underscore is uses instead.
eg. your project folder and Story HTML file would become either of the following…

blood-and-snow/blood-and-snow.html
blood_and_snow/blood_and_snow.html

note: while standard dashs (minus) and standard underscores can be intermixed in the same folder & file names…

blood_and-snow/blood-and_snow.html

…for consistency sake people generally use one or the other of those characters.

11

Thank you for the filing tip, I’ll keep that in mind
And apparently the audio is working now, but not when I test, only when I build, so that’ll make testing fun. Anyway, it’s working well enough, so thank you for the help, I appreciate your patience!

12

Note, HiEv’s old site link is no longer working. He has examples hosted here instead: Sample Code