Adding Background music to stories

[zoe quinn]

I'm wondering if anyone has any advice on to add background music to a story. Ideally there should be a mute button in the sidebar, and being able to throw it in .ogg format would be perfect. I know I can't just throw it in a passage because it'll just change any time you go to the next one, so I was hoping there was a better way to do this.

Thanks so much!

[Delyth Angharad]

There's a post on it here -  https://groups.google.com/forum/?fromgroups=#!searchin/tweecode/music/tweecode/KkQgqv6c9AY/p3xiMU_DRwcJ 

When I added the background track to http://welshpixie.com/bakerstreet I did it by pasting this into the output HTML file:

<div id="player">

<object type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="100" height="20" autoplay="1">

    <param name="movie" value="player_mp3_mini.swf" />

    <param name="autoplay" value="1" />

    <param name="bgcolor" value="#000000" />

    <param name="FlashVars" value="mp3=MindTheGap.mp3&amp;autoplay=1" />

</object>

</div>

And then of course providing the swf file and the track in the same location as wherever you're hosting the story. The player has a pause button and can be positioned wherever you want on the page. Not sure it'll play .ogg though.

[Melonshead]

Hello Mrs. Pixie, All,

I am working on sound next. Let me see if I get this right. I am using Sugarcane. If I figure out how to get the MP3 file attached to the left-side of the line... StoryMenu, maybe, then the mp3 file will play for the duration of the story, regardless of passage clicks, is this right? If I put the mp3 code within the particular passage the sound will only play on that passage, right?

The first sound I want to add is to the left of the line. I have attached a copy of the mp3 here and says:
"Hey You!!
Yes You!!
You are wasting energy here. Come on back to the machine and Make a choice already!"

My question for this sound file is: Can you make the sound come on after, say 3 minutes of inactivity? Where does someone find the "autoplay codes." Yours in the example is set at 1, and I assume this means the sound comes on when the person gets there. Is there a looping feature in this "autoplay" thingy?

See, till now I have been making historical movies and uploading them to, first Google Video, then Youtube, and I could turn those historical movies into Twine stories and add in other pictures (like turn-by-turn directions to the Streetcar museum, cause you can't get there even with a map AND GPS), because I am not limited here by the 15 (free) minutes of Youtube. I also won't have to deal with the HD formatting of the pictures crap, and FFFFlash, and not being able to log-in to my youtube account for some reason using Firefox on my main machine, and many other annoying things. See, my machine is so old, Apple, Firefox, and Google have abandoned it (and every other G5 and below), and I can't use Flash or Plug-ins, and this Twine format will negate all the controversy. This Twine thing is like mental floss for me...

Right now, I make text scripts, then export them, using one of my many computer voices to AIFF files, then import the AIFF files to GarageBand, then add in the voice overs, that my friends call in to my GoogleVoice phone, then figure out how long the soundtrack is, then apply the soundtrack to iMovie, count the pictures and divide by the time of the soundtrack, then add all the pictures to iMovie, then add transitions and credits, and export the movie to mp4. Then I gotta login to youtube from my roommates computer and upload the MP4 file... blah, blah, blah. The export to mp3 is also how I take OCR'd textbooks for those with low vision and turn them into audiobooks.

Here are some Youtube video examples I have made:
B9 Visits the Baltimore Streetcar Museum
Elmer E. Crouse, Baltimore Streetcar Conductor
Carvey Davis Rides Again

Here is a downloadable audio file of Sir Thomas Malory's, Le Morte DArthur:
ENGL316 Nobel Tale of the Sangrail P01

Most of these videos are made for some history class, and one was a "so called group project," where the other members added the title swirl-in, and I can't stand it. The other thing is that when GoogleVideo died to be replaced by Youtube, Google converted the files to Youtube, but corrupted some in the process, and I have to redo them anyway... Here is a corrupted movie on my rendition of Devil in the White City, by Erik Larson (for a book review in-class presentation), but the printed book left out all the awesome pictures...
Holmes/Mudgett Devil in the White City

Most of the time, I can't watch the videos I make because somewhere in the minds of the powers that be, someone thinks it is OK for a Browser to OBSOLETE an entire computer... I'm not gonna take it any more, and with Twine, I don't have to. Special thanks to GoogleYoutube for adding an opt-in HTML5 viewer, here: YouTube HTML5 Video Player.

Thanks for letting me vent... Anything on sound you are willing to share is appreciated.
Melanie

[Delyth Angharad]

Hi Melanie,

I'm really not the best person to be asking about this! The way I got sound into my one story was to embed a player into the webpage, outside of the Twine engine. I have very very limited knowledge of how Twine actually works and no idea at all of what it's capable of doing internally with sound. 

Hopefully someone else in the group can give you a better answer!

- Del

--
 
 

--
Lick the Lid of Life!

[Stormrose]

You might be able to get embedding directly into the header.html by putting the html code directly into a Twine passage. This works by wrapping the raw html code in <html> ... </html>. e.g.

::Start
The next line is html code
<html><img src='test.jpg'></html>

As to what code to use for embedding sound...not my bag sorry. Some of my DJ friends use SoundCloud for the player and the embedding code.

--Et

[Josh Jones]

I know this is an old post but I just found it while searching around for an answer to the same question. Thank you to Delyth for the helpful answer! I ended up using a slightly different solution and thought it might be useful for future people who come here searching like I did.

<li><audio controls style="width:130px;height:60px;">

  <source src="YourAudio.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio></li>

This is the html5 audio tag which you can find lots of information online about. Note that the type attribute in the source tag may need to be different depending on your exact audio file type (e.g. ogg).

  -vazor

[cgran...@go.ccad.edu]

Hi Vazor, thank you so much for posting this. I was wondering how exactly I can get this to work? I've tried a ton of options but none are quite working for me. 

Thanks!!

[vazor]

Put the code in the HTML file twine generates after you build the story but before you upload it to your server. I put it in the list near the twine watermark text, but you can put it wherever you want (you may need to tweak the code a bit, remove the li tags, etc.). Of course you need to replace the mp3 file name with your file's name and that file must also be uploaded to your server alongside the html file (or with a relative or absolute path as needed). Searching online for things like "html tutorial" and "html audio tag tutorial" might help. 

--
You received this message because you are subscribed to a topic in the Google Groups "Tweecode / Twine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tweecode/TztkV7jHRK8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tweecode+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.