Js获取audio时长及自定义修改样式

最新推荐文章于 2024-05-15 20:43:52 发布

CV章鱼烧

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量1.1k

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45844542/article/details/115667415

版权

如图效果图：

在这里插入图片描述

需要将上面图中的时间进行样式修改，

需求有几点：一、显示总的时长，二、显示播放时间，三、需要已进入到页面就显示时间，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <audio id="audio" onondurationchange="audio()" controls>
    <source src="http://labs.qnimate.com/files/ogg.ogg" type="audio/ogg">
    <source src="http://labs.qnimate.com/files/mp3.mp3" type="audio/mpeg">
  </audio>
  <br>
  <span id="tiem"></span>
  <button onclick="playMusic();">播放</button>
<script>
  // 时间
  function musicTime() { 
    var audio = document.getElementById("audio")
    var timeCount = Math.floor(audio.currentTime) // 总时长秒数
    var minutes = parseInt(audio.duration / 60); // 获取总时长分钟
    var seconds = parseInt(audio.duration % 60); // 获取总时长秒数
    var timeMinute =  Math.floor(timeCount / 60) // 当前播放进度 分
    var timeDisplay = Math.floor(audio.currentTime % 60); // 当前播放进度 秒
    var secondsTime = timeDisplay < 10 ? '0' + timeDisplay : timeDisplay // 秒
    $("#tiem").html( timeMinute + ':'+ secondsTime  + "/" + minutes + ":" + seconds);
  }
  //第一种
  audio.ondurationchange = function() { // 监听音频时长加载完成触发
    musicTime();
  }
  //第二种
  // function audio() { // 监听音频时长加载完成触发
  //   musicTime();
  // }
  // 播放
  function playMusic() {
    var audio = document.getElementById("audio")
    if (audio.paused) {
      audio.play();
      console.log("播放")
    } else {
      audio.pause();
      console.log("暂停")
    }
    tiem();
  }
  // 时间
  function tiem() {
    var audio = document.getElementById("audio")
    if (audio.readyState > 0) {
      audio.addEventListener("timeupdate", function() {
        musicTime();
      }, false)
    }
  }
</script>
</body>
</html>

效果图如下：

在这里插入图片描述

代码中的第一种方法和第二种方法可选其一，针对不同的项目进行改动。

CV章鱼烧

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Js获取audio时长及自定义修改样式

如图效果图：需要将上面图中的时间进行样式修改，需求有几点：一、显示总的时长，二、显示播放时间，三、需要已进入到页面就显示时间，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