Using JavaScript for Audio Fades with #Tags

[Inkynoob739]

Hello! I know the basics about inky but I am not a genius when it comes to JavaScript. I used some different forums and stuff a while back to get a working play and pause sound system inside the inky html. I was wondering if there was anyway to make the audio fade out when a certain tag is called within the Ink story, like using .setVolume() or something of the likeness. This was the code I was using:

else if( splitTag && splitTag.property == "FADE" ) {
this.audioLoop.setVolume = 0.5; // set volume to 50%
}

Every time the tag was called though, nothing happened. I read through some forums, and was wondering if I had to use something like jQuery or something else to help run the HTML. Again, I know very little about JavaScript so any help would be great. Perhaps I needed to use something else, I don't know. Please help!

Below is the code I used for starting and stopping audio tracks:

else if( splitTag && splitTag.property == "AUDIOLOOP" ) {
if('audioLoop' in this) {
this.audioLoop.pause();
this.audioLoop.removeAttribute('src');
this.audioLoop.load();
}
this.audioLoop = new Audio(splitTag.val);
this.audioLoop.play();
this.audioLoop.loop = true;
}

[Selsynn]

Hi,
I feel your question would be best on the inkjs repo, as it's purely a js question. However I can try to answer it.

0. In case you are wondering, all js code does not work in the Inky editor itself. You have to do a web export and see it in the browser to have your custom js executed.
   in Inky, it should just write the tag in a greyed out color, without any other specific treatment.

1. Do you have any error in your console appearing at the time it should be doing the audio stuff? Maybe a variable is not declared correctly.
   To see the console, you have to do several steps. Some depends what browser you are using. For Firefox, it would be displayed by hitting F12 and going to the "console" tab. You may have to select a "developer" option somewhere in the settings if nothing show up (but I don't remember where.)

2. Second part is making sure you have the right tag and the code to handle it in the right place. One simple solution, still in the console log is to add a console.log("audio should play now"); or a alert("audio should play"); with the message you want to have instead.
   The console.log will log into the console, and you should see your message appear when going to the knot/stitch where your tag is.
   The alert will display a popup with your message. They should work out of the box (i am not so sure about alert, console.log is definitively something you can use out of the box.)

3. If you see your message that are at the same place as your code, and still have no sound, you will need to verify how you do your sound itself. However, making the sound go to a fixed volume won't make the fade effect you are looking for. To help you further, you should ask to the repo of the audio system itself, and giving the line of code relative to their part. Sometimes, js lib are hard to make compatible together, but if you already had some sound correctly playing, I think it's either a typo in the tag (that the step 2 will correct) or that the setVolume does not exist on the sound lib you are using. Without knowing what exactly you are using, it's impossible to know.

Let me know if you need more help after doing these steps, or if you need help to display the console, or to hit the correct tag. I can try to help with the sound lib itself, but you will have to give me exact reference you are using.
Let me also know if you are still encountering issue which browser you are using.

[Inkynoob739]

Hello,

I greatly appreciate you taking time to answer my question. However, I did figure it out for myself a few days ago and never got around to commenting and marking this as answered. Again, I'm greatly thankful you stepped into help.

I believe the problem had to due with me misusing the tag code and the sound setting inside of it. As you were asking about my js library. When you use the export to web, inside the main.js file created inside the folder there is already the audio and audioloop code for the tags that I was using. So the sound system I had going was native to the code already, I just didn't have to change anything. This is all in the main.js.

So, the problem. I believed that by using ( splitTag && splitTag.property), when the tag was called the js file was looking for something after it ( for example, # AUDIOLOOP: ""). Therefore, when I just called (# FADE), it might have caused an error. Next, I don't think I was using the correct audio volume system to change the volume. I wrote this.audioLoop.setVolume = 0.5;, while the working code I have now reads this.audioLoop.volume = 0.5;. I don't really now if the setVolume vs. the volume really made the difference, but for me it did.

My final code (that works) looks like this:

                    if( tag == "FADE" ) {
                        this.audioLoop.volume = 0.5;  // set volume to 50% 
                   }

Now that seemed to work great for me.

Thanks again for attempting to help me!