Question

我在使用WinJS的Javascript Windows应用程序中有一个按钮网格。

    <div class="padtable">
        <button class="pad" id="pad11">Empty</button>
        <button class="pad" id="pad12">Empty</button>
        <button class="pad" id="pad13">Empty</button>
        <button class="pad" id="pad14">Empty</button><br />
        <button class="pad" id="pad21">Empty</button>
        <button class="pad" id="pad22">Empty</button>
        <button class="pad" id="pad23">Empty</button>
        <button class="pad" id="pad24">Empty</button><br />
        <button class="pad" id="pad31">Empty</button>
        <button class="pad" id="pad32">Empty</button>
        <button class="pad" id="pad33">Empty</button>
        <button class="pad" id="pad34">Empty</button><br />
        <button class="pad" id="pad41">Empty</button>
        <button class="pad" id="pad42">Empty</button>
        <button class="pad" id="pad43">Empty</button>
        <button class="pad" id="pad44">Empty</button><br />
    </div>

然后我尝试循环浏览所有按钮，如果它与文件相关联，我会尝试将文件作为音频标记，并将其附加到它。除了获取文件花费的时间太长，因此它不会将音频标签附加到每个按钮，而是将所有音频标签附加到最后一个按钮。我该如何解决这个问题？以下是执行追加的代码：

var pads = document.querySelectorAll(".pad");
            // Cycle through all pads, attaching audio tags where mappings exist
            for (var padCount = 0; padCount < pads.length - 1; padCount++) {
                // Find out if the mapping exists
                var fileMappingExists = false;
                if (fileMappings[pads[padCount].id] != null) {
                    fileMappingExists = true;
                }

                // If the file mapping exists, get the file from the FAL, and create audio tags tied to their respective buttons
                if (fileMappingExists) {
                    Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.getFileAsync(fileMappings[pads[padCount].id].audioFile).done(function (audioFile) {
                        if (audioFile) {
                            var audioId = "audioPlayer_" + pads[padCount].id;
                            var audioPlayer = document.createElement('audio');
                            audioPlayer.setAttribute("id", audioId);
                            audioPlayer.setAttribute("controls", "true");
                            audioPlayer.setAttribute("style", "display:none;");
                            audioPlayer.setAttribute("msAudioCategory", "SoundEffects");
                            audioPlayer.src = URL.createObjectURL(audioFile, { oneTimeOnly: true });
                            document.getElementById(pads[padCount].id).appendChild(audioPlayer);
                            audioPlayer.load();

                            // Assign button click to song play
                            // TODO | BUG: Click events and audio tags are only assigned to last pad because of getFileAsync
                            var pad = document.getElementById(pads[padCount].id);
                            pad.addEventListener("click", function () {
                                // Set audio to start if it's already playing
                                if (audioPlayer.currentTime != 0)
                                    audioPlayer.currentTime = 0;

                                // Play the file
                                audioPlayer.play();
                            }, false);

                            WinJS.log && WinJS.log("Audio file was added successfully for" + pads[padCount].id, "sample", "status");
                        }
                        else {
                            document.getElementById("output").innerText += "\nAudio file not found for " + pads[padCount];
                        }
                    });


         }
}

Answer 1

要了解这里发生了什么，请阅读this

以下是解决问题的一种方法：

// If the file mapping exists, get the file from the FAL, and create audio tags tied to their respective buttons
if (fileMappingExists) {
    Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.getFileAsync(fileMappings[pads[padCount].id].audioFile).done(
        (function (pc) {
            return function (audioFile) {
                if (audioFile) {
                    var audioId = "audioPlayer_" + pads[pc].id;
                    var audioPlayer = document.createElement('audio');
                    audioPlayer.setAttribute("id", audioId);
                    audioPlayer.setAttribute("controls", "true");
                    audioPlayer.setAttribute("style", "display:none;");
                    audioPlayer.setAttribute("msAudioCategory", "SoundEffects");
                    audioPlayer.src = URL.createObjectURL(audioFile, { oneTimeOnly: true });
                    document.getElementById(pads[pc].id).appendChild(audioPlayer);
                    audioPlayer.load();

                    // Assign button click to song play
                    // TODO | BUG: Click events and audio tags are only assigned to last pad because of getFileAsync
                    // FIXED AS WELL
                    var pad = document.getElementById(pads[pc].id);
                    pad.addEventListener("click", (function (ap) {
                        return function () {
                            // Set audio to start if it's already playing
                            if (ap.currentTime != 0)
                                ap.currentTime = 0;

                            // Play the file
                            ap.play();
                        };
                    })(audioPlayer), false);

                    WinJS.log && WinJS.log("Audio file was added successfully for" + pads[pc].id, "sample", "status");
                }
                else {
                    document.getElementById("output").innerText += "\nAudio file not found for " + pads[pc];
                }
            };
        })(padCount);
    );
}

getFileAsync太慢，导致appendChild追加到数组中的最后一个div

1 个答案: