New Sugarcube version: How to play audio?

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.


1 Like

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

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

In fact I was working with those codes:

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

<<audio codename play>>

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

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.

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: