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

Posted 2023-02-25

【中文标题】一键事件吼js播放多个音频文件

【英文标题】：Play multiple audio files with one click event howler 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 分配给前端控件。

【参考方案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();
        
    ;