Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

New to Twine: Need step-by-step help to add music & background image


Hello all!,

I am excited to be here & looking forward to making a good Twine game!..
I know there are posts here about adding music, I did search
However none were successful & more importantly, as I noob I do not understand the steps..

Anyone who can give me a quick step-by-step on adding music to my Twine?

Thanks!

Comments

  • I'm really too tired to explain step by step, but basically you have to install either Howler.js for any version of Twine (Dan Cox has written about this, look at his blog, or just Google search "sound in twine" and go to his link), Leon's sound macro's for Sugarcane or Harlowe, or updated Leon's sound macro's by TheMadExile for Sugarcube. In any Twine 2.0 story format, the javascript gets pasted into the story javascript area.

    Once you've done that, follow the instructions to insert the macro markup in passages. To give me the most control over when sound plays, I prefer just using the individual <<playsound>> macros instead of loopsound, and just rely on the fact that if a specific sound is playing, html5 won't play another instance of that sound until it's done, so can just pepper playsound macros throughout the game. Seems to give the most natural results, for me.

    That's assuming if you only have one music file. If you have two or more, you might want to look into javascript timers to help manage them and then it gets slightly more complicated. 

    For background images you can set it into the html background level and then set various things that overlay on top of that, like the body and sidebar, to transparent. If you google "twine css" you should be able to come across some examples by Leon that give you a starting point.

    And make sure the music's not loud and doesn't suck. That's the two biggest problems with music.
  • Hey thanks for the heads up! going to look into this
  • Ok well im using the Online Harlowe version, I have tried every sound script but cant get any to work... Main problem is I don't know where to enter the sound in the code... I have uploaded an MPG to an online music hosting site to use in my story.. However I cant figure out how in code to place the song.. Cant get any of the Youtube scripts working either, same reason.. Don't know where to put the actual page URL.. I tried for literally 4hrs today with no success :(
  • The sound needs to be in a directory that's in the same place as your story file.

    For example, if you are working offline, then you will have a folder on you computer called "twine 2.03" . If you include a folder in that called "music", then a sound script will look like:

    <<playsound "music/music.mp3">>

    I doubt you can get music to work if you're using the editor directly off twinery.org.
  • That makes since... I am currently playing online on my IE browser.. I tried downloading the newest Twine 2.0 version from the Twine site.. However it has not EXE file it only appears as a folder on my desktop..
  • Try referencing the sound file that you have uploaded to a server using a http URL, there may be a delay because the sound file needs to be downloaded to your machine before it can be played.

    <<playsound "http://yourdomain.com/music.mp3">>;

    Within the downloadable version of Twine 2 there should be a index.html file, open this with your web-browser.
  • How do I use the downloaded version of Twine 2.0... Like I said it ends up as a zipfile when I download it... then I open it, it is a folder that I cant actually click & use so to speak like an EXE file
  • I clicked on the tab you instructed, just opens up to a white blank page :(
  • I tried opening with Firefox instead of IE & it worked! lemme try the music thig now THNAKS!
  • Twine 2 (both the on-line and downloadable versions) is a web-application written using HTML and javascript, and the index.html file is the equivalently of an EXE file except it needs a browser to run.

    I believe you are having two issues:

    1. You need to extract the files from the ZIP file you downloaded.
    Windows allows you to see the content of zip files as a folder but there are limitations with this, namely the ability of one file to access other files within the ZIP like the application needs to. You need to extract all the files from the ZIP and save them within your own folder. You can use utilities like WinZip, WinRar and 7zip to help you extract the files.

    Once you have extracted the files from the ZIP file then run the index.html file within your web-browser

    2. The Twine 2 application does not play well with Internet Explorer, so you may need to use a different web-browser like Chrome or Firefox to run the index.html

    edit: I see you fixed the problem yourself
  • Yep, Firefox works alot better! but the sound issue still exists... I used this code in both the JavaScript 1st, didn't work, then used in the story block:

    <<playsound "music/vivaldi.mp3">>

    Yes I set up the music folder & have the music file within
    & I came up with this error:

    Twine 2 macros use a different syntax to Twine 1 macros.

  • I found this script online, but I have no idea where to add the info for playing my music from an online hosting site:

    (function () {
    "use strict";
    version.extensions['youtubeAudioMacros'] = {
    major: 2,
    minor: 1,
    revision: 0
    };
    var ytplayers = {},
    videocount = 0,
    ready = false,
    readyBuffer = {},
    s = document.createElement("script"),
    protocol = location.protocol == "file:" ? "http:" : location.protocol;
    s.src = protocol + "//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js";
    s.onreadystatechange = s.onload = function () {
    var re = new RegExp('(?:playbgm|loopbgm) ([^"&?/ ]{11})', "gi"),
        div = document.getElementById("storeArea").firstChild,
        done = [],
        d;
    function newplayer(hash) {
    var id = "YouTube-" + hash;
      insertElement(document.body, "div", id);
    swfobject.embedSWF(protocol + "//www.youtube.com/apiplayer?enablejsapi=1&playerapiid=" + id, id, "0", "0", "8",
    null, {}, {
    allowScriptAccess: "always",
    wmode: "transparent",
    modestbranding: "1",
    version: "3"
    }, {
    id: "ytplayer-" + hash,
    });
    };
    while(div) {
    do {
    d = re.exec(div.innerHTML);
    if(d && done.indexOf(d[1]) == -1) {
    newplayer(d[1]);
    done.push(d[1]);
    }
    } while (d);
    div = div.nextSibling;
    };
    };
    document.head.appendChild(s);
    window.onYTAudioError = function (e) {
    alert("There is a problem with the YouTube background music (" + e + ")" +
    (e == 2 ? ": The video ID (" + hash + ") is probably invalid." :
    e == 100 ? ": The requested video (" + hash + ") was not found." :
    e == 101 || e == 150 ? ": Embedding has been disabled for the video (" + hash + ")." : ""));
    };
    window.onYouTubePlayerReady = function (e) {
    var hash = e.slice(8),
    yt = (ytplayers[hash] = document.getElementById("ytplayer-" + hash));
    ready = true;
    yt.style.visibility="hidden";
    yt.addEventListener("onError", "onYTAudioError");
    yt.mute();
    yt.loadVideoById(hash, 0);
    yt.LOAD = true;
    videocount += 1;
    window["onYTAudioStateChange_" + videocount] = function (newState) {
    if(newState == 1 && yt.LOAD) {
    yt.pauseVideo();
    yt.unMute();
    yt.LOAD = false;
    while(readyBuffer[hash].length > 0) {
    readyBuffer[hash].shift()(yt);
    }
    }
    if(newState == 0 && yt.LOOP) {
    yt.playVideo();
    }
    };
    yt.addEventListener("onStateChange", "onYTAudioStateChange_" + videocount);
    };
    ["playbgm","loopbgm","stopbgm","pausebgm","unloopbgm"].forEach(function(e) {
    macros[e] = {
    handler: function (e, t, n, r) {
    var yt, fn;
    if(n[0]) {
    yt = ytplayers[n[0]];
    switch(t) {
      case "playbgm":
      case "loopbgm":
    fn = function(yt) {
    yt.LOOP = (t == "loopbgm");
    if (n[1]) yt.seekTo(n[1]);
    yt.playVideo();
    };
    break;
      case "stopbgm":
    fn = function(yt) { yt.stopVideo(); };
    break;
      case "pausebgm":
    fn = function(yt) { yt.stopVideo(); };
    break;
      case "unloopbgm":
    fn = function(yt) { yt.LOOP = false; };
    break;
    }
    if (fn) {
    if (!yt || yt.LOAD) {
    readyBuffer[n[0]] = readyBuffer[n[0]] || [];
    readyBuffer[n[0]].push(fn);
    } else fn(yt);
    }
    }
    }
    }
    });
    }());
  • Got it!! with this simple code:

    var audio = document.createElement('audio');
    audio.src = 'music/vivaldi.ogg';
    audio.loop = true;
    audio.play();
  • I don't know what works in Harlow honestly. It has a custom macro design that makes many of the sound solutions not possible out of the box. But you might want to give Howler a go:

    http://videlais.com/2014/01/18/using-html5-audio-in-twine/


    Using the simple direct code you've written above will suffer from browser compatibility issues so is not recommended, or you may need to specify both ogg and mp3 files in the source.
  • As explained here and here, and as you have found out yourself there are issues with using the old Twine 1 javascript scripts to play sound when using the Harlowe story format.

    This is because the scripts work by adding new macros to your story, which you then use to play the sounds but Harlowe currently does not allow Authors to add new macros, and even if it did the scripts would still need to be changed to support the way Harlowe handles macros. (which is different to Twine 1 story formats)

    So one of the answers to this issue is to use an audio element, either via javascript like your example does or via the <audio> HTML tag which you add to one of your passages.
  • im using twine 1.4.2 sugarcane

    how do i add music to a image? so when they click the image then a sound effect will play
Sign In or Register to comment.