Howdy, Stranger!

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

Is there a way to cache audio for harlowe 2.0

I have added st to my game but one problem arises is the lag I've heard that sugar cube can do it so I tried switching but the game got fucked up none of the coding works so I had to change back if you guys could tell me how to cache audio on harlowe, or what to change in my coding so it can work on sugarcube if there's a general thing I can add/remove and most of the things work please tell me

Comments

  • re: Audio, caching, and Harlowe.

    Because Harlowe has no built-in support for audio (besides the HTML audio element) you will need to use Javascript to add it.

    A third party Javascript library named Howler has been mentioned in previous threads/comment on this subject but I don't know what is needed to get it to work with Harlowe because I have never used it.

    Writing Javascript code to handle the complexities of caching and playing audio on all the different web-browser brand and releases (both mobile and non-mobile) is not a simple task, if you decide to it I suggest you use the relevant sections of SugarCube 2's source code as an example.

    re: Changing from Harlowe to SugarCube:

    Each story format is responsible for defining the syntax of it's macro language, it's list of core macros, the default HTML structure and CSS it uses, and what other features are available to Authors.

    You would need to review each of your story's passages that contain macro code and reformat/re-write that code to the syntax/macros used by SugarCube, if you have used custom CSS to style your story then you would need to re-write that as well.
  • greyelf wrote: »
    re: Audio, caching, and Harlowe.

    Because Harlowe has no built-in support for audio (besides the HTML audio element) you will need to use Javascript to add it.

    A third party Javascript library named Howler has been mentioned in previous threads/comment on this subject but I don't know what is needed to get it to work with Harlowe because I have never used it.

    Writing Javascript code to handle the complexities of caching and playing audio on all the different web-browser brand and releases (both mobile and non-mobile) is not a simple task, if you decide to it I suggest you use the relevant sections of SugarCube 2's source code as an example.

    re: Changing from Harlowe to SugarCube:

    Each story format is responsible for defining the syntax of it's macro language, it's list of core macros, the default HTML structure and CSS it uses, and what other features are available to Authors.

    You would need to review each of your story's passages that contain macro code and reformat/re-write that code to the syntax/macros used by SugarCube, if you have used custom CSS to style your story then you would need to re-write that as well.
    ooh ok I'll just have to leave it with the 6sec lag its not worth it
  • If your game already has a lot of content and you're not having other issues which might make you want to switch to SugarCube (v2, don't use v1), then you're probably better off sticking with Harlowe and using the howler.js library, so you don't have to rewrite all of your markup.

    You will likely have to wrap howler.js within a smaller wrapper to get it to export properly, otherwise it will probably explode. Something like the following:
    (function (window, define, exports) {
    
    /* howler.js goes here */
    
    })(window);
    
  • What does cache mean?
  • edited August 2016
    The
    If your game already has a lot of content and you're not having other issues which might make you want to switch to SugarCube (v2, don't use v1), then you're probably better off sticking with Harlowe and using the howler.js library, so you don't have to rewrite all of your markup.

    You will likely have to wrap howler.js within a smaller wrapper to get it to export properly, otherwise it will probably explode. Something like the following:
    (function (window, define, exports) {
    
    /* howler.js goes here */
    
    })(window);
    

    The problem I want to use custom music for my game not the predifined ones in the howler libary, and to do that I need to use the audio src code which has a small lag can I upload my music to howler?
  • There is no predefined music in howler.js, I'm not sure how you got the idea that there is. You also, do not upload music to it—it's a audio playback library, not some kind of hosting service.

    The reason that you'd want to use howler.js would be to get rid of the latency you're complaining about. It would load and cache your audio so that when you attempted to play a track, it would start without delay.
  • Deadshot wrote: »
    What does cache mean?
    Cache in this context means to store a local copy of the media (audio,image) files before they are used so that they load (play, display) quicker.

    The actual storage could be:

    1. As temporary files on your local hard-drive if the media files are being hosted on a web-server, this is how your web-browser speeds up the displaying of web-pages and images you view on the network (LAN, internet).

    2. In memory.

    3. Both 1 and 2.
  • If your game already has a lot of content and you're not having other issues which might make you want to switch to SugarCube (v2, don't use v1), then you're probably better off sticking with Harlowe and using the howler.js library, so you don't have to rewrite all of your markup.

    You will likely have to wrap howler.js within a smaller wrapper to get it to export properly, otherwise it will probably explode. Something like the following:
    (function (window, define, exports) {
    
    /* howler.js goes here */
    
    })(window);
    
    I can't seem to run it correctly I probably did it in a messed up wrong way here's what I wrote in my javascript (function (window, define, exports) {

    /file:///C:/Users/Omer.M/Downloads/howler.js-master/dist/howler.min.js/

    })(window);
    var sound = new Howl({
    urls:
    });

    sound.play();


  • When TheMadExile wrote /* howler.js goes here */ he mean that the contents of the howler.js file should be inserted there. You may not need the closure wrapping because Howler v.2.0.0 includes one in the source file.

    Even after doing what TME advised you will still get a "See almond README: incorrect module build, no module name" error message.

    This is because Harlowe uses a third-party library named Almond instead of the standard require.js to handle the loading of Modules, and it is stricter in the parameters used to define a module so you will need to modify the Howler source code.

    Steps to get Howler to work in Harlowe:.

    1. Download the 2.0.0 version of the howler.js file, which you already have.

    2. Make a copy of the howler.js file and open that copy in a Text Editor.

    3. Go to section of code related to AMD, which starts at line 2131 in the code.
    If your Text Editor does no use line numbers then search for "Add support for AMD" without the quotes.

    4. Edit the line of code that reads:
    define([], function() {
    
    and change it to:
    define('Howler', [], function() {
    

    5. Select the whole contents of the file (CTRL+A in Windows) and copy it into the clipboard (CTRL+C in Windows)

    6. Open your Story Project in Twine 2 and open the Story Javascript area.

    7. Paste the contents of the clipboard into the Story Javascript area, replacing everything else that was already in there.

    8. Place code like the following into a passage, it will play a audio file. My example assumes that the audio file is named tada.mp3 and that it exists in a folder named media but your should be URL's to hosted files.
    <script>
    var sound = new Howl({
      src: ['media/tada.mp3']
    });
    
    sound.play();
    </script>
    
  • greyelf wrote: »
    […] You may not need the closure wrapping because Howler v.2.0.0 includes one in the source file.

    Even after doing what TME advised you will still get a "See almond README: incorrect module build, no module name" error message.
    /facepalm

    That is the entire point of the wrapper I suggested, to ameliorate the almond issue without requiring edits to howler.js—by shadowing both define and exports, causing howler.js to export directly to window.
  • That is the entire point of the wrapper I suggested..
    My mistake then, but I kept getting a token error each time I cut-n-pasted your closer and inserting the contents of the howler.js file inside it.

    If I manual type the equivalent of your closer then I don't get the token error, strange!
  • Twine forum markup strikes again.
  • edited August 2016
    greyelf wrote: »
    When TheMadExile wrote /* howler.js goes here */ he mean that the contents of the howler.js file should be inserted there. You may not need the closure wrapping because Howler v.2.0.0 includes one in the source file.

    Even after doing what TME advised you will still get a "See almond README: incorrect module build, no module name" error message.

    This is because Harlowe uses a third-party library named Almond instead of the standard require.js to handle the loading of Modules, and it is stricter in the parameters used to define a module so you will need to modify the Howler source code.

    Steps to get Howler to work in Harlowe:.

    1. Download the 2.0.0 version of the howler.js file, which you already have.

    2. Make a copy of the howler.js file and open that copy in a Text Editor.

    3. Go to section of code related to AMD, which starts at line 2131 in the code.
    If your Text Editor does no use line numbers then search for "Add support for AMD" without the quotes.

    4. Edit the line of code that reads:
    define([], function() {
    
    and change it to:
    define('Howler', [], function() {
    

    5. Select the whole contents of the file (CTRL+A in Windows) and copy it into the clipboard (CTRL+C in Windows)

    6. Open your Story Project in Twine 2 and open the Story Javascript area.

    7. Paste the contents of the clipboard into the Story Javascript area, replacing everything else that was already in there.

    8. Place code like the following into a passage, it will play a audio file. My example assumes that the audio file is named tada.mp3 and that it exists in a folder named media but your should be URL's to hosted files.
    <script>
    var sound = new Howl({
      src: ['media/tada.mp3']
    });
    
    sound.play();
    </script>
    
    Tried it everything was going okay but then bam error message I've wrote the coding as so:
    <script>
    var sound = new Howl({
      urls: ['https://www.dropbox.com/s/fkmf78b3anlby5i/Fullmetal Alchemist Brotherhood Opening 1-Again creditless-2uq34TeWEdQ.mp3?dl=1'],
      buffer: true
    });
    
    sound.play();
    </script>
    

    I've attached the error screenshot image as it has no number and is pretty weird to explain
  • As of howler.js 2.0, no longer has urls or buffer properties—see: Breaking Changes within the CHANGELOG.

    As noted in both the CHANGELOG and the Howl options object, you need the src and html5 properties now.

    You should be doing something like the following.

    Place your audio setup within a passage tagged with startup—it will be run at story initialization. Additionally, each piece of audio needs to have its own name—since Harlowe executes JavaScript globally, you should probably use an object to namespace this. For example:
    <script>
    var audio = {};
    
    audio.fabo = new Howl({
    	src: ['https://www.dropbox.com/s/fkmf78b3anlby5i/Fullmetal Alchemist Brotherhood Opening 1-Again creditless-2uq34TeWEdQ.mp3?dl=1'],
    	html5: true
    });
    
    audio.whatever = new Howl({
    	src: ['…URL to some other piece of audio…'],
    	html5: true
    });
    </script>
    

    To play any of the audio you've setup—e.g. the Fullmetal Alchemist Brotherhood Opening—in one of your normal passages, you'd do something like the following within the passage in question:
    <script>
    audio.fabo.play();
    </script>
    

    Additionally, since preloading over the network is not instantaneous you may need to provide a splash/loading screen, which could be controlled by an on load event handler for the piece of audio you intend to play first—I'm going to leave this as an exercise for someone else to explain.
  • As of howler.js 2.0, no longer has urls or buffer properties—see: Breaking Changes within the CHANGELOG.

    As noted in both the CHANGELOG and the Howl options object, you need the src and html5 properties now.

    You should be doing something like the following.

    Place your audio setup within a passage tagged with startup—it will be run at story initialization. Additionally, each piece of audio needs to have its own name—since Harlowe executes JavaScript globally, you should probably use an object to namespace this. For example:
    <script>
    var audio = {};
    
    audio.fabo = new Howl({
    	src: ['https://www.dropbox.com/s/fkmf78b3anlby5i/Fullmetal Alchemist Brotherhood Opening 1-Again creditless-2uq34TeWEdQ.mp3?dl=1'],
    	html5: true
    });
    
    audio.whatever = new Howl({
    	src: ['…URL to some other piece of audio…'],
    	html5: true
    });
    </script>
    

    To play any of the audio you've setup—e.g. the Fullmetal Alchemist Brotherhood Opening—in one of your normal passages, you'd do something like the following within the passage in question:
    <script>
    audio.fabo.play();
    </script>
    

    Additionally, since preloading over the network is not instantaneous you may need to provide a splash/loading screen, which could be controlled by an on load event handler for the piece of audio you intend to play first—I'm going to leave this as an exercise for someone else to explain.

    thx alot it finally worked and don't worry no loading screen needed I'm making a mini story in the beginning like the intro basically that should buy enough time for it to load
  • As of howler.js 2.0, no longer has urls or buffer properties—see: Breaking Changes within the CHANGELOG.

    As noted in both the CHANGELOG and the Howl options object, you need the src and html5 properties now.

    You should be doing something like the following.

    Place your audio setup within a passage tagged with startup—it will be run at story initialization. Additionally, each piece of audio needs to have its own name—since Harlowe executes JavaScript globally, you should probably use an object to namespace this. For example:
    <script>
    var audio = {};
    
    audio.fabo = new Howl({
    	src: ['https://www.dropbox.com/s/fkmf78b3anlby5i/Fullmetal Alchemist Brotherhood Opening 1-Again creditless-2uq34TeWEdQ.mp3?dl=1'],
    	html5: true
    });
    
    audio.whatever = new Howl({
    	src: ['…URL to some other piece of audio…'],
    	html5: true
    });
    </script>
    

    To play any of the audio you've setup—e.g. the Fullmetal Alchemist Brotherhood Opening—in one of your normal passages, you'd do something like the following within the passage in question:
    <script>
    audio.fabo.play();
    </script>
    

    Additionally, since preloading over the network is not instantaneous you may need to provide a splash/loading screen, which could be controlled by an on load event handler for the piece of audio you intend to play first—I'm going to leave this as an exercise for someone else to explain.
    and as I expected another problem arises I thought finally I'm done with it atlast but nope the problem is when I put two audios each are over 1min and when I went from 1 passage that has music to the other I ended up with both of them playing in the same time (sounded weird), I'm able to make the stop function and stopping one
    <script>
    audio.fabo.stop();
    </script>
    
    , the problem with this method is I'm gonna have over 10 audios that means me pasting this command over and over again, if there's a way to make it only play this audio when I got to a passage please tell me
  • For those like me who find this looking for a solution but struggle with the back and forthing of code, Khaloodxp eventually found and posted a step-by-step guide for implementation here: https://twinery.org/forum/discussion/comment/19116
Sign In or Register to comment.