Audio/Visuals/Stylesheets in Twine 2 Harlowe

ExileVirtigo

NoobLord here. I can't get audio to work at all. I tried many solutions online and I can't get anything to work. I have a few audio files that I would like to play on loop when certain passages are viewed. I also would like to know how to add images, and have a different style apply to certain slides. My game has two sections that are supposed to be entirely different, I have one stylesheet working but it obviously changes all slides where I only need it to cover half.

TLDR:
I'm super new, sorry
How do I add audio?
How do I add pictures?
How to have "multiple stylesheets"?

Sorry for asking super basic questions. Twine 2, Harlowe.

greyelf

... asking super basic questions.

None of your three questions are actually super basic! *smile*

How to have "multiple stylesheets"?

You don't actually need more than one stylesheet, instead you can use the technique described in the Basic Harlowe Passage Tag Based Styling thread to use Passage Tags and CSS selectors based on those tags to style some of your stories passages differently.

Once you have implemented Tagged based styling the actually CSS selectors you use depend on exactly which parts of a passage you want to style, but all the relevant tag-based selectors will start with html.<tagname> where <tagname> is replaced with the actual style tag name.
(note: the following examples assume that most of your passages have no style tag and that the ones you do want to style have been tagged with forest, the actual tags you use in your story are up to you.)

a. Background colour of the whole page:

html {
	background-color: white;
}

html.forest {
	background-color: green;
}

b. Changing the font size the passage text:

html.forest tw-story {
	font-size: 3em;
}

Audio and Image files:
The first issue you need to solve with both ot these external files types is where you are going to store/host the media (audio/image) files, and the first question you need to answer is are you going to host your story HTML file on a website or are you going to place the story HTML file into a ZIP (or another archive format) file and upload it to a file sharing site.
If you plan to host your story on a website then you need to determine if that website supports uploading media files, if it does then you will be hosting the media files there otherwise you will need to find somewhere else to host the media files.
If you place to use a ZIP file and a file sharing site then the media files will be contained within the same ZIP file.

A. Adding a image file to a Passage:

You use a standard HTML img element to display an image.

<img src="http://domainname/foldername/imagename.jpg">;
or
<img src="foldername/imagename.jpg">

... depending on where you are hosting/storing the media files the element's src attribute will be either an absolute or relative URL.

B. Adding a audio file to a Passage:

You use a standard HTML audio element to play an audio file, you may need to include the same audio file in different formats so that it will play on all the different web-browsers.

<audio src="http://domainname/foldername/audioname.mp3"; autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
or
<audio src="foldername/audioname.mp3" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>

... depending on where you are hosting/storing the media files the element's src attribute will be either an absolute or relative URL.

I hope the above is some help.

ExileVirtigo

Hey awesome thanks, I actually tried the solutions for the audio/pictures before but I used an incorrect method to store pictures and didn't include the "your browser does not support" line for audio ^_^ I got images to work via URL, but where do I make a folder to package them with my game ? Is it in the same folder with the html file for my game? Another issue I have is with audio. I can't find a good file storage method online. Is there a way to format dropbox or Google Drive to make it work? I couldn't get audio or pictures to come up by putting them in folders either (thats why I asked where xD sorry). Also I haven't tried that solution for multiple stylesheets, but that thread looks super helpful! Thank you so much, I really appreciate the help!