Unable to code sound into the Story

RaddersHQ

Normally I would circumvent the use of using a forum for this matter, but after exhausting what feels like every other possibility on my own, I feel like I finally feel as If I have reason to take this issue up a level, so to speak.

In terms of macro and coding I am familiar with the barest of essentials, but can still play ball and put things where they are supposed to go to the best of my meager knowledge, so it comes to me as a surprise when, despite even copy and pasting the specific Macro's and reading through the plethora of wiki's and guides, I am still unable to hear anything.

Either the passage appears with an error message, or the code actually seems to function as it should, but I hear nothing regardless. I have tried it with URLs and also with the file I needed loaded onto my computer and in the same folder as the story. I have even tried switching from Sugarcube (which I am using for the style sheets and other seeming applicable eases of use) to the other formats, and it still does not with the macro's or code processes I have tried. I am also aware that some macro's have fallen out of date, and I am no longer sure what to include or what not to include in this trouble shooting process.

I would very much appreciate it if someone were able to assist me in this matter. Thank you.

Claretta

SugarCube comes with its own sound macros.

http://www.motoslave.net/sugarcube/2/docs/macros.html#macrocat-audio

Do not use any alternative sound macros. In particular, if you are trying to use sound macros from the "Glorious Trainwrecks" blog, those macros specifically do not work with SugarCube without adjustments.

If you are using the SugarCube inbuilt macros, the most common cause of failure of these sound macros comes from bad source audio. Do you have the audio you are trying to play on your own computer, or are you trying to link to it on another person's web server? The latter is a very uncertain idea and will often fail to work due to websites being slow at loading external files.

(Not to mention, they might just remove the audio from their website at some point.)

Finally, if you've switched to Harlowe at any point, Harlowe does not allow custom macros.

RaddersHQ

Here's the exact segment of code I put into my first passage on twine beyond the preliminary text:

<<cacheaudio "boom" "A Silver Mount Zion - 13 Angels Standing Guard 'Round The Side Of Your Bed.mp3">>

<<audio "boom" play>>

Bearing in mind that this song is in the same folder as my Stories in my documents, and the code seemed to function this way (it doesn't seem to work with full URLs for some reason, albeit if I was going to use URLs I would have created a separate webpage for them etc) but I still hear nothing. I've even had the song playing over in media player at the same speed and Twine never catches up..

I kinda wanted to test to see if it would work but I really am unsure why it is not working when I have copy+pasted from the source everything except the name of the file.

TheMadExile

1. As noted in the documentation, <<cacheaudio>> should really be done during initialization, which is to say within the StoryInit special passage. Though you can use it elsewhere, I recommend against it.

2. The Twine/Stories directory within your Documents (which is, I assume, what you meant) contains your Twine 2 story data. Your Twine 2 stories are not compiled there, so Test/Play will not find any media there. If you're going to test media with relative paths, I would suggest Publishing to a specific directory (not the Twine/Stories directory!) and putting the media in there.

3. Yes, it works with URLs/URIs, as long as they're correct anyway.

RaddersHQ

Ok, so I wondered if it was the song causing the issue and it turns out it wasn't. Tried it with another song with a complete directory path and all in a new passage titled StoryInit, with

<<cacheaudio "menu" "C:\Users\RaddersHQ\Documents\Music\Music\thewitcher_en_audio_old_manor_theme\Old Manor Theme.MP3">>

as the code in the StoryInit passage and <<audio "menu" play>> in the Start passage. And I still hear nothing. I have also tested the mp3 on it's own, and can hear it quite clearly.

I literally have no idea what I am doing wrong here.

TheMadExile

That's not a valid URL. Try something like the following:

<<cacheaudio "menu" "file:///C:/Users/RaddersHQ/Documents/Music/Music/thewitcher_en_audio_old_manor_theme/Old Manor Theme.MP3">>

Also, which browser are you trying this with and have you tried others?

PS: Something I just thought of, if you're using the executable version of Twine 2 and using Test/Play, you will not hear any sounds as it doesn't support audio (or likely video). You'll have to Publish your story and test it that way.

RaddersHQ

Ok, so that worked!! Awesome, thank you!! I feel so dumb now but everyone is new once right :S haha!

When I published it to file and opened it from that after rejigging the file link it worked perfectly, thank you so much!

I am currently and most often using google chrome.

There are still a few things over my head though.. I don't really know how to play audio from a link still, which is an issue because I don't really want to publish my work without it having offline/online functionality first.

From what I have so far:

<<cacheaudio "youtube" "

<<audio "youtube" play>>

It comes up with an error message for no youtube ID?

Also, I am using the Earth's Story style sheet for sugar cube, and was wondering how to add pictures inside that box in each passage. I have tried before, but to little to no avail.

Sorry if this is a bit much to ask.. Thank you again

Edit: Ironic that the browser recognizes this link.. x)

