Twine Music and Sound Effects from YouTube

October 26, 2015

ezgif.com-gif-maker

SOUND EFFECTS

We will start by talking about an easy way to add Sound Effects which will stop playing whenever the player moves to a new passage. After you find your YouTube video, click Share and Embed. Copy the iframe code. If you want the video hidden, change the width and height to zero. If you want the video to autoplay, add ?autoplay=1 to the end of the video URL. Keep in mind that this method will NOT allow you to add background music that plays continuously throughout the game. We will discuss how to add background music below these examples.


<iframe width="0" height="0" src="https://www.youtube.com/embed/9NcPvmk4vfo?autoplay=1"></iframe>

shareembed

Here are a few Legend of Zelda sound effects and their iframe embed code.
Item:


<iframe width="0" height="0" src="https://www.youtube.com/embed/ly5C2dAUF-o?autoplay=1"></iframe>


Secret:


<iframe width="0" height="0" src="https://www.youtube.com/embed/c8YNB9zVlHE?autoplay=1"></iframe>


Game Over:


<iframe width="0" height="0" src="https://www.youtube.com/embed/3ye2TjzeX70?autoplay=1"></iframe>

BACKGROUND MUSIC

To add background music that plays continuously throughout the game, first click on the menu in the bottom left and add the following code to the Story JavaScript.


if(typeof YouTubeTunes == "undefined"){
$('body').append('<div id="youtubetunes"></div>');
var YouTubeTunes = {
play: function(id){
console.log('YouTubeTunes:' + id);
if(this.current != id){
this.current = id;
var container = $('#youtubetunes');
container.empty();
container.append('<iframe src="https://youtube.googleapis.com/v/' + id +
'?autoplay=1&amp;loop=1&amp;playlist='+ id +
'" style="visibility:hidden;width:500px;height:500px;position:absolute;top:-1000px;left:-1000px;"></iframe>');
} else {
console.log('already playing');}},
stop: function(){
$('#youtubetunes').empty();
this.current = "";
console.log('stopped youtubetunes');}};
window.YouTubeTunes = YouTubeTunes;}

Next, add this code to the passage in which you want the music to start playing.


<div style="display:none;"><img src=";P" onerror="YouTubeTunes.play('UyxR8RNoaIQ');"></div>

Using that last code you can play the audio from any YouTube video. For example, to play the audio from https://www.youtube.com/watch?v=5lF1XV9g29k you need to replace UyxR8RNoaIQ with 5lF1XV9g29k. Like this...


<div style="display:none;"><img src=";P" onerror="YouTubeTunes.play('5lF1XV9g29k');"></div>

ezgif.com-gif-maker (1)
CONTINUE TO THE NEXT POST: Twine Battle




RECENT POSTS

Mastodon