How do you edit Harlowe Audio Library Sidebar?

Hi every one !

I’m making my first game on the last version of twine (2.5) ; engineered by Harlowe (3.3.3).

Adding a phone ring made me install Harlowe Audio Library. So, I have this left sidebar I wanted at first to hide ; but now, I would like to add informations from the game, like $statut and $emotion, probably more ; is it possible ? (I know it is, but I can’t find by myself…)

All I have for now, is the sound/mute icon and the CSS lines from HAL.

Thank you for reading ; thank you for answerring.

I don’t think this goes in this category. Try reposting it in the Twine subcategory of the Authoring category.


Thanks, and sorry.

The left slide-out panel that the Harlowe Audio Library (HAL) adds only supports adding “menu” related links to it. The Menu API section of the HAL Documentation page explains how to use JavaScript within your project’s Story JavaScript area to add such links.

note: If you are viewing the HAL Guide page then links to the companion Documentation page can be found in both the Getting The Library section, and the This Is Only The Beginning section.

You can however add textual as well as other types of content to Harlowe’s own Left Sidebar area by using the special ?Sidebar Named Hook combined with either a (append:) or (replace:) macro, and you can alter the default size and look of the Harlowe sidebar using CSS within your project’s Story Stylesheet area. The “Left Sidebar”: Harlowe (only v2.1.0 or later) recipe in the Official Twine Cookbook demonstrates one way to do all of that.

1 Like

I will try it again soon !

I read those parts ; but i didn’t unterstand everything. I already did try the “Left Sidebar” code from Harlowe, but it seemed to me it was not the “same” left sidebar, because, which is kind of weird. My texts appeared in the left part of the screen but not into the sidebar, if you see.

Thanks again !

When using the code from The cookbook i see that :

and the HAL sidebar is still empty.

What I would like is to put these informations into the grey, openable sidebar, under the sound config things…

Also, I have a lot of difficulty understanding the sidebar concept.
In Twine/Harlowe, is the left empty part on the left of my tw-story, the left side bar ? or is it the grey appearing menu ?

The “left empty part on the left of my tw-story” is Harlowe’s built-in sidebar, that you can add content to using the special ?Sidebar Named Hook.

The “grey appearing menu” is part of the Harlowe Audio Library third-party addon, that you added to project. It is not part of Harlowe itself, and this addon only allows you to add “menu” links to that grey area.

Based on the screen capture images you supplied it appears that you added all of the TWEE Notation based example code of the Cookbook recipe to one Passage of your project, and that’s not how that example code is used.

In that recipe’s example code each line that starts with double full-colon characters :: is known as a passage Header, and it represents a new Passage in your project. The text that follows those colons on the same line is the Name of the new Passage, and the textual content on the lines that follow it is the content of the new Passage.

eg. the following part of the recipe example

:: Start
Another passage

…is instructing you to create a Passage with a Name of Start, which you then add the Another passage textual content to.

If the Header line also contains Square Brackets with one or more words between them, then each those words should be assigned as a Passage Tag to the newly created Passage.

eg. the following part of the recipe example

:: Sidebar [footer]
(append: ?SideBar)[\
Name: $name
Location: $location

…is instructing you to create a Passage with a Name of Sidebar, to assign a footer Passage Tag to this new Passage, and add the following textual content to that Passage.

(append: ?SideBar)[\
Name: $name
Location: $location

The header line that starts with :: UserStylesheet [stylesheet] treated differently, as it represents the Story Stylesheet area of your project. So instead of creating a new Passage you simply add the contents that follows that header line to your project’s Story Stylesheet area.

The header line that starts with :: StoryTitle is also treated differently, as the textual content that follows it represents the Name of the Story Project, so unless to are creating a test project you can ignore that part of the recipe.

All of the above TWEE Notation related information and more can be found the Cookbook related link I supplied earlier.

Thank you very much for clarifying all of this.

When you say " only allows you to add “menu” links", what are those “menu” links ?

Links to Passages.
These links will look like grey “buttons”, and they will appear above HAL’s own “MUTE” button on the grey slide-out panel.

I supplied references to the related documentation in my original post…

As you will be:

  1. displaying custom content within Harlowe’s own Left Side-bar area.
  2. that you can also place links within that area.
  3. that JavaScript needs to be used to add links to HAL’s “menu”.

…I would suggest ignoring HAL’s slide-out panel. You might even want to consider disabling/hiding that slide-out panel entirely.