<<set $currentLoops = []>>\s\n<<set $background_music = "accordion.mp3">>\s\n<<set $footsteps = "footsteps.mp3">>\s\n[[<- loopsound, fadesound etc.|loopsound]]<div align="right">[[jumpscare]]</div>\s\n\n<h2>quieter, louder</h2>\s\n\n<<display "common controls">>\n\nThese macros adjust the overall volume of the story. The relative proportions of individual audio clips will be preserved.\n\nThese macros do NOT change the system volume. If the reader has their system volume down to two bars, these controls adjust the volume within that two-bar range.\n\nThis means the reader can have rainymoods.com playing in one tab at a certain volume, and then your story playing in another tab at a different volume.\n\n<h3>{{{<<quieter>>}}}</h3>\s\nReduces the story's overall volume by 1/10th of the reader's current system volume.\n\n<h3>{{{<<louder>>}}}</h3>\s\nIncreases the story's overally volume by 1/10th of the reader's current system volume.\n\nTogether, these options create a 10-unit range for the reader to adjust your story's volume (within the reader's system volume.)\n\n[[<- loopsound, fadesound etc.|loopsound]]<div align="right">[[jumpscare]]</div>

sub-Q Demo\nsqTwineSound \nv. 0.8.0

<<set $currentLoops = []>>\s\n<<set $background_music = "accordion.mp3">>\s\n<<set $footsteps = "footsteps.mp3">>\s\n[[<- pausesound, stopsound|pausesound]]<div align="right">[[quieter, louder ->|quieter]]</div>\s\n\n<h2>loopsound, unloopsound, fadeinsound, fadeinsounds, fadeoutsound, fadeoutsounds, playsounds, pauseallsound, stopallsound</h2>\s\n\n<<display "single loop controls">>\n<<display "multiple loop controls">>\n\nNote that you must keep track of what's playing--what you want to stop and start--on your own.\n\n\n<h3>{{{<<loopsound "accordion.mp3">>}}}</h3>\s\nThe parameters (in this order, please):\n\nParameters:\n\n<ul><li>REQUIRED: clipName (e.g. "backgroundMusic.mp3" or $backgroundMusic)</li><li>OPTIONAL: decimal proportion of volume (0.0 being minimum/mute, and 1.0 being maximum/default)</li><li>OPTIONAL: number of milliseconds to overlap/crossfade the loop (0 ms by default, must be >= 10 ms if declared)</li></ul>\s\n\nStarts playing the given clip on repeat. Note that browsers will not necessarily play looping audio seamlessly.\n\n<h3>{{{<<unloopsound $footsteps>>}}}</h3>\s\nLet the given sound stop when it finishes its current loop (so the sound no longer repeats.)\n\n<h3>{{{<<fadeinsound "footsteps.mp3">>}}}</h3>\s\nIdentical to loopsound, but performs a fade in over the given overlap period.\n\n<h3>{{{<<fadeinsounds ["accordion.mp3", "footsteps.mp3"]>>}}}</h3>\s\nOR IDEALLY\n<h3>{{{<<set $spookySounds = [$moodMusic, $footSteps]>>}}}\n{{{<<fadeinsounds $spookySounds>>}}}</h3>\s\n\nFade in multiple sounds at once. Previous clip volume and overlap is remembered.\n\n<h3>{{{<<fadeoutsound $birdsong>>}}}</h3>\s\nIdentical to stopsound, but fades out the sound over 2 seconds.\n\n<h3>{{{<<fadeoutsounds ["moodMusic.mp3", "footsteps.mp3"]>>}}}</h3>\s\n&nbsp;&nbsp;&nbsp;&nbsp;OR IDEALLY\n<h3>{{{<<set $spookySounds = [$moodMusic, $footSteps]>>}}}\n{{{<<fadeoutsounds $spookySounds>>}}}</h3>\s\n\nFade out multiple sounds at once.\n\n<h3>{{{<<playsounds ["moodMusic.mp3", "footsteps.mp3"]>>}}}</h3>\s\n&nbsp;&nbsp;&nbsp;&nbsp;OR IDEALLY\n<h3>{{{<<set $spookySounds = [$moodMusic, $footSteps]>>}}}\n{{{<<playsounds $spookySounds>>}}}</h3>\s\n\nPlay multiple sounds at once (picking up where we left off)\n\nParameters:\n\n<ul><li>REQUIRED: clipName (e.g. "backgroundMusic.mp3" or $backgroundMusic)</li><li>OPTIONAL: decimal proportion of volume (0.0 being minimum/mute, and 1.0 being maximum/default)</li><li>OPTIONAL: number of milliseconds to overlap/crossfade the loop (0 ms by default, must be >= 10 ms if declared)</li><li>OPTIONAL: true if you'd like to loop, false if no</li></ul>\s\n\n<h3>{{{<<pauseallsound>>}}}</h3>\nPauses all sounds at their current location. \n\n<h3>{{{<<stopallsound>>}}}</h3>\nStops all sounds immediately. If any stopped sound is played again, it will play from the beginning.\n\n[[<- pausesound, stopsound|pausesound]]<div align="right">[[quieter, louder ->|quieter]]</div>\s

