JQuery аудио контроль положения

Question

У меня есть простой MP3-плеер на основе jquery. Для управления звуком у меня есть этот код:

<input type="range" min="0" max="1" step="0.1"/>

$(document).ready(function() {    
  $(".audio-clip input[type='range']").on("input", function() {
    $(this).parent("div").find("audio")[0].volume = this.value;
  });
});

Интересно, как я могу сделать то же самое, но для управления положением звука с помощью элемента range в песне MP3?

Answer 1

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

Выможно использовать элемент range со значениями от 0 до 100, а затем установить currentTime звука на основе значения в процентах. Также обратите внимание, что вы можете использовать событие timeUpdate для перемещения ползунка диапазона во время воспроизведения файла. Попробуйте это:

<div class="audio-clip">
  <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

  <label>
    Volume:
    <input type="range" class="volume" min="0" max="1" step="0.1" value="1" />
  </label>
  <label>
    Position:
    <input type="range" class="position" min="0" max="100" step="1" value="0" />
  </label>
</div>

$(".audio-clip .volume").on("input", function() {
  var audio = $(this).closest("div").find("audio")[0];
  audio.volume = this.value;
});

$('.audio-clip .position').on('input', function() {
  var audio = $(this).closest("div").find("audio")[0];
  audio.currentTime = (audio.duration / 100) * this.value;
});

$('audio').on('timeupdate', function() {
  var pc = (audio.currentTime / audio.duration) * 100;
  $(this).closest('div').find('.position').val(pc);
})

Обратите внимание, что пример не будет работать во фрагменте из-за междоменного источника звука, однако он работает в скрипке, как вы можете видеть по ссылке ниже:

Рабочий пример