Howdy, Stranger!

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

Including audio?

Hi, I'm making my first twine game and I seem to have picked up the basics just fine. My entire game works, technically. But I was really hoping to add ambient music in the background. I've researched it, but everything I've read indicates that no one can really agree on the best way to do it.

At one point I successfully embedded an invisible soundcloud player into the StartMenu, but unfortunately it would restart the music every time the play clicked a link. If someone has a fix for that then awesome.

But others have talked about using not only bgm, but sound effects you could cue using macros. But for the life of me I can't get any of these to work.

I'm pretty new to coding, so any help would be appreciated. Thanks!


  • Hey, I'd be glad to help. The thing is, if you don't specify what Story Header your using, it's really hard to answer a lot of questions. You sound really new, so the best advice I can give you is to use SugarCube!

    Seriously, I'd hate to see you work on a really great story and then realize that things you want to do can only be done on SugarCube, and switching would be very difficult. If your not, you can get it here

    And because L's existing HTML 5 Audio Macro  isn't exactly compatible with SugarCube, I'll give you this code to post in a Script passage -
    (function () {
    "use strict";
    version.extensions['soundMacros'] = {
    major: 1,
    minor: 1,
    revision: 2
    var p = macros['playsound'] = {
    soundtracks: {},
    handler: function (a, b, c, d) {
    var loop = function (m) {
    if (m.loop == undefined) {
    m.loopfn = function () {;
    m.addEventListener('ended', m.loopfn, 0);
    } else m.loop = true;;
    var s = eval(d.fullArgs());
    if (s) {
    s = s.toString();
    var m = this.soundtracks[s.slice(0, s.lastIndexOf("."))];
    if (m) {
    if (b == "playsound") {;
    } else if (b == "loopsound") {
    } else if (b == "pausesound") {
    } else if (b == "unloopsound") {
    if (m.loop != undefined) {
    m.loop = false;
    } else if (m.loopfn) {
    m.removeEventListener('ended', m.loopfn);
    delete m.loopfn;
    } else if (b == "stopsound") {
    m.currentTime = 0;
    } else if (b == "fadeoutsound" || b == "fadeinsound") {
    if (m.interval) clearInterval(m.interval);
    if (b == "fadeinsound") {
    if (m.currentTime>0) return;
    m.volume = 0;
    } else {
    if (!m.currentTime) return;;
    var v = m.volume;
    m.interval = setInterval(function () {
    v = Math.min(1, Math.max(0, v + 0.005 * (b == "fadeinsound" ? 1 : -1)));
    m.volume = Math.easeInOut(v);
    if (v == 0 || v == 1) clearInterval(m.interval);
    if (v == 0) {
    m.currentTime = 0;
    m.volume = 1;
    }, 10);
    macros['fadeinsound'] = p;
    macros['fadeoutsound'] = p;
    macros['unloopsound'] = p;
    macros['loopsound'] = p;
    macros['pausesound'] = p;
    macros['stopsound'] = p;
    macros['stopallsound'] = {
    handler: function () {
    var s = macros.playsound.soundtracks;
    for (var j in s) {
    if (s.hasOwnProperty(j)) {
    if (s[j].currentTime) {
    s[j].currentTime = 0;
    var div = document.getElementById("store-area").firstChild;
    var fe = ["ogg", "mp3", "wav", "webm"];
    while (div) {
    var b = String.fromCharCode(92);
    var q = '"';
    var re = "['" + q + "]([^" + q + "']*?)" + b + ".(ogg|mp3|wav|webm)['" + q + "]";
    k(new RegExp(re, "gi"));
    div = div.nextSibling;

    function k(c, e) {
    do {
    var d = c.exec(div.innerHTML);
    if (d) {
    var a = new Audio();
    if (a.canPlayType) {
    for (var i = -1; i < fe.length; i += 1) {
    if (i >= 0) d[2] = fe[i];
    if (a.canPlayType("audio/" + d[2])) break;
    if (i < fe.length) {
    a.setAttribute("src", d[1] + "." + d[2]);
    a.interval = null;
    macros.playsound.soundtracks[d[1]] = a;
    } else console.log("Browser can't play '" + d[1] + "'");
    } while (d);
    I'm a bit busy at the moment, but if you still need help I'll check this post again soon.
    By the way, I myself posted a question a while back that may be of use to you,1817.msg4746.html#msg4746
    Good luck!
  • Oh yeah, I am using Sugarcube!

    Thank you for replying, I've been trying to get this working for a few days now. Both L's macro and the Youtube ID one. Neither are working, I don't suppose the fact that I'm still on XP (i know, i know) has anything to do with it? It's becoming more a consistent issue when using newer programs.

    For this game I may just work around it. I've put a link in the StartMenu that opens up and auto plays the soundtrack from SoundCloud. That way the player can decide to play with or without the music. But thank you for your help!

    Now I'm off to figure out how to post it online without using because I hate them immensely. <3
  • Leon's sound macro set:
    Leon's sound macro set is not compatible with SugarCube by default (that's probably why it wasn't working for you).  To make it compatible with SugarCube, you simply need to find and change &quot;storeArea&quot; to &quot;store-area&quot;.  The specific line you need to modify is:

    var div = document.getElementById("storeArea").firstChild;
    I believe the version posted above by EcnelOvelam already includes the modification.

    Leon's YouTube BGM macro set:
    Leon's YouTube BGM  macro set has some issues.  You can find an updated version, which should also work for all story formats, here in this post of the Sugarcube: Macros and music! thread.  Additionally, as noted in that post (and someplace in Leon's docs as well, I'm sure), YouTube's flash player is security restricted so that it cannot execute locally, so you'll have to host the compiled Twine game/story file someplace for it to work (if you were testing locally, then that's one of the reasons it wasn't working).

    For local testing, if you can't install your own local (fully leaded) web server, a mini-server like Mongoose (comes in a free version) should let you test your files as though they were hosted someplace.
  • TheMadExile wrote:

    For local testing, if you can't install your own local (fully leaded) web server, a mini-server like Mongoose (comes in a free version) should let you test your files as though they were hosted someplace.

    If you have Python installed then you can use the SimpleHTTPServer that comes with it. Open a command shell, change the directory to the location of your game HTML file and enter the following:
    python -m SimpleHTTPServer
    Then use the following URL to access your HTML file, remember to change the your_game.html part to the actual name of your HTML file.
Sign In or Register to comment.