如何使用 jquery 获取音频当前时间并显示消息

Posted 2023-02-25

【中文标题】如何使用 jquery 获取音频当前时间并显示消息

【英文标题】：How to get the audio current time and show message using jquery

【发布时间】：2015-12-11 03:17:32

【问题描述】：

我需要帮助。我想获取html5音频当前时间并显示指定时间的消息。

我从互联网上提取了一些代码。请看下面的代码。

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>

我的问题是我无法在指定的时间显示消息。

这是我的工作示例。请检查。

jsFiddle

知道这段代码有什么问题吗？我真的很感谢你的帮助。非常感谢您。

【问题讨论】：

这段代码遇到了什么问题？

@Rohit416 我无法显示指定时间的消息。

【参考方案1】：

我对代码的JavaScript 部分进行了一些更改..

<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>

让我知道它是否适合您。此外，这里没有必要使用parseFloat()，因为您已经在timeSet 中设置了正确的小数格式的值。我添加它是为了确保比较始终有效，因为 === 运算符不会进行类型转换。如果将小数值写成字符串，即"1.694568"，会更方便。

更新：

要检查精确值10 秒，您可以使用Math.round() 将结果与currentTime 进行比较，这比将其与像1.694568 之类的小数值比较容易，因为@987654334 的间隔步长@。

$(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);
);

这里是updated fiddle。

【讨论】：

我检查了控制台语句，似乎_currentTime 从未与timeSet 的确切值匹配，这可能是由于搜索栏的间隔步骤。

否则代码没有任何问题，但几乎不需要修改，因为必须匹配 timeSet 的确切小数值。请寻找资源。检查console output in this updated fiddle。

那么，我怎样才能使它与音频的当前时间相等？如果有人还可以解决如何使其成为精确的秒数，则似乎存在当前时间的十进制值。非常感谢您的帮助。

我想要一个确切的数字，比如 10 秒。实际上它会根据我喜欢设置而改变。

【参考方案2】：

@Rohit416 非常感谢你帮助我解决这个问题。 我添加了Math.round，这样我就可以获得整数的确切值来显示消息。

 $(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);

    );

这是更新后的工作示例：UPDATED Fiddle