Question

我正在尝试将复选框创建的数组值发送到“buzz”声音对象的构造函数。代码遵循。

<input type="checkbox" name="loops" value="drums01" id="drums01" class="Checkbox" > Drums #1</li>
<li><input type="checkbox" name="loops" value="drums02" id="drums02" class="Checkbox"> Drums #2</li>
<li><input type="checkbox" name="loops" value="guitar01" id="guitar01" class="Checkbox"> Guitar #1</li>
//CHECKBOXES

<button class="button button_type_sound" id="b01">Play<q class="key" id="key_q">Q</q></button>
//BUTTON

var arr = new Array();

var drums01 = new buzz.sound("drumloop01", {
    formats: [ "wav" ],
    preload: true,
    autoplay: false,
    loop: true
});

var drums02 = new buzz.sound("drumloop02", {
    formats: [ "wav" ],
    preload: true,
    autoplay: false,
    loop: true
});

var guitar01 = new buzz.sound("guitarloop01", {
    formats: [ "wav" ],
    preload: true,
    autoplay: false,
    loop: true
});


//ATTEMPT TO CREATE SOUND OBJECT FROM ARRAY AND PLAY IT 
$("#b01").click(function(event){
    event.preventDefault();

    var arr = new Array( $("input:checkbox:checked").map(function(){
        return this.value;
    }).toArray());

    console.log(arr.toString());

    console.log("Try Playing Sound");
    console.log(arr.toString());

    var myGroup = new buzz.group(arr.toString());
myGroup.play();
});

控制台给我以下错误：

drums01,drums02 index.html:68
Try Playing Sound index.html:71
drums01,drums02 index.html:72
Uncaught TypeError: Cannot call method 'apply' of undefined

Answer 1

尝试这样的事情：

$(document).ready(function () {

    var drums01 = new buzz.sound("drumloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    var drums02 = new buzz.sound("drumloop02", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    var guitar01 = new buzz.sound("guitarloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    //ATTEMPT TO CREATE SOUND OBJECT FROM ARRAY AND PLAY IT 
    $("#b01").click(function (event) {
        event.preventDefault();

        var arr = new Array();

        $('input[type="checkbox"]').each(function () {
            arr.push($(this).val());
        });

        console.log(arr.toString());


        console.log("Try Playing Sound");
        console.log(arr.toString());

        var myGroup = new buzz.group(arr.toString());
        myGroup.play();

    });
});

让我知道它是如何运作的。

fiddle

Answer 2

据我所知，要创建一个buzz.group，我们应该传递数组而不是字符串：

可以通过将数组传递给构造函数来将声音添加到组中。

但是你传递了字符串，所以它应该是这样的：

var myGroup = new buzz.group([ 
    mySound1, 
    mySound2, 
    mySound3
]);

我改变你的小提琴例子：

$(document).ready(function () {
    var drums = {};
    drums.drums01 = new buzz.sound("drumloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    drums.drums02 = new buzz.sound("drumloop02", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    drums.guitar01 = new buzz.sound("guitarloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    $("#b01").click(function (event) {
        event.preventDefault();

        var arr = new Array();

        $('input[type="checkbox"]:checked').each(function () {
            arr.push(drums[$(this).val()]);
        });

        var myGroup = new buzz.group(arr.toString());
        myGroup.play();
    });
});

检查新的DEMO。

你的代码中有

问题，你将变量名作为字符串数组传递，而你应该传递实际的对象。要解决您的问题，您应该使用var drums = {}等上下文对象中的access来访问它们，您可以在匿名函数中使用它。

对于mor信息，请检查此link。

Answer 3

这是一个工作小提琴，用于修复您在问题中发布的代码。 http://jsfiddle.net/fmKeV/3/

说明

正如您所看到的，在“init部分”中，我创建了一个buzz.sound实例的对象文字。然后，在按钮的事件处理程序中，我将每个选中的复选框映射到相应的声音（我更改了输入元素的值，使其与buzzSounds对象中的键相同）。您的代码中new Array中的new Array($() ... .toArray())不是必需的。调用toArray()函数结果的map方法就足够了，否则结果将是嵌套数组，这不是buzz.group函数所需要的。

代码

标记

<ul class="sounds">
    <li>
        <input type="checkbox" name="loops" value="drumloop01" id="drums01" class="Checkbox" />Drums #1</li>
    <li>
        <input type="checkbox" name="loops" value="drumloop02" id="drums02" class="Checkbox" />Drums #2</li>
    <li>
        <input type="checkbox" name="loops" value="guitarloop01" id="guitar01" class="Checkbox" />Guitar #1</li>
</ul>
<button class="button button_type_sound" id="b01">Play
    <q class="key" id="key_q">Q</q>
</button>

的Javascript

$(document).ready(function() {
    // init sounds
    var buzzSounds = {};

    buzzSounds.drumloop01 = new buzz.sound("drumloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    buzzSounds.drumloop02 = new buzz.sound("drumloop02", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    buzzSounds.guitarloop01 = new buzz.sound("guitarloop01", {
        formats: ["wav"],
        preload: true,
        autoplay: false,
        loop: true
    });

    //CLICK EVENT HANDLER
    $("#b01").on('click', function(e) {
        var sounds, group;

        //0) Prevent default
        e.preventDefault();

        //1) map every selected element to the sound defined in the "buzzSounds" object
        toPlay = $(".sounds input:checkbox:checked").map(function() {
            return buzzSounds[this.value];
        }).toArray();

        //2) create a group from the collected buzz.sound instances
        myGroup = new buzz.group(toPlay);

        //3) play the group
        console.log("Try Playing Sounds", toPlay, myGroup);
        try {
            myGroup.play();
        } catch (e) {
            console.log('uh-oh', e);
            //in this example the sound files have not been loaded, so an error could be raised
        }

    });
});

将数组发送到JQuery中的对象构造函数

3 个答案:

说明

代码

标记

的Javascript