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
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.
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.
<<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.
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
<<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);
}
}
}
}
});
}());
var audio = document.createElement('audio');
audio.src = 'music/vivaldi.ogg';
audio.loop = true;
audio.play();
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.
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.
how do i add music to a image? so when they click the image then a sound effect will play