audio播放器进度条

audio标签的常用属性

autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src 要播放的音频的 URL。

audio DOM的常用属性

autoplay 设置或返回是否在加载完成后随即播放音频/视频
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
muted 设置或返回音频/视频默认是否静音
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
paused 设置或返回音频/视频是否暂停
played 返回表示音频/视频已播放部分的 TimeRanges 对象

audio DOM的常用方法

load() 重新加载音频/视频元素

play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
canPlayType() 检测浏览器是否能播放指定的音频/视频类型

将原生的audio控件隐藏

html部分

  <div class="progress"><span class="start"></span><div class="progress-bar"><div class="now"></div></div><span class="end"></span></div>

css部分

* {margin: 0;padding: 0;}.progress {display: flex;justify-content: space-between;align-items: center;width: 380px;margin: 100px auto;}.progress-bar {position: relative;width: 70%;height: 5px;background-color: #eee;vertical-align: 2px;border-radius: 3px;cursor: pointer;}.now {position: absolute;left: 0;display: inline-block;height: 5px;width: 70%;background: #31c27c;}.now::after {content: '';position: absolute;left: 100%;width: 3px;height: 7px;background-color: lightblue;}

js部分

const audio = document.getElementById('music')const start = document.querySelector('.start')const end = document.querySelector('.end')const progressBar = document.querySelector('.progress-bar')const now = document.querySelector('.now')function conversion (value) {let minute = Math.floor(value / 60)minute = minute.toString().length === 1 ? ('0' + minute) : minutelet second = Math.round(value % 60)second = second.toString().length === 1 ? ('0' + second) : secondreturn `${minute}:${second}`}audio.onloadedmetadata = function () {end.innerHTML = conversion(audio.duration)start.innerHTML = conversion(audio.currentTime)}progressBar.addEventListener('click', function (event) {let coordStart = this.getBoundingClientRect().leftlet coordEnd = event.pageXlet p = (coordEnd - coordStart) / this.offsetWidthnow.style.width = p.toFixed(3) * 100 + '%'audio.currentTime = p * audio.durationaudio.play()})setInterval(() => {start.innerHTML = conversion(audio.currentTime)now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + '%'}, 1000)

audio播放器进度条相关推荐

android音乐播放器进度条误差研究
2019独角兽企业重金招聘Python工程师标准>>> 如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率和更新的 ...
android实现音乐播放器(进度条)
|--效果图 |--依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. |--main. ...
android音乐播放器进度条研究
如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率和更新的精度频度和精度要相适应,才能保证流畅,并不是精度越高越好,也不是频度越高 ...
iOS利用UIView自定义播放器进度条
前段时间做项目遇到播放器自定义进度条的需求,刚开始想的是继承自系统的UISlider去做,内部重写系统方法完成样式定制.后来遇到头疼的问题,在iphone6.7手机上样式显示正常,遇到plus手机进度 ...
flutter 自定义播放器进度条
FijkPlayer 第三方的一个视频播放器,这是一个大佬基于比利比利播放器封装的,有常用的API 可自定义样式 pub传送门默认的样式展示: 自定义的样式展示: **使用:** fijkpla ...
MediaPlayer 音乐播放器进度条
今天学渣研究了一下使用MediaPlayer播放音乐时添加进度条,进度条现在用的是android自带的seekbar,后期会跟换UI的,在之前能够播放音乐的基础上,现在添加的主要功能有两个: 1实时显 ...
AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...
html音乐播放器进度条同步,网页音乐播放器完整版特效，自行控制，带进度条...
WWW.51JS.COM---[94OK] //---------这是区分播放器的音乐类型,你可以填加修改------// var RS = new Array("rm",&quo ...
android mp3进度条和时间,AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...
ibiliplayer是什么_Bilibili移动端播放器进度条的小电视动画是如何实现的？
解开包简单的看了一下,B站用的Lottie动画库. 在线预览:https://www.lottiefiles.com/share/xm5dc8www.lottiefiles.com json路径: ...