需要显示 javascript 数组的不同部分

Question

你好，我正在尝试制作一个音乐播放器，它可以通过 javascript 播放网站上的歌曲。

我在尝试对数组进行切片以取出歌曲时遇到问题。

var 文件 = ["roc-boys.mp3", // - Jay Z "dirt.mp3", //- 周杰伦 "99.mp3", // - Jay Z "feelin-it.mp3", // - 周杰伦 ];

这就是我布置数组的方式。

function createAudioElements() {
     files = files.slice(5,9);
    for (f in files) {
        var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>";



function createAudioElements() {
           files = files.slice(5,9);
           for (f in files) {
           var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>";

        $("#audio-players").append(audioString);

    }
}


    function createAudioPlayers() {
    for (f in files) {
        var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
        $("#audio-players").append(playerString);
    }
}

这就是将歌曲加载到 html 中的方式。问题是我无法让它在超过 1 div 的情况下工作。

有什么想法吗？？

如果有人知道更简单的解决方案，我们也将不胜感激。

Answer 1

有两个主要问题，如我所说，使用 id 仅适用于第一个元素。您正在使用 slice 函数覆盖全局 files 列表的另一个重要问题。这意味着通过第一次调用 createAudioElments，它会将 files 数组更新为第 5 个到第 9 个元素的新数组，并且通过调用相同或 createAudioPlayers 函数，它将分配一个空数组到 files 变量。请参阅下面的工作示例，如果您有任何其他问题，请告诉我。

var files = new Array(9).fill(1);

function createAudioElements() {
    for (f in files.slice(5,9)) {
           var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>";

        $(".audio-players").append(audioString);

    }
}


function createAudioPlayers() {
    for (f in files.slice(5,9)) {
        var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
        $(".audio-players").append(playerString);
    }
}

createAudioPlayers();
createAudioElements();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audio-players">
  <span>First player</span>
</div>
<div class="audio-players">
  <span>Second player</span>
</div>

需要显示 javascript 数组的不同部分

need to display different parts of a javascript array

javascript

jquery

html5-audio

audio-streaming

web-audio-api