CODEWITHSUNDEEP
phpjqueryhtmlaudio
johnlopev
johnlopev

Reputation: 97

How to get the audio current time and show message using jquery

I need help. I want to get the html5 audio current time and display a message with the specified time.

I pulled some codes from the internet. Please see the code below.

HTML

<audio id="track" controls><source src="[sourceToAudioFile]" type="audio/mpeg"></audio> 
<input type="text" id="currentTime">
<div id="message"></div>

JAVASCRIPT:

<script type="text/javascript">
        $(document).ready(function () {

            var audio = document.getElementById('track');
            audio.addEventListener('timeupdate', function () {
                var currentTimeS = audio.currentTime;
                //console.log(currentTimeMs);

                $('#currentTime').val(currentTimeS);

                var current = $('#currentTime').val();
                var timeset = 1.694568; //this might be changed

                $('#timeset').text(current);

                if (current === timeset) {
                    $("#message").text('Equal time!');
                }

            }, false);

        });

    </script>

My problem is I cannot able to display the message with the specified time.

Here is my working example. Please check.

jsFiddle

Any idea what is wrong with this code? I really appreciate your help out there. Thank you so much in advance.

Upvotes: 2

Views: 2054

Answers (2)

Rohit416
Rohit416

Reputation: 3486

I have made some changes in JavaScript section of the code..

<script type="text/javascript">
    $(document).ready(function () {
        var audio = document.getElementById('track');
        audio.addEventListener('timeupdate', function () {
            var timeSet = 1.694568;
            var _currentTime = parseFloat(audio.currentTime);                

            $('#currentTime').val(_currentTime);
            $('#timeset').text(_currentTime);

            if (_currentTime === timeSet) {
                $("#message").text('Equal time!');
            }

        }, false);

    });
</script>

Let me know if it works for you. Besides it is not necessary to use parseFloat() here because you have set the value in timeSet which is already in proper fractional format. I added it for making sure comparison works always because of === operator which will not do type conversion. It would be more handy if the fractional value was written as a string i.e. "1.694568".

Update:

For checking the value like exact 10 seconds, you can compare the result with currentTime using Math.round() which is rather easy than comparing it with a fractional value like 1.694568 because of the interval step of currentTime.

$(document).ready(function () {
    var audio = document.getElementById('track');
    audio.addEventListener('timeupdate', function () {
      var timeSet = 10;
      var _currentTime = Math.round(audio.currentTime);

      $('#currentTime').val(_currentTime);
      $('#timeset').text(_currentTime);

      if (_currentTime === timeSet) {
        $("#message").text('Equal time!');
      }
    }, false);
});

Here is the updated fiddle.

Upvotes: 2

johnlopev
johnlopev

Reputation: 97

@Rohit416 Thank you so much for helping me get through with this. I added Math.round so I can get the exact value of integer to display the message.

 $(document).ready(function () {
        var audio = document.getElementById('track');
        audio.addEventListener('timeupdate', function () {
          var timeSet = 5;
          var _currentTime = Math.round(audio.currentTime);

          $('#currentTime').val(_currentTime);
          $('#timeset').text(_currentTime);

          if (_currentTime === timeSet) {
            $("#message").text('Equal time!');
          }else{
            $("#message").text('NO');
          }

        }, false);

    });

Here is the updated working example: UPDATED Fiddle

Upvotes: 1

Related Questions