Search code examples
javascripthowler.js

How to Implement Seek Function With Howler JS


I am trying to implement the seek() function using howler.js, but I can't figure out how to implement it. I'm a novice javascript programmer, so it's probably something simple, but I can't find any useful examples elsewhere. My code works as expected otherwise, I just want to add the ability to start the audio playing at times other than the beginning. For example, when a sound starts, it might begin at four seconds in instead of 0. sound.seek([300], id2); is what I'm trying to implement below.

<script src="js/howler.core.js"></script>
<link rel="stylesheet" href="css/styles.css">

<script>
    // 01 /////////////////////////////


    (function looper() {
        var aStartMin = 0
        var aStartMax = 19000
        var aFadeIn = 300
        var aFadeOut = 300
        var aPlayDurationMin = 6000
        var aPlayDurationMax = 21000
        var aWaitToPlay = 0
        var maxVolume = 1
        var numberOfSounds = 0;
        var maxNumberOfSounds = 5;

        loop('audio/STE-059_full length.wav'); // Call the loop and give it the sound variable we want.

        function loop(soundFileName) {

            var rand = Math.round(Math.random() * aStartMax) + aStartMin;

            // plays sound right away
            if (numberOfSounds < 1) {

                setTimeout(function () {

                    numberOfSounds++; 
                    console.log('Number of sounds is now: ' + numberOfSounds);
                    //print this so we know how many there are.

                    playDuration = Math.floor((Math.random() * aPlayDurationMax) + aPlayDurationMin); // so we set it first above, but then each time here

                    setTimeout(function () {
                        if (numberOfSounds < maxNumberOfSounds) { //Don't create more than the max number of sounds.
                            var sound = getSound(soundFileName);

                            sound.seek([300], id2);
                            // I've also tried:
                            //sound.seek([300]);
                            //sound.seek(300);
                            //and I've tried this code in other locations

                            sound.volume(1.0);

                            var id2 = sound.play();


                            sound.fade(0, maxVolume, aFadeIn, id2); // FADE IN
                            //var id1 = sound.play(); 


                            setTimeout(function () {
                                sound.fade(maxVolume, 0, aFadeOut, id2); // FADE OUT
                                numberOfSounds--; //when it fades out subtract one

                                // Attempt to clean up the sound object
                                setTimeout(function () {
                                    sound.stop();
                                    sound.unload();
                                }, aFadeOut + 1000);


                                console.log('Number of sounds is now: ' + numberOfSounds);
                            }, playDuration); // PLAY TIME
                        }
                    }, aWaitToPlay); // WAIT TIME
                    loop(soundFileName); // calls the loop function again
                }, 0);

            }

            else {
                setTimeout(function () {

                    playDuration = Math.floor((Math.random() * aPlayDurationMax) + aPlayDurationMin); // so we set it first above, but then each time here

                    setTimeout(function () {
                        if (numberOfSounds < maxNumberOfSounds) { //Don't create more than the max number of sounds.
                            var sound = getSound(soundFileName);
                            numberOfSounds++; // adding 1 to the variable. Keeps track of how many sounds are currently running.
                            console.log('Number of sounds is now: ' + numberOfSounds);
                            sound.volume(1.0);

                            var id2 = sound.play();
                            sound.fade(0, maxVolume, aFadeIn, id2); // FADE IN
                            //var id1 = sound.play(); 

                            setTimeout(function () {
                                sound.fade(maxVolume, 0, aFadeOut, id2); // FADE OUT
                                numberOfSounds--; //when it fades out subtract one

                                // Attempt to clean up the sound object
                                setTimeout(function () {
                                    sound.stop();
                                    sound.unload();
                                }, aFadeOut + 1000);


                                console.log('Number of sounds is now: ' + numberOfSounds);
                            }, playDuration); // PLAY TIME
                        }
                    }, aWaitToPlay); // WAIT TIME
                    loop(soundFileName); // calls the loop function again
                }, rand);
            }
        };

        function getSound(soundFileName) { // this function is needed to play, but is it poluting namespace? what if I add more sound functions?
            return new Howl({
                src: [soundFileName], // code seems to break when sound is shorter than time variable 
                autoplay: true,
                loop: true,
                volume: 0,
                fade: 0 // removes the blip
            });
        }
    })();



</script>

<script src="js/howler.core.js"></script>
<script src="js/siriwave.js"></script>
<script src="js/player.js"></script>


Solution

  • Two issues:

    1. You are passing an array into seek instead of a numerical value. If you want to seek to 4 seconds, you should do:
    sound.seek(4000, id2);
    
    1. You are calling seek with an ID that hasn't yet been set. id2 is defined after you call seek. You should be calling it as such:
    var id2 = sound.play();
    sound.seek(4000, id2);