Как сделать выпадающий список треков?

Question

[German_Berg]

Ранее я задавал похожий вопрос, но результаты меня не устраивают либо идеи мне не подходят. Поэтому появилась идея с выпадающим списком треков. Ребята, прошу помощи! Скоро юбилей, нужно завершить мою работу, а идеи кончаются! (я звукарь)
Собственно есть код:

function play_sound_1(){

var audio1 = new Audio 
audio1.src = '../audio/1.mp3';  
//audio1.src = '../audio/2.mp3';  // 
audio1.autoplay = true;

}

Как из этого сделать выпадающий список с треком номер 1 и номер 2
Если выбрать трек 1 (при нажатии на body "onclick='play_sound_1()' ") играет трек 1 если выбрать из списка трек 2, нужно что бы при нажатии на body играл трек 2, а первый отключался.
Очень прошу помощи!

В итоге спустя некоторое время, собрал такую конструкцию, но треки запускаются рандомно, а как сделать выбор треков?

var audio1 = new Audio  

var fileUrl=[];
fileUrl[0]="../audio/2.mp3";
fileUrl[1]="../audio/1.mp3"; 
var i = Math.floor(Math.random() * fileUrl.length);
var out = fileUrl[i] ;   
 
  
audio1.src = out;

audio1.autoplay = true;

Comments

[Andrew]

Вместо i подставить нужный индекс?
Раз вас сроки поджимают и вы не в состоянии(может пока) сделать не тяжелую задачу, может стоило раскошелиться на 100-500 рублей и закинуть ТЗ на биржу? Или юбилей того не стоит?

[German_Berg]

Andrew, Вы правы! Сроки поджимают. Программа уже собрана и при желании, я могу просто менять треки в папке.

Выпадающий список нужен лишь для удобства и быстрого переключения треков. А вот по поводу биржи, впервые слышу. Да и потом, если я воспользуюсь этим сервисом, как же я могу обучаться JavaScript если получу уже готовый код. Я предпочитаю работать головой, а не кошельком. Надеюсь не обидел Вас мой ответ. И да, Ваш вариант я не понял. Что Вы имели ввиду, поставить нужный индекс? ID кнопки или что?

[Andrew]

German_Berg,
вот рандом

var i = Math.floor(Math.random() * fileUrl.length);
var out = fileUrl[i] ;

При вызове вместо i вам нужно value выпадающего, в котором будет хранится индекс с нужным сейчас треком.
Круто что вы решили подучить, но я бы тогда не ставил сроки(даже себе)

[German_Berg]

Andrew, Спасибо. Попробую.

Answer 1

[FeST1VaL]

Так?

Comments

[German_Berg]

Да спасибо, но почему то не воспроизводятся треки

[FeST1VaL]

German_Berg, ну возможно я косяк... взял ваш код за основу и немного ошибся, попробуйте изменить audio.play = true; на audio.play();. Я просто не могу щяс проверить с наушниками)

[German_Berg]

Все работает, теперь буду допиливать остальные задумки! Вам спасибо большое! Вы голова!

[Алексей Ярков]

German_Berg, если ответ помог, то отметьте его, пожалуйста, решением.

Answer 2

[Пашенька]

1. Заверстайте (для начала хардкодом) список треков. На сам список повесьте слушатель клика, внутри обработчика клика определите индекс элемента, по которому кликнули и вызовите с ним функцию из п.2.
2. Напишите функцию, которая будет принимать аргумент i - индекс, описанный выше. В ней треку устанавливаете .src = fileUrl[i]; и вызываете метод .play();