Fade In / Fade Out sounds

Using JavaScript with Hype
1

Hi, guys!
I have question about managing the sounds in Hype. I have read the other two topics about that but I think my question have a little difference. I've made a example of what I need to do here:

Sound.zip (1.5 МБ)

I want to play couple of sounds in the same time in loop mode and starts them with fade in effect. In some slides (scenes) I want to stop them but with fade out effect. I really like that the sounds don't stop automatically when you move on to the next slide (scene) but I need a little more options.

It would be great if there was an option for that in properties panel of "Play/Stop" triggers.
Screen-Shot

Thank you in advance! :slight_smile:

1 Like
2

This may help you. It uses drag as a control but the main webAudio idea may fit what you are after

3

Can only add to that request. Do_I_miss the fade sound in/out function Flash had. :sob:

I tried 'howler,js' but the examples out there go way too fast into "lets make this difficult" territory.
At least for me. :sweat:

""All"" I too, am looking for is a fade out action on a running sound when for example the current scene ends.

Fade in(s) I can create with 'Audacity'. Fade out(s) are sadly a lot more difficult to insert so the user experiences a nice, smooth transition in her/his eardrums.

Crappy thing is, I can, and do, look at supplied code here on the forum, it just remains largely 'abracadabra' for me. I'm unable to dissect the given code and distill the needed parts out of it to put it to my own use. Like this by @Daniel How to fade a sound, I just don't see how to use that, like how do I tell that snippet of code to apply to 'mySound'?

4

Howler is a pretty friendly way to get this working. Here's what the code would look like (run as a timeline action at time 0). If this wasn't at time 0, it would probably fail because it doesn't come immediatly after a user action:

var sound1 = new Howl({
  src: ['${resourcesFolderName}/city.mp3', '${resourcesFolderName}/city.ogg' ],
  autoplay: false,
  loop: true,
  volume: 1,
  onend: function() {
    // Do something after audio has ended
  }
});

sound1.play();

// fade in the id 'sound1' from 0 to 1 (1 being 100%) over 2 seconds. 
// Comment the line below to disable fade. 
sound1.fade(0, 1, 2000);

Sound.zip (1.5 MB)

This requires that you either include this tiny 8k library in the 'head' of your Hype document:

<script src="https://cdn.jsdelivr.net/npm/howler@2.2.0/dist/howler.min.js"></script>

Or you drag the file into your resources pane to load it with Hype (this is what I did in the above example).

And fading out would just be .fade(1, 0, 2000) (from 1 to 0 instead of 0 to 1)

For easy adjustments, I feel like having playback, fading and all the controls you would want in a single JS function is an easier way to work with this than jumping between Hype playback and then JS manipulation in separate windows.

2 Likes
5

Thank you @Daniel. I found that if I change the number 2000 to 10000 the fade is smoother. That's cool. I tried to make fade out effect in the last slide but with no success. If I understand right I need just copy and paste the code and change only the numbers from .fade(0, 1, 2000) to .fade(1, 0, 2000) right? I put fadeoutcity() on the beginning of the last scene but the sound didn't stop playing. On the contrary, it continues and I can't stop it even with a simple trigger "Stop Sound...". Where am I wrong?

6

With the howler sound bound to the window, this works better across JS functions:
Sound.hype.zip (1.5 MB)

Initialize, play + fade in:

window.sound1 = new Howl({
  src: ['${resourcesFolderName}/city.mp3', '${resourcesFolderName}/city.ogg' ],
  autoplay: false,
  loop: true,
  volume: 1,
  onend: function() {
    console.log('Finished!');
  }
});

window.sound1.play();

// fade in sound 1 from 0 to 1 over 5 seconds. Comment the line below to disable fade. 
window.sound1.fade(0, 1, 2000);

Fade out:

window.sound1.fade(1, 0, 2000);

4 Likes
7

This is amazing, @Daniel!
Thank you so much!

8

Hey, @Daniel, I found this buttons didn't work on mobile. Is there any solution about that?