基于HTML5实现音乐播放暂停及快进后退功能
近年来，H5的流行，加入许多标签，导致一些新手看起来有些懵，有点不太会用新标签，今天，举一个H5里比较常用的标签，audio标签，这个标签的作用在于添加一个音乐标签，可以实现它的样式，暂停，播放，快进及后退功能。其他功能比如播完一首歌，自动回到起点，或者播完一首歌，到下一首歌自动播放等功能暂未实现。以下代码仅供初学H5学习和交流，大佬请忽略。代码健壮性考虑的不周到，实现后前进后退滑动不顺畅，还请大佬提出好的解决方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.relative{
position: relative;
/* 根据自身定位 并且自身的位置保留不变 */
}
.absolute{
position: absolute;
/* 根据最近的有定位的父元素 自身位置被顶替*/
}
.top10{
top: 10px;
}
.left10{
left: 10px;
}
.top50{
top: 50px;
}
.left50{
left: 50px;
}
.display-none{
display: none;
}
.h100{
height: 100px;
}
.l120{
left: 120px;
}
.process-background{
width: 400px;
height: 4px;
background: #ccc;
}
.process-played{
height: 4px;
background: #ff9900;
width: 0;
}
.circle{
width: 15px;
height: 15px;
background: #ff9900;
border-radius: 50%;
top: -5px;
box-shadow: 0 0 5px #aaa;
left: 0;
}
.ml50{
margin-left: 50px;
}
.mt20{
/* margin-top: 20px; */
}
</style>
</head>
<body>
<!-- autoplay 自动播放 -->
<audio class="au" src="source/Adam Lambert - Mad World.mp3" controls></audio>
<div class="relative">
<div class="relative w100 h100">
<img class="absolute play" width="50" οnclick="play()" src="img/play.jpg" alt="">
<img class="absolute display-none pause" width="50" οnclick="pause()" src="img/stop.jpg" alt="">
</div>
<p class="absolute l120 top10">
<span class="current">00:00</span>/
<span class="total">00:00</span>
</p>
<div class="process mt20 ml50">
<div class="process-background relative">
<div class="process-played"></div>
<div οnmοusedοwn="start()" class="circle absolute"></div>
</div>
</div>
</div>
以下是JS代码，主要实现 播放、暂停、前进、后退功能。
<script>
var audio = document.querySelector('.au')
var timer;
var precent;
function play () {
audio.play()
document.querySelector('.play').classList.add('display-none')
document.querySelector('.pause').classList.remove('display-none')
document.querySelector('.total').innerHTML = countTime(audio.duration)
timer = setInterval(function(){
// console.log(audio.currentTime) 当前播放时长
document.querySelector('.current').innerHTML = countTime(audio.currentTime)
document.querySelector('.circle').style.left = ((audio.currentTime / audio.duration) * 400) + 'px'
document.querySelector('.process-played').style.width = ((audio.currentTime / audio.duration) * 400) + 'px'
},1000)
}
function pause () {
audio.pause()
clearInterval(timer)
document.querySelector('.play').classList.remove('display-none')
document.querySelector('.pause').classList.add('display-none')
}
// 把秒数转换成为 有分钟的时间
function countTime (time) {
var minutes = Math.floor(time / 60)
var seconds = Math.floor(time % 60) + 1
if (seconds < 10) {
seconds = '0' + seconds //如果秒小于10，前面加个0
}
if (minutes < 10) {
minutes = '0' + minutes //如果分钟小于10，前面加个0
}
return minutes + ':' + seconds
}
function start (e) {
document.body.onmousemove = function(){
e = window.event || e
move(e)
}
} //兼容IE和谷歌、火狐浏览器
function move (e) {
var ml = e.clientX // 鼠标距离浏览器左边的值
// 如果鼠标距离浏览器左边的值 小于 控制点所能到达的最左边 那么控制点的left为0
var process_left = document.getElementsByClassName('process')[0].clientLeft + 50;
if (ml < process_left) {
document.querySelector('.circle').style.left = '0px'
precent = 0;
// 如果鼠标距离浏览器左边的值 大于 控制点所能到达的最右边 那么控制点的left值为400
} else if (ml > (document.querySelector('.process-background').clientWidth) + 50) {
document.querySelector('.circle').style.left = '400px'
precent = 1;
} else {
// 鼠标在进度条的范围内移动 控制点的left值 就等于 鼠标距离浏览器的左边的值 - 控制点所能到达的最左边
document.querySelector('.circle').style.left = (ml - 50) + 'px'
precent = (ml - 50) / 400
}
document.body.οnmοuseup=function() {
end();
}
}
function end () {
document.body.onmousemove = null;
// 播放器当前播放时间 = （控制点的left值 总宽度） * 播放总时长
audio.currentTime = precent * audio.duration
}
// 当播放器播放完毕 执行的回调函数
audio.onended = function () {
console.log(1111) //这个功能仅打印测试，有想实现的小伙伴自行测试一下~
}
// 当前播放时长 控制点的left值
// ———————————— = —————————————
// 总播放时长 总宽度
</script>
</body>
</html>
基于HTML5实现音乐播放暂停及快进后退功能相关推荐
- Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
- 基于Qt的音乐播放器（二）切换歌曲，调节音量，调节语速，暂停
2020博客之星年度总评选进行中:请为74号的狗子投上宝贵的一票! 我的投票地址:点击为我投票 文章目录 1.切换歌曲 2.调节音量 3.调节语速 4.播放/暂停 5.我们来看下效果 6.关于上一篇提 ...
- html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
- 基于单片机的音乐播放器设计
word完整版可点击如下下载>>>>>>>> 基于单片机的音乐播放器设计-硬件开发文档类资源-CSDN下载内容包括详细设计文档word版,附带开题报告 ...
- 直播弹幕 html5,一种基于HTML5的弹幕播放器及其方法与流程
本发明涉及互联网技术领域,具体涉及一种基于HTML5的弹幕播放器及其方法. 背景技术: 弹幕是指一种在观看视频时,大量以字幕(有且不限于文字和图片)形式呈现的评论与视频同在一个画面的现象.在视频上方大 ...
- 基于python的音频播放器_基于python实现音乐播放器代码实例
基于python实现音乐播放器代码实例,一首,函数,按钮,布局,音乐 基于python实现音乐播放器代码实例 易采站长站,站长之家为您整理了基于python实现音乐播放器代码实例的相关内容. 核心播放 ...
- 基于C#的音乐播放器
效果图: 实现了基本功能: 歌词显示功能: 播放功能: 切歌功能: 进度条拖动播放功能: 下面是用到的一些变量 List<string> MusicList = new List<s ...
- android服务绑定音乐播放器,Android基于Service的音乐播放器
本文开发一个基于Service的音乐播放器,音乐由后台运行的Service负责播放,当后台的播放状态发生变化时,程序将会通过发送广播通知前台Activity更新界面:当点击Activity的界面按钮时 ...
- php手机端 调用音乐播放器,HTML_仿酷狗html5手机音乐播放器主要部分代码，HTML5作品，经测试，效果确定 - phpStudy...
仿酷狗html5手机音乐播放器主要部分代码 HTML5作品,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,网友体验的时候请使用谷歌等浏览器来运行,不然的话无法看到效果,不 ...
最新文章
- 用一句JQuery代码实现表格的简单筛选
- 【EventBus】事件通信框架 ( 订阅类-订阅方法缓存集合 | 事件类型-订阅者集合 | 订阅对象-事件类型集合 )
- OpenGL延迟着色之三
- 从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
- Lang.NEXT 2012相关Session
- SQL Server CLR 集成简介
- 自定义控件－实现TextBox的禁止粘贴
- Python《wallpaper abyss壁纸》
- python 邮件中生成图表_60秒一口Python：147个demo，助你从新手小白步步进阶编程高手...
- 【Vue】—子级向父级传递数据
- js删除服务器上文件,js删除服务器文件
- inDesign入门教程，如何添加阴影效果？
- PowerBuilder GRID美化
- 法勒二维码读头数据读写测试
- Simulink入门--创建简单模型
- 贷款软件测试经典bug描述,如何描述bug
- nRF51822 DTM 测试 不能连续发送数据
- ThreadLocal使用场景
- 金融经济学二十五讲--徐高
- 如何删除kafka消费组