Playing audio in Harlowe (Twine 2.0)

Gersande

I have an <audio src=""> tag in the passage I want the music to play in, but I want the audio to keep playing for the next... ten ish passages until another audio file starts playing.

Is there a way to do this in Harlowe?

Aranoud

Audio in Harlowe is... iffy at best. You might want to check out Howler.js, but before you do, these posts on the forum might help:

(in order of relevance and importance to your current issue)
twinery.org/forum/discussion/2473/new-to-twine-need-step-by-step-help-to-add-music-background-image
twinery.org/forum/discussion/2177/how-do-you-play-a-sound-file-in-tine-2-xtwinery.org/forum/discussion/2400/using-l-s-html-sound-macros-in-2-0-harlowe

In my honest opinion, if you want to stick with Harlowe, you'll probably have to scrap the audio idea. Trust me, I've been fighting a losing battle with Harlowe, HTML, and audio for a couple of weeks now, haha.

There's a lot more support for audio with Sugarcube. I don't know about 1.x, not having ever used it, but 2.x has support for audio.

Hope you found this useful

Gersande

Thanks, yeah. I've actually gotten a sort of solution with editing the javascript of Twine 2 like so:

var audio_background = new Audio('/twine/takecarejamassets/bensound-memories.mp3');
audio_background.play();

But unfortunately it doesn't allow for very advanced controls. The song starts playing on load but it doesn't allow me to add any other audio or manipulate the audio as far as I've been able to test out, and whenever I try to add things like

<script>audio_background.play();</script>

directly into a twine passage, it just spits out errors.

So, I did find a solution, and I definitely want to try implementing howler.js, but I'm also running into a problem where I'm having an exceedingly hard time finding any information about Harlowe, jQuery, and adding extra javascript packages without actually having to edit the html file in a regular text editor after processing it with Twine 2. :c

Aranoud

Ugh. I'd try to avoid that. Editing a twine in a regular text editor is a nightmare, especially if you don't know what you're doing. I'm afraid that as to the issues you pointed out, I'm as in the dark as you are, unfortunately. I could try messing around with Javascript audio a little, having only used HTML until now, but don't expect much.

We can only hope that some kind, experienced poster will stumble across this threat and enlighten us with their multitudinous wisdoms.

Gersande

I used to edit Twine 1 files in a text editor a while back to embed disqus and stuff like that (not sure why on earth I'd want that, but I remember doing it) so I've done it before and I have a lot of web design experience so I'm not totally daunted by html files? But I don't like the idea of editing twine 2 files post-twine editing. It seems like a nightmare to test because it adds so many steps to saving files and testing them in a browser.

greyelf

Gersande wrote: »

var audio_background = new Audio('/twine/takecarejamassets/bensound-memories.mp3');
audio_background.play();

<script>audio_background.play();</script>

directly into a twine passage, it just spits out errors.

Your problem is one of Variable Scope, you created the Javascript variable in one scope (the Story Javascript area) and you are trying to access that variable in a different scope (a script element in a passage).

For your solution to work you would need to make the variable Global, and the most common way people do this is by adding it to the global window object.

window.audio_background = new Audio('/twine/takecarejamassets/bensound-memories.mp3');

The Fading out/Stopping Looped Music in Passage thread contains a template for another possible solution to your sound issue.

TheMadExile

As an HTML5 <audio> element technical point, I'd recommend avoiding its API's constructor:

… = new Audio(…);

In favor of document.createElement().

The reason being is that there are bugs in some mobile browsers which cause <audio> elements created via the constructor to erroneously fail in certain instances where those created via document.createElement() do not.

CX3

I made sound happen with:
<audio autoplay>
<source src="c:\soundfile.wav" type="audio/wav" />
</audio>

But the sound ends when entering a new passage. How can the music stay?