首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何展示自定义音频播放器的当前时间和总时长?

要展示自定义音频播放器的当前时间和总时长,可以通过以下步骤实现:

  1. 首先,需要使用HTML5的<audio>标签来创建音频播放器。例如:
代码语言:txt
复制
<audio id="myAudio" src="audio.mp3"></audio>
  1. 在JavaScript中,可以使用currentTime属性获取当前播放时间,使用duration属性获取总时长。例如:
代码语言:txt
复制
var audio = document.getElementById("myAudio");
var currentTime = audio.currentTime;
var duration = audio.duration;
  1. 将获取到的当前时间和总时长进行格式化,以便更好地展示给用户。可以使用以下函数将时间转换为分:秒的格式:
代码语言:txt
复制
function formatTime(time) {
  var minutes = Math.floor(time / 60);
  var seconds = Math.floor(time % 60);
  return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
  1. 在页面中创建用于展示当前时间和总时长的元素,例如两个<span>标签:
代码语言:txt
复制
<span id="currentTime"></span> / <span id="totalTime"></span>
  1. 在JavaScript中,将格式化后的当前时间和总时长设置给对应的元素:
代码语言:txt
复制
var currentTimeElement = document.getElementById("currentTime");
var totalTimeElement = document.getElementById("totalTime");

audio.addEventListener("timeupdate", function() {
  currentTimeElement.textContent = formatTime(audio.currentTime);
  totalTimeElement.textContent = formatTime(audio.duration);
});
  1. 最后,可以通过CSS样式来美化展示当前时间和总时长的元素,使其更符合自定义音频播放器的设计。

这样,就可以展示自定义音频播放器的当前时间和总时长了。

注意:以上代码示例仅为演示展示当前时间和总时长的基本实现方式,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML5 VideoAPI,打造自己Web视频播放器

本文将使用HTML5提供VideoAPI做一个自定义视频播放器,需要用到HTML5提供video标签、以及HTML5提供对JavascriptAPI扩展。 ?...meta:告诉浏览器先获取音频文件开头数据块,从而足以确定一些基本信息(比如音频时长) none:**告诉浏览器不必预先下载。恰当地利用这些值,可以节省带宽。...二、打造自己播放器 我们使用JavaScript控制播放控件行为(自定义播放控件),实现如下功能: 利用HTML+CSS制作一个自己播放控件条,然后定位到视频最下方 视频加载loading效果...播放、暂停 时长当前播放时长显示 播放进度条 全屏显示 1.播放控件 视频播放器 <div class...} else { video.pause(); } this.classList.toggle("fa-pause"); }; 5.时长当前播放时长显示