<<set $sound = "Yes">>\s\n<<set $currentLoops = []>>\s\n<<set $background_music = "accordion.mp3">>\s\n<<set $footsteps = "footsteps.mp3">>\s\n<h2>Welcome to the sub-Q Sound Macro Suite Demo</h2>\s\n<h3>Macros</h3>\s\n<ul><li>[[playsound]], [[updatevolume|playsound]]</li>\n<li>[[pausesound]], [[pauseallsound|pausesound]]</li>\n<li>[[loopsound]], [[unloopsound|loopsound]], [[fadeinsound|loopsound]], [[fadeinsounds|loopsound]], [[fadeoutsound|loopsound]], [[fadeoutsounds|loopsound]], [[playsounds|loopsound]], [[stopsound|loopsound]], [[stopallsound|loopsound]]</li>\n<li>[[quieter]], [[louder|quieter]]</li>\n<li>[[jumpscare]]</li></ul>\n<h3>Overview</h3>\s\nThis suite builds on Leon Arnott's incredibly rad HTML5 sound macros by adding\n<ul><li>story-wide volume control</li>\n<li>individual volume control</li>\n<li>seamless loops (with crossfade)</li>\n<li>fade duration control</li>\n<li>the ability to start multiple audio tracks at once</li></ul>\s\n\nA macro is a piece of code you can insert in a Twine passage like so:\n{{{<<playsound $thisSound>>}}}\n\nThis demo shows what the sub-Q suite of sound macros can be used to do.\n\n<h3>Quick Reference</h3>\s\n<<display "questions">>\s\n\n<h3>Before We Start</h3>\s\nIn this demo, I use "clip" and "track" to mean the playback of a specific audio file.\n\nThese macros recognize the following file formats, but be advised not every format works in every browser: ogg, mp3, wav, and webm.\n\nFor optimal performance of these macros, the <a href="http://www.motoslave.net/sugarcube/" target="_blank">latest Sugarcube story format is recommended</a>. This demo uses Sugarcube v1.0.3.\n\nIn the Sugarcube story format, you can pass your audio clip name[s] as a string (e.g. "meow.mp3") or a variable (e.g. $meow, assuming you have defined {{{<<set $meow = "meow.mp3">>}}}.) But in Sugarcane and Jonah, the audio clip names must be passed as strings (e.g. "meow.mp3"). You will see both these strings and variables used in the examples.\n\nNote that, even in Sugarcube, string variables are recommended because they help you do things like this:\n\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<set $heartbeat = "heartbeat.mp3">>}}}\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<set $spookyMusic = "spookyMusic.mp3">>}}}\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<set $spookyClips = [$heartbeat, $spookyMusic]>>}}}\n&nbsp;&nbsp;&nbsp;&nbsp;...\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<fadeinsounds $spookyClips>>}}}\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<timedcontinue 2s>>}}}\n&nbsp;&nbsp;&nbsp;&nbsp;...But then things weren't so scary...\n&nbsp;&nbsp;&nbsp;&nbsp;{{{<<fadeoutsounds $spookyClips>>}}}\n\n(Speaking of, if you'd like the "timedcontinue" macro, it's available in the <a href="http://www.glorioustrainwrecks.com/node/5462" target="_blank">Glorious Trainwrecks Replace Macro Set</a>!)\n\nHuge thanks to Leon Arnott for founding these sound macros.\n\nFeel free to save this demo locally and import the HTML into Twine to inspect it. Remember that the JavaScript in this demo and on github is "beautiful," so it's easy to read. Before you paste it into a Twine project, you may want to <a href="http://jscompress.com/" target="_blank">minimize it</a> for efficiency.\n\nReady? Let's go!\n\n-> [[Walk through|playsound]] all macros\n

<<set $currentLoops = []>>\s\n<<set $loud_meow = "cat_scream.mp3">>\s\n[[<- quieter & louder|quieter]]<div align="right">[[Back to intro|Start]]</div>\s\n\n<h2>jumpscare</h2>\s\n{{{<<jumpscare>>}}} plays a clip at the current system volume, regardless of whether the reader turned the story volume down.\n\nThis macro does NOT change the system volume. If the reader has their system volume down to two bars, the jumpscare sound will play at the full two bars' worth of volume.\n\nEven so, PLEASE WARN YOUR READERS BEFORE USING JUMPSCARE. Providing a warning about possible jump scares at the beginning of your story will\n\n<ul>\s\n<li>Increase suspense</li>\n<li>Increase/maintain reader goodwill toward Twine in general</li>\n<li>Prevent lawsuits</li>\n<li>Prevent me from feeling guilty for providing this macro</li>\n</ul>\s\n\nPlease use jumpscare responsibly.\n\nJump Scare: <<button "Reeeowwwr!">><<jumpscare $loud_meow>><</button>>\n\nThat's everything!\n\n<<display "questions">>\n\nEnjoy, and happy Twining.\n\n\n\n[[<- quieter & louder|quieter]]<div align="right">[[Back to intro|Start]]</div>\n

