jQuery Audio Time Duration Изменение при нажатии на слайдер - PullRequest
Новая
       30

jQuery Audio Time Duration Изменение при нажатии на слайдер

0 голосов
/ 12 марта 2019

Я заметил, что следующий код отлично работает на настольных ПК и ноутбуках, но не на моем мобильном телефоне Android или других мобильных устройствах, чтобы изменить продолжительность песни, когда пользователь нажимает на ползунок: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>

    **//jQuery to detect when user changes the timeline with the seekslider
    $(document).ready(function(){
      $("#seekslider").mouseup(function(e){
                var leftOffset = e.pageX - $(this).offset().left;
                var songPercents = leftOffset / $('#seekslider').width();
                audio.currentTime = songPercents * audio.duration;
            }); 
    });**

Буду признателен, если кто-нибудь поможет мне решить эту проблему с изменением длительности при нажатии на ползунок в jQuery или Javascript.

Ответы [ 3 ]

1 голос
/ 12 марта 2019

Ползунок типа = диапазон имеет 2 события: ввод и изменение.Использование событий мыши или касания может быть полезно, если вы не используете type = range, но вы используете. 

$("#seekslider").on("input",function(e){
    audio.currentTime = this.value * audio.duration;
})

Используйте разумные минимальные и максимальные значения и шаг, поэтому вам не придется много заниматься математикой.

<input id="seekslider" type="range" min="0" max="1" value="0" step=".001">
1 голос
/ 12 марта 2019

Вы не можете использовать mouseup на мобильном телефоне. Вместо этого используйте touchend. Это в основном будет эквивалентом mouseup. Также используйте .on вместо функций-оболочек. Этим вы можете привязать несколько слушателей к одному элементу (touchend и mouseup). 

//jQuery to detect when user changes the timeline with the seekslider
$(document).ready(function(){
    $("#seekslider").on('mouseup touchend',function(e){
        var leftOffset = e.pageX - $(this).offset().left;
        var songPercents = leftOffset / $('#seekslider').width();
        audio.currentTime = songPercents * audio.duration;
     }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>
0 голосов
/ 20 марта 2019

На самом деле это намного проще, чтобы завершить эту функцию в чистом Javascript.Вот что мне нужно было сделать: 

<input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">

Как показано выше, мне просто нужно было настроить вход, чтобы обнаруживать событие «onchange» и запускать функцию «seek ()».

Вот javascript для синхронизации индикатора выполнения с currentTime: 

//set the currentTime to match users click on the progress bar
    function seek(){         
        audio.currentTime = audioSlider.value;          
        play(); 
    }
...