Создание массива с несколькими вариантами для списка воспроизведения музыки

#javascript #jquery #arrays #html #audio

#javascript #jquery #массивы #HTML #Аудио

Вопрос:

Я пытаюсь создать список воспроизведения HTML5, используя тег. Я хочу сохранить все песни, их название, описание и т.д… в массиве. Хотя я не очень хорошо знаю, как использовать массивы.

Сейчас я думаю вот о чем:

 var songBase = '/songs/'
var playlist = {};
playlist = {
                        'Bleeding Love'             :   'Bleeding_love.mp3',
                        'Don't Forget'             :   'Dont_forget.mp3',
                        'Finish'                    :   'Finish.mp3',
                        'In the Rain'               :   'In_the_rain.mp3',
                        'Ready to Fall'             :   'Ready_to_fall.mp3',
                        'Realize'                   :   'Realize.mp3',
                        'Righted All Your Wrongs'   :   'Righted_all_your_wrongs.mp3',
                        'These Walls'               :   'These_walls.mp3'
                    }
  

Что мне действительно нужно, так это иметь более 2 вариантов. Я также даже не знаю, как извлечь какие-либо данные из массива, который у меня уже есть.

Есть идеи?

Ответ №1:

Технически вы используете там объектный литерал ({}), а не массив ([]).

Вы можете использовать массив литералов объектов для своих целей.

 var playlist = [
  {
    name: "Bleeding Love",
    file_name: "Bleeding_love.mp3"
  },
  {
    name: "Don't Forget",
    file_name: "Dont_forget.mp3"
  }
]
  

Затем вы можете получить доступ к ним, например:

 playlist[1].file_name
  

Или в цикле:

 for (var i=0; i<playlist.length; i  ) {   # i is array index
  for (var k in playlist[i]) {            # k is the key
    console.log(k ': ' playlist[i][k]);
  }
}
  

Комментарии:

1.Есть какие-либо идеи, почему это возвращает ошибку Uncaught TypeError: Object #<HTMLAudioElement> has no method 'attr' var $player = $("audio#music-player")[0]; var i = 0; var curSong = playlist[i].src; $(".play-bt").click(function() { $player.attr("src",curSong); });

2. Не без просмотра структуры вашей страницы. Создайте jsfiddle. net и я посмотрю.