Аудиоплеер html5: воспроизведение с/на дорожки

Я сделал аудиоплеер, который воспроизводит файлы из выпадающего списка, однако мне нужно заставить его воспроизводить файлы, выбранные из одного списка, и продолжать воспроизведение, пока он не достигнет другого выбранного файла в другом списке (например, пользователь нажимает на 2 из First List, и 7 из Second List, и проигрыватель последовательно воспроизводит файлы 2,3,4,5,6,7).

Я добавил еще один список в дополнение к основному списку, но я не уверен, как заставить его воспроизводить файлы из/в выбор. Вот используемый в настоящее время код, который нуждается в редактировании: https://jsfiddle.net/m1Lpg570/

HTML:

<label for = "selection">From:</label>
<select id = "selection">
  <option value = "">- First List -</option>
  <option value = "http://marvelhotelbangkok.com/audio/1.mp3">1</option>
  <option value = "http://marvelhotelbangkok.com/audio/2.mp3">2</option>
  <option value = "http://marvelhotelbangkok.com/audio/3.mp3">3</option>
  <option value = "http://marvelhotelbangkok.com/audio/4.mp3">4</option>
  <option value = "http://marvelhotelbangkok.com/audio/5.mp3">5</option>
</select>

<label for = "selection">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id = "selection">
  <option value = "">- Second List -</option>
  <option value = "http://marvelhotelbangkok.com/audio/6.mp3">6</option>
  <option value = "http://marvelhotelbangkok.com/audio/7.mp3">7</option>
  <option value = "http://marvelhotelbangkok.com/audio/8.mp3">8</option>
</select>

<br/><br/>

<audio id = "player" controls = "controls">
  <source id = "mp3_src" src = "http://marvelhotelbangkok.com/audio/0.mp3" type = "audio/mp3" />
</audio>

JS:

$(document).ready(function() {

  $('#selection').on('change', function() {
    change($(this).val());
  });

});


function change(sourceUrl) {
  var audio = document.getElementById("player");
  var source = document.getElementById("mp3_src");

  audio.pause();

  if (sourceUrl) {
    source.src = sourceUrl;
    audio.load();
    audio.play();
  }
}

javascript html5-audio playlist

03.02.2019 03:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

322

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это то, что вы хотите?

HTML-файл:

<label for = "from">From:</label>
<select id = "from">
  <option value = "">- First List -</option>
  <option value = "0">0</option>
  <option value = "1">1</option>
  <option value = "2">2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
</select>

<label for = "to">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id = "to">
  <option value = "">- Second List -</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
</select>

<br/><br/>

<audio id = "player" controls = "controls">
  <source id = "mp3_src" src = "http://marvelhotelbangkok.com/audio/0.mp3" type = "audio/mp3" />
</audio>

JS-файл

$(document).ready(function() {

    var audioUrls = [
    "http://marvelhotelbangkok.com/audio/0.mp3",
    "http://marvelhotelbangkok.com/audio/1.mp3",
    "http://marvelhotelbangkok.com/audio/2.mp3",
    "http://marvelhotelbangkok.com/audio/3.mp3",
    "http://marvelhotelbangkok.com/audio/4.mp3",
    "http://marvelhotelbangkok.com/audio/5.mp3",
    "http://marvelhotelbangkok.com/audio/6.mp3",
    "http://marvelhotelbangkok.com/audio/7.mp3",
    "http://marvelhotelbangkok.com/audio/8.mp3",
  ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    audio[0].load();
    audio[0].play();
  });

  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");   
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    var to = $("#to").val() || 8;
    if (currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
        audio.data("currentidx", currentIdx)
        audio[0].load();
        audio[0].play();
    }
  })

});

URL

https://jsfiddle.net/0cpjw7rk/12/

Я добавил связанный вопрос, если вы хотите его проверить, я был бы признателен. stackoverflow.com/questions/54509663/…

— 04.02.2019 06:27

03.02.2019 04:13