необходимо отображать различные части массива javascript

Question

Привет Я пытаюсь создать музыкальный плеер, который будет воспроизводить песни на веб-сайте с помощью javascript.

У меня возникают проблемы, когда я пытаюсь разрезать массив, чтобы вынуть песни.

вар файлов = [ "Рух-boys.mp3", // - Jay Z "dirt.mp3", // - Jay Z "99.mp3", // - Jay Z «чувствую-это .mp3 ", // - Jay Z ];

так вот, как у меня есть массив.

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

Есть две серьезные проблемы, как я уже сказал, использование идентификатора будет работать только с первым элементом. Еще одна важная проблема, что вы переопределяете глобальный список files с помощью функции slice. Это означает, что, вызвав сначала 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>