<h4>More info about these macros</h4>\s\n<ul><li><a href="https://github.com/AteYourLembas/sqTwineSound" target="_blank">Get the source and more on github</a></li><li><a href="http://sub-q.com/questions" target="_blank">FAQ/Q&A</a> (on the sub-Q site)</li>\n<li><a href="http://sub-q.com/forums/topic/what-would-you-like-to-see-sqtwinesound-do-that-its-not-doing/" target="_blank">Feature Requests</a> (on the sub-Q site)</li>\n<li>If you want a better place to get all your Twine questions answered, help grow the <a href="http://area51.stackexchange.com/proposals/66696/interactive-fiction?referrer=iS6Wrea_mOk1" target="_blank">Interactive Fiction Stack Exchange</a>! Go there now go go go!</li></ul>

<<set $soft_meow = "soft_meow.mp3">>\s\n<<set $background_music = "accordion.mp3">>\s\n[[<- Back to start|Start]]<div align="right">[[pausesound, stopsound ->|pausesound]]</div>\s\n\n<h2>playsound, updatevolume</h2>\s\n\nPlay Cat Meow at full available volume: <<button "|>">><<stopsound $soft_meow>><<playsound $soft_meow 1.0>><</button>>\nPlay Cat Meow at 1/2 volume: <<button "|>">><<stopsound $soft_meow>><<playsound $soft_meow 0.5>><</button>>\nPlay Cat Meow at 1/4 volume, with fade in, on loop: <<button "|>">><<stopsound $soft_meow>><<fadeinsound $soft_meow 0.25>><</button>>\nStop All Sound: <<button "[]">><<stopallsound>><</button>>\n\n<h3>{{{<<playsound "introMusic.mp3" 0.5 200 true>>}}}</h3>\s\n{{{<<playsound>>}}} lets you do a little bit of sound mixing.\n\n Parameters:\n\n<ul><li>REQUIRED: clipName (e.g. "backgroundMusic.mp3" or $backgroundMusic)</li><li>OPTIONAL: decimal proportion of volume (0.0 being minimum/mute, and 1.0 being maximum/default)</li><li>OPTIONAL: number of milliseconds to overlap/crossfade the loop (0 ms by default, must be >= 10 ms if declared)</li><li>OPTIONAL: true if you'd like to loop, false if no</li></ul>\s\n\nSo this plays a clip once, no fade, at full global volume:\n\n {{{<<playsound $walla">>}}}\n\nThis fades in a quiet background $walla that will loop and crossfade with 2000 ms (2 seconds) of overlap:\n \n {{{<<playsound $walla 0.2 2000 true>>}}}\n\n This plays $meow once, no fade, at loudest available volume:\n \n {{{<<playsound $meow 1.0>>}}}\n\nThe last used volume will be remembered when you stop and restart the clip.\n\nNOTE: It's best practice to stop a sound before attempting to play it again. Any attempt to play a sound already playing is ignored.\s\n\n<h3>{{{<<updatevolume $backgroundMusic 0.5>>}}}</h3>\s\nGiven a decimal between 0.0 and 1.0, update the clip's volume proportion and the clip's actual volume.\n\nParameters:\n\n<ul><li>REQUIRED: clipName (e.g. "backgroundMusic.mp3" or $backgroundMusic)</li><li>REQUIRED: decimal proportion of volume (0.0 being minimum/mute, and 1.0 being maximum/default)</li></ul>\s\n\n\nLoop Music at 0.50 volume: <<button "|>">><<fadeinsound $background_music 0.50>><</button>>\nChange volume to 0.10 volume: <<button "Volume 0.10">><<updatevolume $background_music 0.10>><</button>>\nChange volume to 0.90 volume: <<button "Volume 0.90">><<updatevolume $background_music 0.90>><</button>>\nStop Music: <<button "[]">><<stopsound $background_music>><</button>>\n\n[[<- Back to start|Start]]<div align="right">[[pausesound, stopsound ->|pausesound]]</div>\s

/* Your story will use the CSS in this passage to style the page.\nGive this passage more tags, and it will only affect passages with those tags.\nExample selectors: */\n\nbody {\n\t/* This affects the entire page */\n\tcolor: #FFF;\n\tbackground-color: #587e7e;\n\t\n}\n\n#ui-bar {\n width: 250px;\n\n}\n\n\n#passages {\n margin-left: 125px;\n width: 75%;\n min-height: 100%;\n padding-bottom: 0;\n margin-bottom: 0;\n border: 0;\n}\n\n.passage {\n\t/* This only affects passages */\n\tfont-size: medium;\n\t\n}\n.passage a {\n\t/* This affects passage links */\n\tcolor: #F2F5A9;\n\t\n}\n.passage a:hover {\n\t/* This affects links while the cursor is over them */\n\t\n\tcolor: #FFBF00;\n\n}