Adding music to Twine games

Authoring Twine
,
1

I want to make a linear story that has background music and some images, and I was told that Twine is best for it. The thing is, I have no idea how to use it, I have no coding experience, and I don’t know how to add music and images. So which format would you say is best and easiest for me to use? I’ve tried looking at the guides but I still can’t make sense of them, I need a really basic step by step guide to get me started.

And also how do I change the background colour and text? Those are also important to me.

1 Like
2

I personally found Chapbook easy to use and it looks nice right away.

I’m pretty sure sugarcube and snowman are better for people who really love customizing stuff.

The best thing I’ve found for Twine is to take a game you like and look at its code. You can download a twine game as an HTML file and then import it into Twine to see what it looks like (as long as it was made with Twine 2, so no games that are really old).

To change the background color and text, you can select Story from the menu at the top and then stylesheet. You can put any CSS you want in there, so I’d look up CSS tutorials if I were you.

You add choices to new options by putting things in brackets:

[[Go left]]
[[Go right]]

In Chapbook, you can add images using flickr or, I think, local storage. Here’s a flickr image I included in one of my stories:

{embed Flickr image: '<a data-flickr-embed="true" 
href="https://www.flickr.com/photos/188129567@N03/51013487348/in/dateposted-public/" 
title="zoramites_tower_mormon_book_thompson">
<img src="https://live.staticflickr.com/65535/51013487348_f9e6213f11_n.jpg" 
width="320" 
height="236" 
alt="zoramites_tower_mormon_book_thompson">
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>', alt: 'the Zoramites'}
[continue]

Chapbook has a tutorial guide that works well:Introduction

There are usually other people on here who know way more about twine, they’ll probably have better recommendations, I just thought I’d get you started.

4 Likes
3

Can you post images to Flickr privately? But make them still able to show if you share the image URL? I’d just rather not have them publicly available outside of where I intend to use them.

4

You can just keep the images in a folder on your computer (and later, a folder in the index.html file that you upload to itch or whatever). These can be embedded like:
{embed image: 'cave.jpeg', alt: 'Cave entrance'}

The only problem with that is that you can’t see the images while using the twinery editor. To see them, you have to ‘publish’ the twine file (i.e. download it) and then put the twine file in the same folder as the images. Then you can see them. So it’s actually way easier to code, but a little annoying to test.

5

I’d rather do whichever option is easier to test, I want to make sure everything works right and that includes the images and sound.

Speaking of sound, how do I add that? Would I have to upload that somewhere as well, and could it be any sound website or do only specific ones work? Same with image websites.

1 Like
6

It looks like for sound you can do this (again, this is only in chapbook):

At the top of a passage that you want a sound to play in, you have to define it like follows (the two little dashes separate code from text in Chapbook):

sound.effect.explosion.url: 'boom.mp3'
sound.effect.explosion.description: 'a large explosion'
--
...
Then when you want it to play, you type the following in the text section:
...
The timer reads 0:00...

{sound effect: 'explosion'}

Sound effects only play once. To have looping music that keeps playing for a while, you do the same thing but call it ‘ambient’ instead of ‘effect’:

sound.ambient.forest.url: 'forest.mp3'
sound.ambient.forest.description: 'midday forest sounds'
--
{ambient sound: 'forest'}

There is only one ambient sound at a time; playing a new one slowly crossfades the old one out and the new one in.

The url can be any sound url. If you don’t put an actual website, it just looks for the sound file in the folder you download the game to when you publish it.

1 Like
7

Alright, I found out you can use image urls from other places as well (I have a private Discord server so that will do). I’m still trying to make sense of the guides but I feel like I’ll eventually be able to manage. Any other help is still appreciated, though, thanks.

1 Like
8

You can use Twine Sugarcube which is what I’ve been using. It’s not too difficult to change or modify the background and colours etc. This guide is quite helpful. I’ve also made a step-by-step guide on adding music to a Twine Sugarcube game so you can check it out if you’re interested in trying Sugarcube as the format :slightly_smiling_face:

1 Like
9

In case you’re not aware, a person needs to have a Tumblr account and to be logged in to it to see your guide.

You may want to consider another way of hosting that guide, as not everyone has such an account, nor might they be willing to create one just to access that guide.

1 Like
10

Sorry about that :slightly_smiling_face: Hope this helps.

1
11414×2000 185 KB

2
21414×2000 268 KB

3
31414×2000 245 KB

4
41414×2000 243 KB

5 Likes
11

I wish I’d had this a month ago when I was attempting to figure out Sugarcube!

Do you recommend <<waitforaudio>> in storyinit after the cacheaudio calls?

12

I haven’t used the << waitforaudio >> macro since I usually use the fade-out option for the music since it’s on a loop. From what I see in the sugarcube documentation, you’ll add in the << waitforaudio >> after setting the << cacheaudio >> tracks

<<cacheaudio "a" "a_track.…">>
<<cacheaudio "b" "b_track.…">>
<<cacheaudio "c" "c_track.…">>
<<cacheaudio "d" "d_track.…">>
<<waitforaudio>>

Then you’ll load the audio as normal above :blush: I could be wrong though since I didn’t use this method when I added in the music in my game so I can’t be sure if it’ll work.

1 Like
13

Sorry I haven’t posted in a while, I was ill. I’ll get back to trying to put the story together soon, thanks for the advice.

14

The security system of most modern web-browsers doesn’t allow the playing of audio (1) until the end-user has interacted with the web-page.

This is why it is generally recommend not to try playing audio in a Twine project until the “2nd” Passage is shown to the end-user, and to make the “1st” Passage shown some sort of Welcome / Summary / Info page that includes a link to that “2nd” Passage.

All the <<waitforaudio>> does is delay the playing of any audio you tried to start early, until that “2nd” Passage is show.

(1) in this case “audio” includes both audio files and video files that include an audio track.

15

I’m having trouble getting the audio to work.

If I switch to sugarcube and use the files rather than have them online, will I still be able to test it properly so I can make sure it works? Or will I need to keep publishing it for that?

EDIT: So I worked out how to make the music work in sugarcube, but not nothing else shows up on those passages that I have the music playing in. What do I do about that?

16

So I worked out how to make the music work in sugarcube, but not nothing else shows up on those passages that I have the music playing in. What do I do about that?

You need to supply an example of the content of a Passage where “nothing else shows up” for us to debug your issue.

17

I have the code

<<audio songname loop play>>

(not the actual song name, that’s just a placeholder), but whether I put text over or under it, it won’t show up when I open the game in my browser, it’s just a blank page with the music playing.

18

I get a weird error message in Chapbook whenever I change the background (ambient) sound. First it was an error message, that the sound which was already playing couldnt be played on. Now that I inserted the stop command, I get a warning that the sound was stopped by the user agents request. The new ambient sound starts playing both times, but will this error message actually be shown to the player? I have only played my game in test mode so far. Both times there is no fade between both sound files, althouth the manual mentions that there will be a fade in and out when switching the ambient sound. I use Firefox.

1 Like