java音乐播放器进度条_制作一个简单的音乐播放器的进度条

因为最近在写一个音乐播放器，本来想做完整个项目再写博客的，但抑制不住我体内的洪荒之力，其实是怕到时候写起来长，就决定把一些知识点梳理出来

先了解一下HTML5出的audio标签

audio的定义

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的用法我们大致上了解了，那么怎么制作自己喜欢的进度条呢？

定制自己喜欢的进度条

定制自己喜欢的进度条，我们需要以下步骤：

将原生的audio控件隐藏

用一个div表示进度条组件

给进度条添加样式

* {

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;

}

为audio的点击进度条添加事件

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) : minute

let second = Math.round(value % 60)

second = second.toString().length === 1 ? ('0' + second) : second

return `${minute}:${second}`

}

audio.onloadedmetadata = function () {

end.innerHTML = conversion(audio.duration)

start.innerHTML = conversion(audio.currentTime)

}

progressBar.addEventListener('click', function (event) {

let coordStart = this.getBoundingClientRect().left

let coordEnd = event.pageX

let p = (coordEnd - coordStart) / this.offsetWidth

now.style.width = p.toFixed(3) * 100 + '%'

audio.currentTime = p * audio.duration

audio.play()

})

setInterval(() => {

start.innerHTML = conversion(audio.currentTime)

now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + '%'

}, 1000)

到这里进度条就完成了～～