Can you make Squiffy advance to the next passage after an audio file is done playing?
I ask this because I'm making a cutscene or two.
I think you probably have two options, one is easier to implement but less accurate and vice versa.
Easy option
If you know the length of your audio file, you could simply use the following Javascript to advance to the next section after a certain amount of time has passed. In this example 10 seconds.
setTimeout(function(){ squiffy.story.go("nextsection");}, 10000);
The downside to this method is that if the player is playing online in a browser, the audio may take some time to download before it starts playing, meaning that the sound might not, for example, actually start until 3 seconds have passed and then end prematurely when the 10 seconds expire. You can almost get around this with HTML5 audio preloading option (which means the download will occur before it has to play), but this wont work on all browsers (particularly mobile ones) and the issue may remain.
Harder option
My suggestion would be that you make use of the HTML5 function "onended", which will detect when an audio file has finished.
The code would look something like:
In your main HTML template header:
<audio id="myAudio" controls>
<source src="mymusic.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In your section:
var aud = document.getElementById("myAudio");
aud.onended = function() {
squiffy.story.go("nextsection");
};
In theory (I haven't tested the code) that should play the music / sound and then, on complete, tell Squiffy to advance to the next section. I can't see why it shouldn't work, but let me know.
Note about mobile browsers
As touched upon, Mobile operating systems put restrictions on the use of audio (to prevent users downloading huge files on their data plan). If you want a mobile user to enjoy your sound, you have to tie the initial load to a "user event", such as clicking a button etc.
More info: http://www.html5gamedevs.com/topic/1658-how-to-play-music-on-both-desktop-and-mobile/
My file is 37 seconds long, so would I replace the 10000 with 37000?
This also seems to advance other passages.... Have I done something wrong here???
Yes, 37 seconds would be 37000.
Without seeing how you've implemented the code it's hard to say why it's not working.
Yeah, I somehow fixed it by just rewriting that code, still no idea what went wrong, but it works now, I just put it after the @clear of my passages and before the actual bulk of the passage.
NM: The problem still exists!
Here is my code: (at the VERY beginning of the game, and it's affecting the whole game, not just the passage)
[[Intro]]:
setTimeout(function(){ squiffy.story.go("Main Menu");}, 40000);
$(document).ready(function(){$("body").hide().fadeIn(1000);});
<body>
<div style="background-image:url(http://vignette3.wikia.nocookie.net/blehbleh/images/4/4a/New_Intro.gif/revision/latest?cb=20170227181740);background-repeat:no-repeat;width:600px;height:393px;color:white;font-size:18px;">
</div>
<audio autoplay>
<source src="http://vignette3.wikia.nocookie.net/blehbleh/images/f/f7/Introduction_Lines.ogg/revision/latest?cb=20170223160339">
</audio>
<br>
<br>
<br>
<br>
<br>
[[Skip Cutscene]](Skip)
</body>
Quite a lot wrong here. I'll try and fix the code when I'm next at my computer (on phone at moment).
There's A lot wrong here?
Like what exactly.
(I hope I don't sound rude....)
(srry if I do, I don't mean to)
(Really.)
I'm not exactly clear what you mean by "advance other passages", but I'll deal with the code at hand.
Firstly, your fade in option is probably not advised, at least using the current method as you are targeting the pages body, which will have already loaded in order to load the main Squiffy div within which your sections will be outputting. If the purpose of the fade is simply to fade in the animated gif, I'd target the container rather than the whole body. If you really want to target the entire body, I'd personally handle it outside of a section, as part of the main HTML template.
After your Javascript, you've included a body tag. Remember, the code you output via Squiffy will already be contained within a body tag, so you're invalidating your HTML by adding more. I suspect this is what is causing your issue, but more on this in a second. Essentially your file now looks like:
<html>
<head></head>
<body>
*template content*
<body>
*your content
</body>
</body>
Also, just a comment but you seem to be somewhat over-complicating displaying your animated gif. Why not just use:
<img class="image" src="myimage">
You don't appear to be making use of the DIV other than to display the picture, so why not just display the picture?
The animated gif file is pretty large at just under 10mb. That will take some time to download (plus the music), which will likely throw everything out of sync (as discussed in my original response and why this approach is easier but not the best solution).
However, that all said, the timeout function should move the user to the next section (entitled Main Menu) after 40 seconds. It's possible some of your malformed HTML is causing issues, but it shouldn't have any further influence once it has triggered. My best guess is that the inclusion of the erroneous BODY tag just after the Javascript is causing the next section timeout to be retained even when the user moves to the next, as it's being interpreted by Squiffy as part of the HTML template, and not code that belongs within a Section. Try removing that and see what happens.
Feel free to link me to working code.
I can't work with the code this very moment, but I'll read it over fully later, for now, here's the game so far, if that's what you meant by linking you to working code: http://textadventures.co.uk/games/view/y1qeprerzuo4xe5_ng3dtq/sister-location-the-text-adventure-beta
Oh wait, NM, i'll send you the code once I get it working (now I see what you mean) (Unless you want to see my game so far, I don't really care ATM)
Just to be sure, I backed up a copy of my buggy yet still working code, but here's what I've gotten around to fixing so far. I think I've still done some stuff wrong (Sorry if I'm a bit of a new Noob at some of this stuff....)
[[Intro]]:
audio id="myAudio" controls>
<source src="http://vignette3.wikia.nocookie.net/blehbleh/images/f/f7/Introduction_Lines.ogg/revision/latest?cb=20170223160339" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
var aud = document.getElementById("myAudio");
aud.onended = function() {
squiffy.story.go("Main Menu");
};
<img class="image" src="http://imageshack.com/a/img924/7633/byoS41.gif">
<br>
<br>
<br>
<br>
<br>
[[Skip Cutscene]](Skip)
I should restate, by "advance other passages" i meant that it would ocassionally send you back to the main menu every 40 seconds
I've been playing with the code, and....now it's completely broken.
Good Thing I backed it up, it's just now that I'm right back where I started.... :,(
This thing to set a timer sounds awesome. If it works we could duplicate the core mechanic of awesome games like Lifeline!
I tried it out on a Squiffy page, but it reads the command as text. Try it yourself, copy and paste it on Squiffy, it just doesn't go. Maybe it should be preceded by
... some "script" command?
# **Timer**
Trying the timer funcion.
Wait 5 seconds.
setTimeout(function(){squiffy.story.go("section link");}, 5000);
[[section link]]:
Done! Thanks for your patience!
You couldn't recreate it exactly like Lifeline, as the timer would cease to have effect once the browser window was closed.
The following was built in Squiffy and is similar to lifeline in the sense it makes use of a simulated text message conversation:
https://swipetapthink.com/member/demo/?id=demo
I figured it out by myself. It was a stupid mistake: I had to write the Javascript code right after the call of the section.
Funny little game, that swipetapthink! You said it was made using squiffy? But how was that level of customization possible (like, changing the background, making the messages appear into sqares of different color, and the section above?
With Squiffy, if you are comfortable with HTML, CSS and Javascript, you can customise anything. The example above is very heavily customised, with bespoke CSS, rewrites of the core HTML templates and extensive Javascript.
The great thing about Squiffy is that you can start small, and build up to bigger projects as your knowledge develops.
Wow, People are still adding stuff. Okay... so I've stepped back from my project for a few days (Stress! UGH!) and I've still been stuck here. I don't see what the deal is with it advancing my other passages, but I've implemented the original code (setTimeout) in several other areas, it just doesn't want to work properly in the beginning of the program. Weird....
Follow us on Facebook
Follow @TextAdv on Twitter