一键事件吼js播放多个音频文件答案

【问题标题】：Play multiple audio files with one click event howler js一键事件吼js播放多个音频文件
【发布时间】：2016-08-03 23:03:35
【问题描述】：

Wordpress 网站。脚本排队等。我能够在没有数组的情况下播放单个音频文件。

虽然用了这个...

(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);

我一直得到 sound_files.play is not a function 错误。

如何通过单击按钮同时触发 sound1、sound2 和 sound3？

【问题讨论】：

那是因为你还没有在sound_files 上定义一个名为play 的函数。您需要致电sound_files.sound1.play(); sound_files.sound2.play(); 等或iterate over the object 并以这种方式播放。
感谢 mike...利用您的评论以及您提供的链接和来自 FrankerZ 的代码。
你也可以添加完整的解决方案
请参阅下面的批准答案。这不是 wordpress 修复的复制和粘贴类型，而是通过音频声明循环然后 js 分配给前端控件。

标签： javascript jquery audio

【解决方案1】：

sound_files 是一个对象，所以不能简单地对它们调用.play()。

你需要循环播放它们：

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

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

【讨论】：

搞定了...仍在学习，但很快就能轻松掌握概念

【解决方案2】：

或者你可以...

    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();
        }
    };

【讨论】：