4.9K40
  • 零基础读懂视频播放器控制原理: ffplay 播放器源代码分析

    但实际上,对每一帧显示时间精确控制是很难,更何况音频视频解码所需时间不同,极容易引起音视频在时间不同步。 所以,播放器具体是如何做音视频同步呢?...视频可以理解为诸多音频帧、视频帧字幕帧在时间序列,他们在时间时长,跟视频时长是相同,但是由于每个帧解码时间不同,必然会导致他们在每帧时间间隔不相同。...所以结论是,三者在视频时长上播放帧数肯定是不一样。 4.视频播放就是一系列连续帧不停渲染。对视频控制操作包括:暂停播放、快进后退。...我们可以看到绝大部分播放器,快进/倒退都是以时长为步进,我们可以看看ffplay是怎么样,以及是如何实现。...其实视频是具备一定长度播放流,具体可以分为音频流、视频流字幕流,三者同时在一起播放形成了视频,当然他们播放时间是跟视频文件播放时长是一样

    20.1K93

    基于Qt音乐播放器(一)添加音频文件,播放音乐,更新进度条

    GitHub,需要自行下载 1.实现音频文件对话框(QFileDialog类) 其他应用程序一样,我们希望通过点击文件并打开文件对话框,选择要播放音频文件,下面我们来实现它。...=QMediaPlayer::PlayingState) { playlist->setCurrentIndex(0); } player->state()会返回当前播放器状态,:PlayingState...3.实现进度条更新以及文件时长显示 在ui界面拖入Horizontal Bar进度条tabel(显示文件时长) 添加相关定义自定义槽函数: mainwindow.h //类中添加 private...,更新当前播放文件名显示 //播放文件数据大小信号, 它可以获得文件时间长度。...mainwindow.cpp //构造函数中添加 //通过播放器发出信号调用自定义槽函数 信号是播放器自动触发 connect(player,SIGNAL(positionChanged(qint64

    2.1K60

    基于Qt音乐播放器(一)添加音频文件,播放音乐,更新进度条

    1.实现音频文件对话框(QFileDialog类) 其他应用程序一样,我们希望通过点击文件并打开文件对话框,选择要播放音频文件,下面我们来实现它。...=QMediaPlayer::PlayingState) { playlist->setCurrentIndex(0); } player->state() 会返回当前播放器状态,:PlayingState...3.实现进度条更新以及文件时长显示 在ui界面拖入Horizontal Bar进度条tabel(显示文件时长) 添加相关定义自定义槽函数: mainwindow.h //类中添加 private...,更新当前播放文件名显示 //播放文件数据大小信号, 它可以获得文件时间长度。...mainwindow.cpp //构造函数中添加 //通过播放器发出信号调用自定义槽函数 信号是播放器自动触发 connect(player,SIGNAL(positionChanged(qint64

    6K51

    怎么用 JavaScript 构建自定义 HTML5 视频播放器

    在这个教程中,我将会带你使用 JavaScript 构建一个自定义视频播放器。目标是如何利用浏览器 HTML5 Media API 来提升默认设置体验。...展示视频持续时间经过时间 展示视频时长很必要,因为这是用户首先想看到,所以我们接下来将讲解。 下面是持续时长经过时间元素标记: <!...这个属性表示是视频秒数,所以在展示之前,我们需要将其转换成分秒。...在上面代码片段中,你可以找到所有相关音频控件标记。我们有一个按钮,根据视频音频状态展示一个控制音频范围 input 元素。...首先,当 #volume 元素值发生更改,我们要做就是更改视频音频大小。我们也要更新视频当前图标。 正如你所见,音频输入范围是 0 到 1,并以 0.01 值递增。

    11.2K20

    微信小程序官方组件展示之媒体组件live-player源码

    /码器输出比特率,单位 kbpsaudioBitrate当前音频编/码器输出比特率,单位 kbpsvideoFPS当前视频帧率videoGOP当前视频 GOP,也就是每两个关键帧(I帧)间隔时长...最好 2:好 3:一般 4:差 5:很差 6:不可用videoWidth视频画面的宽度videoHeight视频画面的高度videoCache缓冲视频时长,单位毫秒audioCache缓冲音频时长...,单位毫秒vDecCacheSize解码器中缓存视频帧数 (Android 端硬解码时存在)vSumCacheSize缓冲视频帧数,该数值越大,播放延迟越高avPlayInterval音画同步错位时间...(播放),单位 ms,此数值越小,音画同步越好avRecvInterval音画同步错位时间(网络),单位 ms,此数值越小,音画同步越好audioCacheThreshold音频缓冲时长阈值,缓冲超过该阈值后...(页面栈push)2.pop 模式,即离开当前页面时触发(页面栈pop)3.以上两种路由行为均触发小窗此外,小窗还支持以下特性:l 小窗容器尺寸会根据原组件尺寸自动判断l 点击小窗,用户会被导航回小窗对应播放器页面

    1.2K30

    Android MediaPlayer音频播放器详解

    效果 音频播放,是比较常见或常用功能,比如音乐播放器、新闻播报、听书等等,而恰巧如果你想自定义一个音频播放器的话,本文一定对你有帮助!...prepareAsync() 异步准备,不阻塞UI线程 seekTo(int msec) 定位到指定位置,单位毫秒 isLooping 是否循环播放 isPlaying 播放状态 duration 时长...} btn_restart.setOnClickListener { audioRestart() } } 主要 是一些播放器监听事件按钮操作事件...格式化播放时间 这个获取时长返回是毫秒,所以我们还需要对其格式化操作。...,所以这里启动一个Timer获取当前位置并更新UI Timer更新UI /** * 每隔一秒执行一次,更新当前播放时间 */ private fun startTimer

    1.4K30

    微信小程序中将图片与音乐制作成MV

    用户上传图片数量不确定,在音乐没有播完之前,上传图片太多或太少将如何处理? 3. 如何让展现歌词与当前播放那一句保持同步,即唱哪一句就显示哪一句? 4....当前音乐播放时间如何自定义进度条进度保持一致? 针对以上问题,首先我们来看一下实现效果, ?...第二个问题,当音乐还在播放时,用户上传图片如果太少,将图片进行了循环展示,直到音乐播放完毕,由于整个MV时长取决于所选择音乐时长,如果上传图片太多,当音乐播放完毕时,我将后面的图片进行了省略处理...第三个问题,为了让歌词展示与音乐播放保持同步,我对音乐歌词格式进行了处理,将每一句歌词与该歌词播放时间分别组成一个对象,然后将多个对象组成一个数组,将数组循环展示在页面上,其中时间格式为是整型秒数...第四个问题,为了让播放时间与进度条进度同步,我利用了 onTimeUpdate 这个API,即监听音乐播放时间更新函数,在这个API回调函数里,获取当前音乐动态播放时间,将播放时间与音乐时间相除

    2.1K30

    基于reactH5音频播放器

    ---- 初步 最近刚好就做了音频播放器需求,现将踩坑记录如右。 项目是基于React,镶嵌在页面。为此开发了组件audio.js。不过不管什么框架。逻辑都是一样。 基础界面如下 ?...audio满足如下特殊属性 HTML 音频/视频重要属性 属性 描述 currentTime(重要) 设置或返回音频/视频中的当前播放位置(以秒计)。...duration 返回当前音频/视频长度(以秒计)。设置或返回是否在加载完成后随即播放音频/视频。 HTML 音频/视频事件 事件 描述 canplay 当浏览器可以开始播放音频/视频时触发。...进度条大致原理就是获取音频当前播放时长以及音频时长比例,然后通过这个比例与进度条宽度相乘,可以得到当前播放时长下进度条需要被填充宽度。...let moveX = this.lectureAudio.duration / this.progressBar.clientWidth; //moveX是一个固定常数,它代表着进度条宽度与音频时长关系

    8.1K10

    Qt音视频开发26-ffmpeg播放器

    一、前言 用ffmpeg来实现自己播放器,这是一直以来一个目标,之前难点卡在音视频同步以及如何播放声音这两点(尽管之前已经进行过不少尝试探索,但是问题还是挺多,比如音视频同步不完美,有些文件正常而有些文件不准...时长、已播放时长音频、视频、本地文件、视频流。...参数3 int64_t timestamp 表示要定位时间,单位是微妙,如果传入是秒则需要 * AV_TIME_BASE。...参数4 int flags 表示如何定位查找使用策略,建议选择AVSEEK_FLAG_BACKWARD,其余参数容易花屏。 返回值 >= 0 表示成功。...可暂停播放继续播放。 支持存储单个视频文件定时存储视频文件。 自定义顶部悬浮条,发送单击信号通知,可设置是否启用。 可设置画面拉伸填充或者等比例填充。 可设置解码是速度优先、质量优先、均衡处理。

    1.6K00

    播放器卡顿优化丨音视频工业实战

    我们可以通过下面这些指标来反映播放卡顿情况: 卡顿率,在一次播放中发生过卡顿播放次数在播放次数中占比。 平均卡顿时长,用户观看视频发生卡顿时长与总的卡顿次数比值。...从推流端来看,我们可以计算直播间 ACU(直播间用户观看时长/直播间推流时长)来评估直播间热度及影响力,对于大主播我们可以推码率高一点流来提升画质体验,对于数据较多而观众分散小主播我们则可以适当降低推流码率...这里水位对应是视频缓冲时长或者音频缓冲时长。 比如,三级缓冲水位可以设置为:500ms、1000ms、5000ms。 第一级缓冲水位指的是播放器第一次加载多少视频数据后开始播放。...当然,如果产品上可以退后台继续采集音频,就使用系统能力持续采集就好了。 2)退后台无法继续采集视频,这时候如果不推视频数据,那么可能会引起 CDN 播放器不兼容问题。...3)由于退后台时间较长后,App 网络请求可能被系统中断,甚至 App 可能被杀死。对于这个问题,可以尝试一些后台保活方案,比如 iOS 可以在退后台后播放静音音频来保活。

    2.2K20

    【客户端技术】深入了解视频播放器工作原理与实现

    1.6 视频播放器工作流程 综合来说播放器基础工作步骤如下: 1.解协议(读取文件) 2.解封装 3.视音频分离 4.视音频分别解码 5.视音频同步 6.输出数据解码后音频数据 7.渲染图像播放音频...接下来就以腾讯视频播放器为例简单介绍下在这些方面是它是如何处理。 3.1 整体架构设计 首先腾讯视频(以android端为例)分为两层 ?...完成这些功能后,一个基础播放器就封装好了。 4.2 点播 4.2.1 进度监听 点播需要显示视频时间当前播放进度,还可以跳转拉取进度等。...腾讯视频已为我们提供了播放器seekTo功能,我们只需要获取用户当前操作进度*乘以时长,设置跳转到时间点即可: ?...之前我们介绍视频编码时候I帧是最全视频帧,因此打开视频播放器时如果直接获取I帧就可以直接解码展示,达到秒开效果。

    8.7K35

    FFmpeg 播放器实现音视频同步三种方式

    实现视频解码播放视频滤镜 前文中,我们基于 FFmpeg 利用 OpenGL ES OpenSL ES 分别实现了对解码后视频音频渲染,本文将实现播放器最后一个重要功能:音视频同步。...老人们经常说,播放器音频视频播放没有绝对静态同步,只有相对动态同步,实际上音视频同步就是一个“你追我赶”过程。...简而言之就是,当前音频或视频播放时间戳大于系统时钟时,解码线程进行休眠,直到时间戳与系统时钟对齐。 音视频向系统时钟同步。...3 音频向视频同步 音频向视频同步,就是音频时间戳向视频时间戳对齐。由于视频有固定刷新频率,即 FPS ,我们根据 PFS 确定每帧渲染时长,然后以此来确定视频时间戳。...当音频时间戳大于视频时间戳,或者超过一定阈值,音频播放器一般插入静音帧、休眠或者放慢播放。反之,就需要跳帧、丢帧或者加快音频播放。

    2.6K00

    HarmonyOS学习路之开发篇—多媒体开发(视频开发 二)

    getCurrentTime() 获取当前播放位置。 getDuration() 获取媒体文件时长。 getVideoWidth() 获取视频宽度。...setNextPlayer(Player next) 设置当前播放结束后下一个播放器。 reset() 重置播放器。 release() 释放播放资源。...(可选)调用getDuration()方法getCurrentTime()方法,可以实现获取播放时长以及当前播放位置功能。 9. 调用 stop()方法停止播放。 10....getFrameTimestamp() 获取当前媒体数据帧时间戳。 getFrameSize() 获取当前媒体数据帧数据大小。 getFrameType() 获取当前媒体数据帧flags。...(可选)调用getStreamId()方法,可以实现获取当前选择轨道编号功能。 10. (可选)调用getFrameTimestamp()方法,可以实现获取当前轨道内媒体数据帧时间功能。

    28030

    移动直播LiteAVSDK,仪表盘指标监控

    FPS <= 10 视频帧率低于10帧会导致播放端明显卡顿 TXLivePlayListener QUE参数数值 参数名 单位 含义 计算方式 备注 1834 audio_cache ms 音频缓冲时长...1880 video_cache_ts ms 视频缓冲时长 最新接收视频帧pts - 当前正在渲染视频帧pts 47 video_cache_cnt 帧数 videojitterbuff缓冲帧数...帧数 视频解码器缓冲帧数 -52 av_recv_interval ms 音视频当前网络收帧时间当前最新接收音频帧pts - 当前最新接收视频帧pts 标示当前网络收帧同步状态 -47...av_render_interval ms 音视频当前帧渲染时间当前正在播放音频帧pts - 当前正在渲染视频帧pts 标示当前播放音画同步状态 5.0 balance_point ms 平衡点...播放器同步策略有问题 2.

    2.9K70
    领券