Play multiple audio files with one click event howler js

Question

Wordpress website. Scripts enqueued etc. I was able to get a single audio file to play without the array.

After using this though...

(function( $ ) {
'use strict';

jQuery(window).load(function() {
    var sound_files = {
            sound1 : new Howl({
                src: ['/synthv2.mp3'],
                loop: true
            }),
            sound2 : new Howl({
                src: ['/synthv2.mp3'],
                loop: true
            }),
            sound3 : new Howl({
                src: ['/synthv2.mp3'],
                loop: true
            })
        };
    var play_button = $('#play-button'),
        pause_button = $('#pause-button'),
        shift_preset = $('#preset-changer'),

    play_button.click(function() {
        sound_files.play();
    });
});

})(jQuery);

I consistently get sound_files.play is not a function errors.

How can I trigger sound1, sound2, and sound3 all at the same time with a single button click?

That's because you haven't defined a function called `play` on `sound_files`. You need to either call `sound_files.sound1.play(); sound_files.sound2.play();` etc. or [iterate over the object](http://stackoverflow.com/q/8312459/371184) and play them that way. — Mike Cluck, Aug 03 '16 at 23:06
thanks mike...utilized your comment in conjunction with the link you provided and the code from FrankerZ. — user3549735, Aug 03 '16 at 23:53
Please see the approved answer below. It's not a copy and paste type of wordpress fix, but a loop through audio declaration then js assign to the front end controls. — user3549735, Feb 21 '17 at 01:06

score 1 · Accepted Answer · answered Aug 03 '16 at 23:06

1

sound_files is an object, so you can't simply call .play() on them.

You would need to loop through them, and play them all:

for (var prop in sound_files) {
    // skip loop if the property is from prototype
    if(!sound_files.hasOwnProperty(prop)) continue;

    sound_files[prop].play();
});

answered Aug 03 '16 at 23:06

Blue

22,608
7
62
92

nailed it...still learning, but very quick and easy concept to get – user3549735 Aug 03 '16 at 23:51

score 1 · Answer 2 · answered Aug 03 '16 at 23:16

or you could...

    var sound_files = {
        sound1 : new Howl({
            src: ['/synthv2.mp3'],
            loop: true
        }),
        sound2 : new Howl({
            src: ['/synthv2.mp3'],
            loop: true
        }),
        sound3 : new Howl({
            src: ['/synthv2.mp3'],
            loop: true
        }),
        play: function(){
            this.sound1.play();
            this.sound2.play();
            this.sound3.play();
        }
    };

Play multiple audio files with one click event howler js

2 Answers2