摘要:如果出现该属性,则向用户显示控件,比如播放按钮。如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用,则忽略该属性。要播放的音频的。
因为最近在写一个音乐播放器,本来想做完整个项目再写博客的,但抑制不住我体内的洪荒之力,其实是怕到时候写起来长,就决定把一些知识点梳理出来
先了解一下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)
到这里进度条就完成了~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82906.html
前言:当下音乐播放器不胜其数,为了更好的掌握一些东西,我们来自己制作一个音乐播放器。 文章目录: 一.开发环境:二.页面视图:1.主文件入口(首页):2.音乐播放界面: 三.功能实现(1)、index.html:(2)、播放音乐(music.html):(3)、样式文件(index.css): 四.项目地址: 一.开发环境: 开发工具:HbuliderX; 框架:Vant,Mui,V...
摘要:基于的音乐播放器音乐该应用使用全家桶完成,借助音乐来实现音乐搜索播放,应用持续更新中源代码源代码地址如果觉得还不错的大家可以给个我会持续更新的附音乐整理效果图在线预览在线预览地址音乐播放器端请在浏览器的移动端模式下查看使用使用依赖目 基于Vue2.0的音乐播放器(QQ音乐API) 该应用使用Vue全家桶完成,借助QQ音乐api来实现音乐搜索播放,应用持续更新中... 源代码 源代码地址...
摘要:高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯的代码实现下前台后台是参考网上的例子写的,代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端,请查看这里写在前头的话鄙人野生前端一只,专业,自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...
阅读 2548·2021-11-15 11:38
阅读 1998·2021-11-05 09:37
阅读 2360·2021-10-08 10:12
阅读 2848·2019-08-30 15:55
阅读 2148·2019-08-30 15:52
阅读 1257·2019-08-29 13:24
阅读 496·2019-08-26 18:27
阅读 1511·2019-08-26 18:27
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要