Claretta

Consider going down to Twine 1.4 if you don't want the annoyance of having to fully publish every time you want to test. My story is almost a radio drama, and I can say I'd throw Twine out the window if I had to publish every time just to test audio.

As to youtube... I don't think the audio macros work that way.

RaddersHQ

I have considered it, but I would rip my own hair out if I had to go through the hassle of trying to re code again in a different code type x)

TheMadExile

SugarCube exists for both versions of Twine.


And Claretta is correct about the YouTube issue. The audio macros play audio (actual audio media), not audio tracks from YouTube videos (video media). The latter requires another solution, which I have, if you actually need it.


As to The Earth's Story Illustrated style, it's not fully compatible with SugarCube (I've attached a compatible version). Anyway, the CSS necessary to display an image in its image area would be something like the following:

.passage .header {
	background-image: url(IMAGE_URL_OR_URI_HERE);
}

That will display one image for all passages. Think of it as the default. If you want to display different images for different areas/scenes, then you'll need to use tags. Simply tag each passage which should receive a different image with a tag (e.g. forest or laboratory) and then add a new style rule like the following:

/* All "forest" passages. */
.forest .passage .header {
	background-image: url(IMAGE_URL_OR_URI_HERE);
}

/* All "laboratory" passages. */
.laboratory .passage .header {
	background-image: url(IMAGE_URL_OR_URI_HERE);
}

As you can see, the passage tag is automatically transformed into a class which you can target in the selector set of the rule.

RaddersHQ

Hey Exile, Cheers for the compatible layer style and all that I appreciate it and I was smart enough to know how to get the UI bar back too!! Hooray x)

Well normally I can get the audio from you tube videos via a separate resource, but that's more my end and I don't really wanna be getting involved in piracy claims etc by wrongfully downloading the wrong music etc..

