html5手机端播放器可拖动播放自定义播放器

今天项目遇到需要写一个自定义html移动端的播放器。网上的插件一般都是不容易改写,或者不支持移动端的拖动特意整理一下代码。

先看效果图哈哈html5手机端播放器可拖动播放自定义播放器-上流阁

上代码

css代码

<style>
.bclor {
border: 1px solid red;
margin: 10px;
border-radius: 3px;
}

.progress-wrapper {
height: 10px;
width: 100%;
background: #dcdcdc;
border-radius: 50px;
}

.progress-left {
float: left;
width: 10%;
}

.progress-right {
float: right;
width: 10%;
}

.progress-btn {
border-radius: 50px;
width: 25px;
height: 25px;
background: #0493f0;
position: absolute;
top: 2px;
left: 10px;
border: 1px solid #FFFFFF;
}

.progress {
height: 10px;
width: 0%;
background: #0493f0;
border-radius: 10px;
}

.p_10 {
padding: 10px 20px 10px 20px;
}
.timetitle{
width: 100%;
height: 20px;
line-height: 20px;
background: #FFFFFF;
padding: 0px 20px 0px 20px;
}
</style>

Html代码

<div class="timetitle" >
<div class="progress-left" id="start"></div>

<div class="progress-right" id ="end" ></div>
</div>
<div class="m-cell p_10">

<div class="progress-wrapper" id="progress-wrapper">
<div class="progress"></div>
<div class="progress-btn"></div>
</div>
</div>
<button type="button" class="btn-block btn-primary" onclick="plays();" >播放</button>

</div>
</div>

<div class="container" style="display: none;">
<audio id="player" loop="loop" controls>
<source src="/static/img/courseevent/1796431260_1501814004824.mp3" type="audio/mpeg">
</audio>
<div id="lrcArea"></div>
</div>

js代码最关键

<script type="text/javascript">
//定义变量
var playcurrentTime = 0;
var start = "00:00";
var end = "00:00";
var t1;
var pp = 1;
var audio = document.getElementById("player");
var starts = document.getElementById('start');
starts.innerHTML = start;
var ends = document.getElementById('end');
ends.innerHTML = end;
//这里是一些移动端拖动的处理
$(document).ready(function() {

/**
* Javascript API调用Tab
*/
const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0;
let btnLeft = 0
progressBtn.addEventListener('touchstart', e => {

let touch = e.touches[0]
touchPoint = touch.clientX // 获取触摸的初始位置
btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
})
progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
window.clearInterval(t1);
pp=2;
plays();
let touch = e.touches[0]

let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值
if(btnLeftStyle > progressWrapperWidth) {
btnLeftStyle = progressWrapperWidth
} else if(btnLeftStyle < 0) {
btnLeftStyle = 0
}
var cd = btnLeftStyle;
if(cd < 10) {
cd = 10;
}
touch.target.style.left = cd + 'px'
playcurrentTime = cd;
progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通过按钮的left值与进度条容器长度的比值,计算进度条的长度百分比
console.log((btnLeftStyle / progressWrapperWidth) * 100)
})

progressBtn.addEventListener('touchend', e => {
e.preventDefault()
var div = document.getElementById('progress-wrapper');
var width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth; width

audio.currentTime = (playcurrentTime/width) * audio.duration;
pp=1;
plays();

})

});

//处理播放时间
function formatTime(second) {
return [ parseInt(second / 60 % 60), parseInt(second % 60) ].join(
":").replace(/\b(\d)\b/g, "0$1");
}
//播放
function plays() {
if (pp == 1) {

if (audio.paused) {
audio.play();
}
t1 = window.setInterval(function() {
const progress = document.querySelector('.progress');
progress.style.width =(audio.currentTime / audio.duration)* 100 + '%';
starts.innerHTML = formatTime(parseInt(audio.currentTime));
ends.innerHTML = formatTime(parseInt(audio.duration));
var div = document.getElementById('progress-wrapper');
var width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth; width
const progressBtn = document.querySelector('.progress-btn')
progressBtn.style.left =(audio.currentTime / audio.duration)*width + 'px';

}, 200);

pp = 2;
} else {
audio.pause();
window.clearInterval(t1);
pp = 1;
}

}
</script>

END 如果有什么问题可以给我留言

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2018/06/01/1111.html
发表评论

2 条评论
  • 椅子 文轩设计之路 

    这个是不是可以直接使用,在网页端插入html代码,然后分别在PC的CSS文件放CSS样式,手机移动端放CSS样式,这样就可以保证PC端适合PC,手机端适合手机端,是常说的响应式页面设计了!

  • 沙发 陈沩亮网络营销 

    谢谢分享!我也想在手机移动端,实现这样的功能。

相关文章
HTML中Data URI scheme BASE64 文件的拼接头
HTML中Data URI scheme BASE64 文件的拼…
WEB前端 解决监听浏览器窗口关闭之onbeforeunload不起作用?
WEB前端 解决监听浏览器窗口关闭之onbef…
VUE el-input__suffix样式大小修改
VUE el-input__suffix样式大小修改
VUE el ui el-date-picker时间禁用范围禁用干货
VUE el ui el-date-picker时间禁用范围…
VUE 通过URL下载修改文件名的方法 和原生js 下载
VUE 通过URL下载修改文件名的方法 和原…
html用css实现关闭文本框输入法切换输入法
html用css实现关闭文本框输入法切换输入法
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论