I have got some questions about how to make audio volume control in EOS teases after I released my last tease.
This is mostly interesting for the estim community but maybe someone else is also interesting in playing audio on different volume levels.
So I want here to give a very short, simple but hopefully usefull tutorial how to play with the EOS audio and volume control feature.
This tutorial is very very very basic! To be specially focused on people who are not familiar with using javascript in any way!
Here is the sample tease we are talking about below, this is what we are going to do:
https://milovana.com/webteases/showteas ... 9bfd8e1548
First we need to create a tease
-> https://milovana.com/eos/editor/teases1. Define a variable and enable audio module
We need a variable to keep track about the current volume and need to enable the EOS audio module.
So we will add a variable called "volume" and set it at default to 50.
- 2020-01-01 15_16_26-Eos Editor.png (78.24 KiB) Viewed 6958 times
2. Play an audio file
Next we want to play an audio file from the start page.
I would always recommend to play a sound file with 0% volume when creating an estim based tease!
This is always the save method, when you have a bug in your script and the following volume command is skipped or just not working you could get a massive volume jump.
It's always better to have no sound instead of a massive jump!
So we will select a sound file we have uploaded before in the files section, set the volume to 0%, set the loop option to infinity in the tutorial to make sure the file is running all the time.
Then we will select the option to play across pages, if this is not selected the file will stop by the next page change.
To control this file later we need to set an identifier, in our tutorial we will use "audio123" for this.
- 2020-01-01 15_23_38-Eos Editor.png (174.51 KiB) Viewed 6958 times
At the end we will add a simple go to action to get to our next page.
3. Show current volume and buttons
On our main page in that tutorial we want first to show the current value of our volume variable.
You can very simple show variables with the say function.
- 2020-01-01 15_31_54-Eos Editor.png (126.95 KiB) Viewed 6958 times
Next we will add two simple buttons, one for 10% volume increase and one for 10% decrease.
This button have a simple go to function to our next two pages.
- 2020-01-01 15_36_56-Eos Editor.png (142.34 KiB) Viewed 6958 times
4. "Script" to change the volume
Okay now to the "fency" javascript part.
You can add javascript code on pages just by adding the "Eval" function, this will allow to run you nearly everything.
The order on the left is important, we need to add the eval function before the goto action or it will be skipped.
In most cases it makes sense to run the code part of a page very early.
Our code is very simple, we will just add "10" to our volume variable.
It's like we are saying the programm please use the variable "volume" and use the current value of volume and add 10.
In our first run that would be "60 = 50 + 10" because the initial value is 50, we defined it at the beginning.
Of course you can input here nearly everything it's simple math and follows all the math rules with all that things like "- + / * ()" etc...!
So you can also do for example crazy stuff like "volume = (volume/50) * (2+10) - 10" if you want
- 2020-01-01 15_44_30-Eos Editor.png (117.46 KiB) Viewed 6958 times
After that code we go back to our audio-check page with a go to command and create the same page for volume decrease but this time we will put in "volume = volume - 10" -> still simple math.
5. Set the new volume value
Okay now we have updated the variable from 50 -> 60 or 50 -> 40, depending on which button the user clicked.
But now we also have to say the soundfile to run with that new value, because at the moment we only have a variable with a number, nothing else happend so far.
To get this done we will jump to our audio-check page and at a little eval function to the top of the page. (important to set the eval funtion above the buttons!)
In this eval function we will set the new value to our running audio file.
- 2020-01-01 15_56_46-Eos Editor.png (149.36 KiB) Viewed 6958 times
This might be looking a bit complex if you have never seen any programcode but it's very easy to use.
The two important parts are:
identifier = The name we set when we played the audio file, in our case "audio123".
volume variable = In this part of the function we will hand over our volume variable to the function to give the new volume.
The important part is that this function is expecting a value between 0 and 1.
For example:
0,3 -> 30%
0,5 -> 50%
1 - 100%
But because our human brian can easier calculate with volume numbers between 0 - 100 we will set our variable with "normal" full numbers.
That is why we have to input "volume/100" -> this will just do a simple math calculation again -> " 50 / 100 = 0,5".
- 2020-01-01 16_00_34-Eos Editor.png (17.41 KiB) Viewed 6958 times
And this is everything you need to do a basic volume control, now it's running in a simple loop.
- 2020-01-01 16_14_03-Eos Editor.png (42.52 KiB) Viewed 6958 times
In a real tease you could add a volume increase of course everywhere, this loop is just a simple example.
6. Extra: Make it more stable!
What I showed you will work absolutely easy and perfect if you stay in a range from 0 to 100.
In our case when you click 6x on the increase button you will end with a volume of 110 in our variable.
This is a problem because it's not possible to set a volume of 110% in EOS, 100% is the max value.
So there are two options to take care about this issue.
1) You will design your tease in a way that you always keep track about the volume in your head, this will work when you start at a fixed volume point and know exactly how many times you add or reduce it to never get above 100%.
Very easy but very static and could lead into problems when your tease is very long and you lost control about everything.
2) You will let javascript take care about that.
So lets see how we can do this.
We will need to add some simple code to our audio-check page in the eval section before we set the new volume!
In an eval function you can do endless amount of code, you don't need to create an eval function for every line you want to do.
- 2020-01-01 16_25_04-Eos Editor.png (163.14 KiB) Viewed 6958 times
Okay what the heck is that?!
In this very short "if loop" we are checking the volume value and if the volume is above 100 it will jump in and set the volume variable to 99.
99 because you can then see it better when it's happening.
Like:
- 2020-01-01 16_28_14-Eos Editor.png (17.53 KiB) Viewed 6951 times
In all other cases when the value of volume for example is 50, 60, 70, 80 etc... the part with the "volume = 99" get skipped.
Of course we need to do this check in both directions, so we will add a check if it's below 0 too.
Our full eval command:
- 2020-01-01 16_32_00-Eos Editor.png (34.8 KiB) Viewed 6958 times
I would always recommend to check the volume every time about this two possible issues when you have a tease which is using a lot of volume control!
Of course setting the values to 1 or 99 (You can use 0 or 100 of course too!) isn't a good solution for every situation because then all new volume changes get ignored.
Maybe it is better to jump to a new page instead and trigger a recalibration on that new page for the user.
Like:
- 2020-01-01 16_37_21-Eos Editor.png (39.69 KiB) Viewed 6958 times
7. Extra: Changing audio files
Okay when we talk about an estim based tease we mostly don't want to play one file over and over again for the whole tease.
So we need to change the file, for this action there are a lot of possible solutions, I will show you one very easy that will make the job without a lot complexity.
Maybe when you are familiar with a bit more javascript you can do it on your own way, but we keep it simple for this tutorial.
Let us add a third button to our tease where the user can stop the audio file.
- 2020-01-01 16_58_25-Eos Editor.png (159.8 KiB) Viewed 6958 times
On the new page we will add an eval function and stop the audio file.
That's very easy and similiar to the volume control.
- 2020-01-01 17_02_47-Eos Editor.png (128.56 KiB) Viewed 6958 times
Now the file stops playing and we got back to the main page and can still change the volume, but the audio file is stopped so nothing happens for your ears.
So let us add another button to our audio-check page and lets start a different sound file this time!
- 2020-01-01 17_08_04-Eos Editor.png (185.19 KiB) Viewed 6958 times
In the audio-start we can just add a normal Audio Play function and select this time the test2.mp3 file, start it again with 0% volume and set the same identifier!
To keep it simple it's possible to use the same identifier again and again, so you always know that you control the correct sound file.
You can also start a file when the old one is still running, the file just gets overwritten.
- 2020-01-01 17_13_59-Eos Editor.png (156.3 KiB) Viewed 6958 times
The new audio file will start on that page with 0% volume and jump than to our audio-check page where the correct volume will be set again.
In a real tease it mostly make sense to add an eval function after the audio play function and set the volume again, like:
- 2020-01-01 17_16_31-Eos Editor.png (124.74 KiB) Viewed 6958 times
8: Try it out and start your own tease!.
And if you have questions about the audio features, just write it here, I will try to help.
If you have improvements, ideas or want to add something about the audio feature, feel free to also comment here!
Here you can find the .json file as a download, it's a copy of the tease above you can directly import into the EOS editor.
Create a new tease, don't import this file into one of your existing teases, because everything gets overwritten by importing a .json file!
https://mega.nz/#!9A8QmIgY!RFt3kE-voqlQ ... RU8vl4Rbdc
- 2020-01-01 17_27_17-Eos Editor.png (93.06 KiB) Viewed 6937 times
