{"id":1036,"date":"2016-04-17T22:58:25","date_gmt":"2016-04-18T03:58:25","guid":{"rendered":"http:\/\/www.klcameron.com\/cdm\/?p=1036"},"modified":"2016-04-17T22:58:25","modified_gmt":"2016-04-18T03:58:25","slug":"how-to-add-sound-to-twine-game","status":"publish","type":"post","link":"https:\/\/www.klcameron.com\/cdm\/how-to-add-sound-to-twine-game\/","title":{"rendered":"How to Add Sound to Twine Game"},"content":{"rendered":"<p>This tutorial will teach you how to add sound to your Twine game.<\/p>\n<p>The easiest way to do this is to first cache the sound you want to use. This means that the sound effect will be loaded ahead of time and used when you want it to. This will prevent any delay in it playing and makes it easier to keep things organized as it allows you to name your sound clips.<\/p>\n<p>First,\u00a0to cache the sound you must add the following code:\u00a0<strong>&lt;&lt;cacheaudio &#8220;name of sound effect&#8221; &#8220;the URL of your sound effect&#8221;&gt;&gt;\u00a0<\/strong>to one of your passages. It makes most sense to add it to the StoryInit\u00a0passage so the effect will load asap, as seen below.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1055\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?resize=300%2C210\" alt=\"screen2\" width=\"300\" height=\"210\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?resize=300%2C210&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?resize=768%2C537&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?resize=1024%2C717&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?resize=624%2C437&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen2-2.png?w=1250 1250w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Next, put the URL of the sound effect you wish to use in the code where it says &#8220;the URL of your sound effect&#8221; and the name you want to give your sound effect where it says &#8220;name of sound effect&#8221;. Pretty self explanatory, but here&#8217;s a visual using &#8220;cats meowing&#8221; as the name and &#8220;http:\/\/www.ousob.com\/wavfiles\/meow.wav&#8221; as the URL for the sound effect:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1054\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?resize=300%2C210\" alt=\"screen1\" width=\"300\" height=\"210\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?resize=300%2C210&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?resize=768%2C537&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?resize=1024%2C717&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?resize=624%2C437&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen1-2.png?w=1250 1250w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Now you can use the sound effect wherever you please. To do so, choose a passage you want to have the sound effect occur at and put in this code:\u00a0&lt;&lt;audio &#8220;name of sound effect&#8221;&gt;&gt;. Change the &#8220;name of sound effect&#8221; to the name of the sound effect you just cached. Following the example, I posted\u00a0&lt;&lt;audio &#8220;cat-meowing&#8221;&gt;&gt; \u00a0into Untitled Passage 1.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-1056\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?resize=300%2C210\" alt=\"screen3\" width=\"300\" height=\"210\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?resize=300%2C210&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?resize=768%2C537&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?resize=1024%2C717&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?resize=624%2C437&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/screen3.png?w=1250 1250w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>And that&#8217;s it! Happy Twining!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will teach you how to add sound to your Twine game. The easiest way to do this is to first cache the sound you want to use. This means that the sound effect will be loaded ahead of time and used when you want it to. This will prevent any delay in it [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1036","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/comments?post=1036"}],"version-history":[{"count":1,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1036\/revisions"}],"predecessor-version":[{"id":1057,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1036\/revisions\/1057"}],"wp:attachment":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/media?parent=1036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/categories?post=1036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/tags?post=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}