I was just wondering what the easiest way to play it off a link would be (audio only, maybe get ahead to videos when I'm a little more into the deep end).



I feel bad in these circumstances, because I feel like I'm coming across as an idiot when I can't seem to get this right even when I follow the instructions. Thank you again for being patient by the way

So I put this code

.passage .header {
background-image: urlhttp://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg;
}

into my StoryInit whilst trying different variations like


.passage .header {
background-image: url http://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg;
}

and


.passage .header {
background-image: http://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg;
}

and finally

.passage .header {
background-image: url (http://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg);
}

and then

.passage .header {
background-image: url(http://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg);
}

I also put the codes in the story style sheet section under .passage .header {

or just .passage next to @media screen.

I'm not even gonna attempt tags just yet when this variety of code doesn't seem to function published or not.. I feel like such an idiot but currently I don't know what else I can do within my knowledge to rectify this.

Not having to publish each time is starting to sound more appealing as well :P haha

Claretta

There exists ways to play youtube audio only. You just play the video in the background invisibly. TheMadExile will know more about it.

Just beware that volume of youtube videos may not entirely match the volume of other things in your story.

TheMadExile

Which version of SugarCube are you using (I'd assumed 1.x; it will tell you in the story format dialog)?


If you're keeping the UI bar enabled, then you'll probably need to modify the Earth's Story Illustrated (ESI) styles further, since they're written under the assumption that there's nothing else taking up space in the page.


The image style rule goes in the Story Stylesheet, just like the ESI styles, or most CSS rules for that matter. Additionally, I'd put these after all of the ESI styles. The rule itself should be something like the following:

.passage .header {
	background-image: url(http://wallfoy.com/wp-content/uploads/2014/03/Dark-Grey-Background-98.jpg);
}

Though I discourage linking to other peoples' content without permission (unsure if that's the case here).


If you want to use YouTube as an audio source, then you need the YouTube BGM macro set (SugarCube compatible version attached) and to be aware of a few caveats:

1. Obviously, your players will need an active network connection so the macros can contact YouTube.
2. You cannot test the attached YouTube BGM macros with URIs or file: URLs (i.e. you cannot use Test/Play or simply open a Published file) due to security limitations. To test your project locally, while also having the macros function, you'll need some kind of local web server (something like Mongoose will do; micro-server, doesn't need to be installed).
3. The YouTube BGM macros do not offer a way to control the volume, so as noted by Claretta, you'll probably want to try to keep the relative volumes of your sources similar.

RaddersHQ

Hey sorry I've been pretty much away from twine most of the day doing some independent work, but now I'm back in the saddle so let's do this!

Currently I'm on 1.0.26 for Sugarcube.

Well it seemed to work with a standard black background from that webpage with no problems, essentially it was a test to see if it worked/how it worked with a webpage. I've been creating my own pictures to be included with my story under the tags function, but I'm not sure how to access local files from the image url. I had assumed it was similar to grabbing audio, but it doesn't seem to be the case.

Ahh, I'm sorry for the misunderstanding.. I was just wondering if it would be possible to play audio on an external link say, embedded into a seperate webpage (like a resources link on some websites which have a database of images and sounds/music. That's the sort of thing I would create independently, but per example' would it be similar to

<<cacheaudio "freesound" url"https://www.freesound.org/people/Robinhood76/sounds/316850/">>;

?).

I think Ideally I would want to program the game two separate ways; online and offline. Online would only require the HTML file as it would use all the available links online (potentially), whilst offline would probably be needed to be put with the specific files into a specific place (probably in archive form before being extracted) otherwise the audio wouldn't play right? Not everyone is gonna have their username RaddersHQ and all that, but I expect not everyone wants a folder on their desktop either. Begging your pardon for asking, but what would be the best way to go about making sure the code still finds the right files when the pathways aren't going to be the same from a different computer?

Thank you again by the way, you have been so helpful in getting this off the ground, slowly but surely

Claretta

It's best not to link to sounds on other websites. There's no guarantee the sounds will be there forever, and you might have cacheing problems.

If you want to develop an offline version, package it up with node.js (node webkit). A bit of forum or google searching should show how.

greyelf

An off-line version can be made by simple creating a folder containing both your story HTML file as well as any image/sound files required, and then using an archiving tool to create a ZIP file containing the folder.

TheMadExile

RaddersHQ wrote: »

[…] I've been creating my own pictures to be included with my story under the tags function, but I'm not sure how to access local files from the image url. I had assumed it was similar to grabbing audio, but it doesn't seem to be the case.

It is, you simply need to use a relative URI (which will just be a relative path in this case).

Let's try a simple example.

1. Create a directory someplace (on your desktop will do) and give it a name like MyFirstStory.
2. Create a sub-directory within MyFirstStory and name it media.
3. Place your images within the media directory.
4. In Twine 2, edit your image CSS to use the relative path (media/…). For example:

   .passage .header {
   	background-image: url(media/some-background.jpg);
   }
   

   Obviously, change the image filename to match one of your images.
5. Publish your story to the MyFirstStory directory.
6. Open the story you just published to the MyFirstStory directory.

You should see the image now.

I can create a small working demo, if necessary.

RaddersHQ wrote: »

[…] I was just wondering if it would be possible to play audio on an external link say, embedded into a seperate webpage (like a resources link on some websites which have a database of images and sounds/music. That's the sort of thing I would create independently, but per example' would it be similar to

<<cacheaudio "freesound" url"https://www.freesound.org/people/Robinhood76/sounds/316850/">>;

Yes, it's possible, easily.

The problems with your example are that: it doesn't link to an audio resource, it links to the download page of the audio resource (which aren't the same thing), and it has a spurious url before the URL (unsure why that's even there).

Also, freesound.org requires you to login to be able access an external download URL, so that's not going to be much use to you unless you download the audio and access them via relative paths (as was done in the image example above).

For a working example of audio from an external source, try this (from archive.org; comes from an example of mine in a post in the sound in passages thread):

<<cacheaudio "childsnightmare" "https://archive.org/download/ChildsNightmare/ChildsNightmare.mp3">>;

n.b. The semi-colon at the end is spurious and should not be there. The code tag here sucks.

Additionally, as Claretta noted in her last reply, and as I noted in the thread I linked to above, linking to external resources can be problematic for a number of reasons. To do so reliably, you really need the resources to be coming off of a CDN (Content Delivery Network) and have some assurance that they're going to stick around for the life of your project. Without either of those guarantees, I'd recommend downloading the resources and making them part of your project.

For bonus points, place an audio file in the media directory from the first example above (let's say you downloaded ChildsNightmare.mp3). You'd access it via a relative path like so:

<<cacheaudio "childsnightmare" "media/ChildsNightmare.mp3">>

RaddersHQ wrote: »

I think Ideally I would want to program the game two separate ways; online and offline.

If you use relative paths, and bundle the resources (by that I simply mean include them), you can do both.

RaddersHQ

Hey you guys!! You have literally no idea of how useful you've been to me (and hopefully others ) for the past couple hours I've been working stress free (in comparison anyway x) ) and the features and functions you gave me worked like a charm

Been messing around with bits and pieces of stylesheet and image background and was able to make something I was extremely proud of!! Thank you guys so much!! I've actually put you all in the special thanks section :') I finally got the jist of this (I think)!!! If I ever need help again I will be sure where to go thank you so much!!

I LOVE YOU (No homo)

Claretta

greyelf wrote: »

An off-line version can be made by simple creating a folder containing both your story HTML file as well as any image/sound files required, and then using an archiving tool to create a ZIP file containing the folder.

This is the really easy way to do an offline version. Though the main reason I recommend node.js is that it protects any custom assets you might have. Depending on how much you value those and/or who owns the copyright in them, you might want extra security.

Distributing sound files willy nilly across the net is a little iffy, so at least with node.js you'll never be accused of facilitating piracy.

The other reason is you don't need to worry about browser compatibility if just preparing the offline version. Though, if you also want an online version then you do, so this is a relatively minor advantage for most games.

greyelf

Claretta wrote: »

This is the really easy way to do an offline version. Though the main reason I recommend node.js is that it protects any custom assets you might have. Depending on how much you value those and/or who owns the copyright in them, you might want extra security.

I have not tested an exe file generated using NW.js (Node-Webkit) myself but if it is a standard Windows exe file then it is a relatively simple process to extract embedded resources from it.

Claretta

It still strikes me as better than just sending loose files around.

For example, if I use a licensed font in my story, then by the terms of that license I am allowed to include it in an application, and if someone hacks the application to get it, however easy that hack may be to an experienced user, then I am not responsible for their action. But if I didn't include even the most basic of protections and just sent them the raw font file that can be easily taken by anyone without needing any kind of knowledge to extract it, then I am in breach of the license. Just my thoughts on it.

Claretta

So since posting all this I've been searching for a way to secure a Twine NW.js app.

Am confident now that NW.js exes can be secure enough. I managed to completely block Universal Extractor from reading anything inside the file.

If anyone is preparing a Twine NW.js and wants info about how to do it, they can pm me.

Thrown

Made with Twine & SugarCube
SugarCube (v2.0.0-beta.4)

Since this topic came up again, I'll jump in. Not doing anything weird, I was just testing to see if I could get sound to work and I could not.

StoryInit(as Start passage, no blank spaces after)
<<cacheaudio "tada" "Media/tada.wav">>

Start Passage
<<audio "tada" play>>

I also tried:

StoryInit
<<cacheaudio "tada" "file:///C:/Windows/Media/tada.wav">>

Start Passage
<<audio "tada" play>>

I also tried a mp3. Neither testing nor Publish to File produced sound. The audio file and the Published file don't need to be in the same folder right? The windows location bar uses backslashes, so I tried "Media\tada.wav" as well.

Not a pressing issue, just tinkering while the thread was bumped.

TheMadExile

Firstly, neither Test nor Play currently support HTML audio (and I'm uncertain they ever will), so you must Publish to a file and test that.

Thrown wrote: »

StoryInit(as Start passage, no blank spaces after)

If by that you meant that you set the StoryInit special passage as the starting passage, then don't. Your starting passage should always be a normal passage, never a special passage.

Thrown wrote: »

StoryInit
<<cacheaudio "tada" "file:///C:/Windows/Media/tada.wav">>

Start Passage
<<audio "tada" play>>

While using an absolute URI (a.k.a. URL) to a local file should only ever be used for testing purposes, as long as you used Publish, the above example should have worked, assuming the file exists and the browser you're testing in supports the correct audio codec.

Case in point, your example works perfectly fine for me, with no modifications (in Firefox & Chrome; n.b. It will not work in any Microsoft browser (IE or Edge) as they don't support WAV audio).

For broadest browser support you should use MP3 and OGG. If you can only supply one version of an audio track, then use MP3. However, if possible, you should also try to supply an OGG version of the same audio file. For example:

<<cacheaudio "tada" "media/tada.mp3" "media/tada.ogg">>

Between the two of them, MP3 and OGG cover virtually all browsers.

Thrown wrote: »

The audio file and the Published file don't need to be in the same folder right?

Not when using an absolute URI, no. When using a relative URL (like in your first example), then they would need to be relative to each other, if not in exactly the same place (though that's easier).

For example, say you placed the published file in a directory, and within that directory added a subdirectory named media, within which you placed the audio file. Here's a diagram:

…\story.html
…\media\tada.wav

With a setup like that, the following should work:

:: StoryInit
<<cacheaudio "tada" "media/tada.wav">>

:: (your starting passage)
<<audio "tada" play>>

Thrown wrote: »

The windows location bar uses backslashes, so I tried "Media\tada.wav" as well.

URI's are forward-slash only, so don't do that.

Thrown

Thanks man, that was weird. I corrected the Start/Story Init passage and it still didn't work. I cut and pasted your

StoryInit
<<cacheaudio "tada" "file:///C:/Windows/Media/tada.wav">>

Start Passage
<<audio "tada" play>>

Under mine to compare them letter by letter and they were the same. I deleted mine and kept yours, republished, and it worked. I made the Story Init the start again (to check and see if that caused it) and it still worked.

I didn't type it the first time I wrote it, I cut and pasted it from above. Maybe I grabbed something extra. Maybe I had smart quotes in there or something, but it all looked the same.

Regardless, I may have never known that about the Story Init not being the starting point otherwise. Thanks for the detailed break down as always. I promise that one day I'll ask an easy question, lol.