Howdy, Stranger!

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

Background Music in Harlowe

Hi all, I've made a few Twine fictions using Twine 2 (whatever the most recent is, it's all updated on my computer) and Harlowe 1.2.1. I am fairly dedicated to using Harlowe, since I do well with the macros and don't have time right now to teach myself a whole new story format.

I am looking to include just one sound in my story if possible. I just want an ambient soundtrack of "space noises" in the background of the passages. It is about 14 minutes long, so if the reader continues to play I would like the soundtrack to loop if possible. It doesn't need to change based on passage, just keep playing in the background. Is there a way to do this in Harlowe? I know that everyone here argues that SugarCube is better for sound, but I'm hoping that since this is fairly straightforward, someone can help me manage it in Harlowe.

Thanks!

Comments

  • don't worry I got you it took me a while to perfect sound in harlowe but I got the perfect blend of everything took me weeks, anyway it's gonna be a hassle but stay with me and it should work out perfectly (of course if you already made a step just skip it):
    Step 1 Download dropbox and create an account
    Step 2 Download the music you want preferably in mp3/4 format
    Step 3 Place the music you want in the dropbox folder and then copy it's link but make sure to change the dl=0 to dl=1
    Step 4 Click edit story javascript and paste the code that is available in the javascript of the file I provided it's howler.js which reduces lag for music files in twine I worked out all the things in it but I can't paste it here because it's too long
    Step 5 Create a music passage and make it have the tag startup
    Step 6 Paste this code
    <script>
    var audio = {};
    
    audio.whatever = new Howl({
    	src: ['the the link of your music file'],
    	html5: true,
            loop: true,
    });
    </script>
    
    Step 7 In the passage that you want the music to start playing paste this code
    <script>
    audio.whatever.play();
    </script>
    
    Step 8 Enjoy you showed those sugarcube users that you could use music in harlowe
    html
    html
    javascript.html
    85K
  • Ah! This looks amazing. Bless you for helping me out so much! I'm going to see if I can get everything up and running. Thank you!
  • you're welcome glad to help :smile:
  • Hey, I hate to be a bother, but I seem to be having a hard time downloading that attached file. I'm kind of new to these forums, so there's a chance I'm doing something wrong, but is there another way that I can access it?

    Thanks so much
  • Right-click on the attachment and save as.
  • Thanks. I figured it out. There was a computer setting that wasn't letting me download the file.
  • Massive thanks for this! Really fantastic and simple. I needed multiple tracks in mine so in the interest of keeping the simplicity for noobs like myself, here's some neat 'stop all tracks' code so that, when adding multiple tracks, they don't play over each other.
    function stopaudio() {
    	for(keybar in audio) {
    		audio[keybar].stop();
    	}
    }
    
    Add that just before the </script> in the 'music' passage, then in step 7 amend to
    <script>
    stopaudio();
    audio.whatever.play();
    </script>
    

    That'll stop any other tracks and start the new track seamlessly, even if it's a revisited passage. Hope it helps others as much as it's helped me and thanks again for a great job for sound in harlowe!
  • Hi guys,

    thanks for this. Unfortunately, I did everything as listed, but when I launch the game, I see the following message:
    There is a problem with this story's script (#1):
    
    Unexpected token <
    

    Followed by:
    Sorry to interrupt, but this page's code has got itself in a mess. 
    TypeError: Cannot read property 'get' of undefined
        at showPassage 
        at Object.Engine.goToPassage 
        at HTMLDocument.<anonymous> 
        at fire 
        at Object.self.add [as done] 
        at jQuery.fn.ready 
        at jQuery.fn.init 
        at jQuery 
        at <anonymous>:30:596
        at main 
    (This is probably due to a bug in the Twine game engine.)
    

    I really hope you can help me sort it out!
  • Hi all,

    I'm having a noob moment here. I've been trying to download the html Khaloodxp kindly provided, but all I get is the image of the button, not the file. The only options I get when attempting to right click and download are to download the image, I don't even get an option to download the file itself. I'm using safari on mac. Is there a way that I could snag a copy of the html file from you in another way?

    Thanks in advance for any help you can offer.
  • Hi all,

    I'm having a noob moment here. I've been trying to download the html Khaloodxp kindly provided, but all I get is the image of the button, not the file. The only options I get when attempting to right click and download are to download the image, I don't even get an option to download the file itself. I'm using safari on mac. Is there a way that I could snag a copy of the html file from you in another way?

    Thanks in advance for any help you can offer.

    Did you figure out how to download it? I'm having the same problem.
  • . . . all I get is the image of the button, not the file. The only options I get when attempting to right click and download are to download the image, I don't even get an option to download the file itself.


    seriu wrote: »
    Did you figure out how to download it? I'm having the same problem.

    I am, too, but I'm using Chrome on a Chromebook. Has anyone figured this out?
  • Hi all,

    I'm having a noob moment here. I've been trying to download the html Khaloodxp kindly provided, but all I get is the image of the button, not the file. The only options I get when attempting to right click and download are to download the image, I don't even get an option to download the file itself. I'm using safari on mac. Is there a way that I could snag a copy of the html file from you in another way?

    Thanks in advance for any help you can offer.

    here's a link
    https://mega.nz/#!OMtjEYAD!SYCc0hI3KzGKJxSYpKplONOlIGJ2_ah8BI0UDaUEMoo

    sorry I didn't reply earlier I was kinda busy so I didn't check out twine in a while, anyway this should work perfectly
  • Hey whats the code for Step 4?
  • i figured it out, thank you so much!
  • EmperorLol wrote: »
    Massive thanks for this! Really fantastic and simple. I needed multiple tracks in mine so in the interest of keeping the simplicity for noobs like myself, here's some neat 'stop all tracks' code so that, when adding multiple tracks, they don't play over each other.
    function stopaudio() {
    	for(keybar in audio) {
    		audio[keybar].stop();
    	}
    }
    
    Add that just before the </script> in the 'music' passage, then in step 7 amend to
    <script>
    stopaudio();
    audio.whatever.play();
    </script>
    

    That'll stop any other tracks and start the new track seamlessly, even if it's a revisited passage. Hope it helps others as much as it's helped me and thanks again for a great job for sound in harlowe!

    I would further recommend using
    <script>audio.whatever.pause()</script>
    
    instead, because I found myself revisiting the same passage multiple times in short time intervals and the sound of the music repeating over and over and over was just a bit too much and I never got to hear the rest of the track, this way the music simply pauses and when you come back it plays from when you paused this is also better because the music doesn't have to reload which in my case further helped with the damn lag and made the music seamlessly flow as if nothing happened, at a time I also used a loading screen for 1min in the beginning of the game for the music to be ready when you enter the passages which seemed to work relatively well most of the times, basically use this if your desperate or if you're a perfectionist https://twinery.org/forum/discussion/6559/can-i-create-a-loading-screen-with-harlowe-2-0#latest
  • I tried to do this, but here's what happened:
    Screenshot from 2017-04-17 20-03-04.png
    1024 x 600 - 86K
  • Deadshot wrote: »
    I tried to do this, but here's what happened:
    A little more detail would help.

    1. Which version of Harlowe are you using?

    2. What other Javascript do you have within your Story Javascript area?

    3. How are you using the Howlerjs library within your story?

    The error message in your image states that the Almond.js library is having issues loading a module.

    I did a very simple test by creating a new story using the on-line release of Twine 2, then inserted the Howlerjs related Javascript contain within the original example, and then ran it using Play. I did not get an error using either Harlowe (1.x or 2.x)
  • greyelf wrote: »
    Deadshot wrote: »
    I tried to do this, but here's what happened:
    A little more detail would help.

    1. Which version of Harlowe are you using?

    2. What other Javascript do you have within your Story Javascript area?

    3. How are you using the Howlerjs library within your story?

    The error message in your image states that the Almond.js library is having issues loading a module.

    I did a very simple test by creating a new story using the on-line release of Twine 2, then inserted the Howlerjs related Javascript contain within the original example, and then ran it using Play. I did not get an error using either Harlowe (1.x or 2.x)

    I'm using twine 2.1.1, Harlowe 1.2.3.
    I searched for Howlerjs.com, and copied 'howler.js' in the 'dist' folder. That's the only thing in my javascript area.
  • The error is a result of the incompatibility between how Howlerjs is registering itself as a Asynchronous Module Definition (AMD) and how the Almondjs AMD library expects it to be done.

    Basically the Almondjs define function is expecting the Howlerjs library to supply a module name and it's not, which results in the error you are seeing. This issue can simply be fixed by you modifying your copy of the Howlerjs library to include the missing information, this must of been done by Khaloodxp in the version they supplied in their attached demo.

    Find the relevant section of code around line 2165 in your copy of the Howlerjs source code, it will look like the following:
      // Add support for AMD (Asynchronous Module Definition) libraries such as require.js.
      if (typeof define === 'function' && define.amd) {
        define([], function() {
          return {
            Howler: Howler,
            Howl: Howl
          };
        });
      }
    
    ... and change the define part to include a module name like the following:
    define('Howler', [], function() {
    
  • Khaloodxp wrote: »
    don't worry I got you it took me a while to perfect sound in harlowe but I got the perfect blend of everything took me weeks, anyway it's gonna be a hassle but stay with me and it should work out perfectly (of course if you already made a step just skip it):
    Step 1 Download dropbox and create an account
    Step 2 Download the music you want preferably in mp3/4 format
    Step 3 Place the music you want in the dropbox folder and then copy it's link but make sure to change the dl=0 to dl=1
    Step 4 Click edit story javascript and paste the code that is available in the javascript of the file I provided it's howler.js which reduces lag for music files in twine I worked out all the things in it but I can't paste it here because it's too long
    Step 5 Create a music passage and make it have the tag startup
    Step 6 Paste this code
    <script>
    var audio = {};
    
    audio.whatever = new Howl({
    	src: ['the the link of your music file'],
    	html5: true,
            loop: true,
    });
    </script>
    
    Step 7 In the passage that you want the music to start playing paste this code
    <script>
    audio.whatever.play();
    </script>
    
    Step 8 Enjoy you showed those sugarcube users that you could use music in harlowe
    greyelf wrote: »
    The error is a result of the incompatibility between how Howlerjs is registering itself as a Asynchronous Module Definition (AMD) and how the Almondjs AMD library expects it to be done.

    Basically the Almondjs define function is expecting the Howlerjs library to supply a module name and it's not, which results in the error you are seeing. This issue can simply be fixed by you modifying your copy of the Howlerjs library to include the missing information, this must of been done by Khaloodxp in the version they supplied in their attached demo.

    Find the relevant section of code around line 2165 in your copy of the Howlerjs source code, it will look like the following:
      // Add support for AMD (Asynchronous Module Definition) libraries such as require.js.
      if (typeof define === 'function' && define.amd) {
        define([], function() {
          return {
            Howler: Howler,
            Howl: Howl
          };
        });
      }
    
    ... and change the define part to include a module name like the following:
    define('Howler', [], function() {
    

    Thank you so much!!!
  • edited April 20
    EmperorLol wrote: »
    Massive thanks for this! Really fantastic and simple. I needed multiple tracks in mine so in the interest of keeping the simplicity for noobs like myself, here's some neat 'stop all tracks' code so that, when adding multiple tracks, they don't play over each other.
    function stopaudio() {
    	for(keybar in audio) {
    		audio[keybar].stop();
    	}
    }
    
    Add that just before the </script> in the 'music' passage, then in step 7 amend to
    <script>
    stopaudio();
    audio.whatever.play();
    </script>
    

    That'll stop any other tracks and start the new track seamlessly, even if it's a revisited passage. Hope it helps others as much as it's helped me and thanks again for a great job for sound in harlowe!

    Is there a way to just stop the music without having to start a different track? And if you had more than one tracks, would you put them all in the music passage?
  • EmperorLol wrote: »
    Massive thanks for this! Really fantastic and simple. I needed multiple tracks in mine so in the interest of keeping the simplicity for noobs like myself, here's some neat 'stop all tracks' code so that, when adding multiple tracks, they don't play over each other.
    function stopaudio() {
    	for(keybar in audio) {
    		audio[keybar].stop();
    	}
    }
    
    Add that just before the </script> in the 'music' passage, then in step 7 amend to
    <script>
    stopaudio();
    audio.whatever.play();
    </script>
    

    That'll stop any other tracks and start the new track seamlessly, even if it's a revisited passage. Hope it helps others as much as it's helped me and thanks again for a great job for sound in harlowe!

    How do do you have multiple tracks? I have two but when I put them in the music passage it didn't work. It only works with one of them inside it.
Sign In or Register to comment.