Re: A macro to use hidden Youtube Videos as background music

[Evil Roda]

This seems extremely useful. However, is there a way to replicate this effect with MP3s hosted on a server?

[tallge...@gmail.com]

Well, the easiest hack would be to upload your MP3s to youtube. :D

Otherwise, yes it would be technically possible, but you'd need to recode the macro to use something like the jplayer library instead of the ytplayer one.  Unfortunately (for you), I don't have any interest in doing that myself.  I could provide pointers if you were interested in doing that yourself, however.  I don't think it would be that difficult if you have any experience with javascript, once you see how the code works.

[tallge...@gmail.com]

I just checked, and the example link I posted above still works fine.  The opening page doesn't have any music, but click through a few pages and it will load. Make sure your computer isn't muted!  Nothing that a macro can do if your speakers are off, either!

On Sunday, February 10, 2013 11:09:53 PM UTC-8, TiltTheWindmill wrote:

Hmm, this doesn't seem to work any more. Volume slider is still displayed though.

[Leon Arnott]

Hello. I decided on a whim last night to write some improvements into this script. You can see my altered version here: http://www.glorioustrainwrecks.com/node/5475 

[LovelyCee]

You mind posting your story file so we can see how you put the music to make it work? because i just tried and i can't get mine to work

[Alicia LaRocque]

I cant seem to get my music to work. I put the code for the script in a new passage and tagged it script. I then put the macro in my pages but i keep getting errors. First i get unexpected token << and then it says type error:cannot read property 'firstchild' etc. Can someone help me im new to twine and don't have a clue how to fix this

On Monday, January 14, 2013 4:43:05 PM UTC-8, tallge...@gmail.com wrote:

Hi guys,

Meant to post this here a couple months ago, but just remembered now that I never did. A forum I post at had a (very bizarre) Twine contest, and, for part of that, I developed some codeto let you easily use background music in your stories.  It works by embedding a hidden youtube player when the page loads, and then lets you control that player with macros.  My code enables three of them:

1. <<playbgm NPX1lqLxKq0 0>> 
   
   This first one, "playbgm", will play this video: http://www.youtube.com/watch?v=NPX1lqLxKq0 starting at time 0. Obviously, change the video tag and start time to something else, if you want something else.  This macro forces the song to loop forever.
   
   
2. <<singlebgm NPX1lqLxKq0 0>>
   
   This one, "singlebgm," is just like playbgm except that once it finishes, it won't loop.
   
   
3. <<stopbgm>>
   
   This last one kills whatever music is playing.
   
   

You can probably at most one of these per passage.  You don't need to stop a song to play a different one; you can pretty much always just use playbgm unless you want to pause all music for dramatic effect. The macro code also adds a volume slider at the bottom of the left control panel, underneath the story title and author info, at least with the default story template.

To use this macro is very easy. First create a new passage, called, "Background Music", or whatever.  The name of it doesn't matter.  What does matter is:

1.) In the box where it says "Tags", put "script" (no quotes)

2.) Copy and paste this text into the passage body:

var b=document.getElementsByTagName("body")[0];var s=document.createElement("script");s.type="text/javascript";var loadfunc=function(){var e=document.getElementsByTagName("body")[0];var t=document.createElement("div");t.id="ytapiplayer";e.appendChild(t);var n={allowScriptAccess:"always",wmode:"transparent",modestbranding:"1",version:"3",loop:"1"};var r={id:"myytplayer",loop:"1"};swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer","ytapiplayer","1","1","8",null,{loop:"1"},n,r)};s.onreadystatechange=loadfunc;s.onload=loadfunc;s.src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js";b.appendChild(s);var jQUIcss=document.createElement("link");jQUIcss.setAttribute("rel","stylesheet")

jQUIcss.setAttribute("type","text/css")

jQUIcss.setAttribute("href","http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css");b.appendChild(jQUIcss);var jQL=document.createElement("script");jQL.src="http://code.jquery.com/jquery-1.8.3.js";jQL.type="text/javascript";var jloadfunc=function(){jQuery.noConflict();var e=document.getElementsByTagName("body")[0];var jQUIL=document.createElement("script");jQUIL.src="http://code.jquery.com/ui/1.9.2/jquery-ui.js";jQUIL.type="text/javascript";juiloadfunc=function(){var slidercontainer=jQuery('<li id="slidecontainer"></li>');var imager=jQuery('<img src="http://static.ak.crunchyroll.com/i/boxee_app/video_volume_icon.png" />');var slider=jQuery('<div id="slider"></div>');slidercontainer.append(slider);slidercontainer.append(imager);slidercontainer.insertAfter(jQuery('#share'));slider.width('60px');slider.css('float','right');slider.css('margin-top','3px');slider.css('margin-left','5px');imager.height('20px');imager.css('float','right');imager.css('opacity','0.6');imager.css('filter','alpha(opacity=60);');slider.css('background-image','none');slider.css('background-color','#666');slider.slider({range:"min",value:100,min:0,max:100,slide:function(event,ui){window.setvolume(ui.value);}});slider.find('div').css('background-image','none');slider.find('div').css('background-color','#999');slider.find('a').css('background-image','none');slider.find('a').css('background-color','#CCC');slidercontainer.css('height','1px');}

jQUIL.onreadystatechange=juiloadfunc;jQUIL.onload=juiloadfunc;e.appendChild(jQUIL);}

jQL.onreadystatechange=jloadfunc;jQL.onload=jloadfunc;b.appendChild(jQL);window.updateHTML=function(e,t){document.getElementById(e).innerHTML=t};window.setytplayerState=function(e){window.updateHTML("playerstate",e)};window.onYouTubePlayerReady=function(){window.ytplayer=document.getElementById("myytplayer");window.ytplayer.addEventListener("onStateChange","onytplayerStateChange");window.ytplayer.addEventListener("onStateChange","onytplayerStateChange");window.ytplayer.addEventListener("onError","onPlayerError")};window.onytplayerStateChange=function(e){window.setytplayerState(e)};window.onPlayerError=function(e){alert("An error occured: "+e)};window.loadNewVideo=function(e,t){if(window.ytplayer){window.ytplayer.setLoop(true);window.ytplayer.loadVideoById(e,parseInt(t))}play()};window.play=function(){if(window.ytplayer){window.ytplayer.playVideo()}};window.setvolume=function(v){if(window.ytplayer){window.ytplayer.setVolume(v)}};window.stop=function(){if(window.ytplayer){window.ytplayer.stopVideo()}};macros["playbgm"]={handler:function(e,t,n,r){window.LOOP=1;window.loadNewVideo(n[0],n[1])}}

macros["stopbgm"]={handler:function(e,t,n,r){window.stop()}}

macros["singlebgm"]={handler:function(e,t,n,r){window.LOOP=0;window.loadNewVideo(n[0],n[1])}}

window.onytplayerStateChange=function(newState){if(newState==0){if(window.LOOP==1){window.ytplayer.playVideo();}}};

You can see this in action here: http://media.rhizzone.net/nene/neneadventure.html