How to add audio using Sugar Cube or HTML or anything HEEEELP

Question

<<cacheaudio "theme" "music/creation.mp3">>
<<audio "theme" loop play>>

Heres what I've got so far and its all I'm trying to do is play this song a song at the beginning of the game and im using the sugar cube macros, using a relative link and I've checked it 100 times to see its correct and its 100% correct. Please someone help me!

Answer 1

> at the beginning of the game...

If by this you mean within the 1st Passage shown in your game then you need to know that many web-browsers (especially those used on mobile devices) now require that the end-user interactes with the page before the web-browser will allow audio (and video) files to auto-play. The main reason for web-browsers to include this newish security featue is to stop the automatic (downloading and) playing of ads.

This is why we generally suggest starting your music on the 2nd Passage of your story, and to use the 1st Passage as some sort of welcome or credits screen.

note: you should be calling your <<cacheaudio>> macro(s) within your project's StoryInit special passage.

Answer 2

Are you talking about having this problem inside Twine 2?  In the published HTML?  Both?

If the problem is when you're trying to do it from inside Twine 2, then the issue is that it needs an absolute path.  To deal with that problem you can put this code in your JavaScript section:

if (window.hasOwnProperty("storyFormat")) {
	setup.Path = "C:/Games/YourDirectory/";  // Running inside Twine application
} else {
	setup.Path = "";  // Running in a browser
}
setup.SoundPath = setup.Path + "music/";
setup.ImagePath = setup.Path + "images/";

Just replace "C:/Games/YourDirectory/" with your actual directory path.  Then you can use this:

<<set _bgm = setup.SoundPath + "creation.mp3">>
<<cacheaudio "theme" _bgm>>

Now it should work properly within Twine 2.

If the problem is that it doesn't work with your published HTML, then it's probably what Greyelf said here, or what I said in another recent audio answer (see also the sample code there).

Hope that helps!  :-)