寫的代碼完整的是這個:不是很好 沒優化 能用 拖拽控制播放的進度時間
效果如圖所示:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.control p {
border: 1px solid #ddd;
padding: 10px;
}
.playTime {
width: 500px;
height: 2px;
background: rgba(224, 224, 224, 1);
position: relative;
display: flex;
justify-content: space-between;
cursor: pointer;
}
#progressId {
position: absolute;
top: 0px;
left: 0;
width: 500px;
height: 2px;
background: #EFEFF4;
/* color: #44BCB7; */
}
/* 表示總長度背景色 */
progress::-webkit-progress-bar {
background-color: #EFEFF4;
}
/* 表示已完成進度背景色 */
progress::-webkit-progress-value {
background-color: #44BCB7;
}
#playedTime,
#playAllTime {
color: rgba(153, 153, 153, 1);
font-size: 14px;
margin-top: 9px;
}
#controlBtn {
position: absolute;
top: -6px;
left: 0;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 6px 0px rgba(68, 188, 183, 0.5);
border: 2px solid rgba(68, 188, 183, 0.7);
border-radius: 50%;
}
#div1 {
width: 198px;
height: 66px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body ondrop="drop(event)" ondragover="allowDrop(event)">
<div>
<div class="control" id="controlId" style="display:flex;justify-content: space-around;width:300px;">
<p onclick="repeatPlay()">重新播放</p>
<p onclick="pause()" id="pauseBtn">播放</p>
<p onclick="controlMuted()" id="mutedBtn">不靜音</p>
</div>
<audio src="https://www.w3school.com.cn/i/horse.ogg" id="audioId" controls></audio>
<div class="playTime" id="playTimeId">
<progress value="1" max="100" id="progressId"></progress>
<span id="playedTime"></span>
<span id="playAllTime"></span>
<div id="controlBtn" draggable="true" ondragstart="drag(event)"></div>
</div>
</div>
<br />
</body>
</html>
<script type="text/javascript">
let playTime = document.getElementsByClassName("playTime")[0];
let controlBtn = document.getElementById("controlBtn");
let audioId = document.getElementById("audioId");
playTime.onclick = function (e) {
controlBtn.style.left = e.offsetX + 'px';
audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
playedTime.innerText = getFormatTime(audioId.currentTime);
progressId.value = (audioId.currentTime / audioId.duration) * 100;
}
function allowDrop(ev) {
var data = ev.dataTransfer.getData("Text");
if(playTime.offsetWidth>=ev.offsetX){
document.getElementById('controlBtn').style.left=ev.offsetX + 'px';
}
else{
document.getElementById('controlBtn').style.left=playTime.offsetWidth + 'px';
}
audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
playedTime.innerText = getFormatTime(audioId.currentTime);
progressId.value = (audioId.currentTime / audioId.duration) * 100;
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
// ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
document.getElementById("playTimeId").appendChild(document.getElementById(data));
if(playTime.offsetWidth>=ev.offsetX){
document.getElementById(data).style.left=ev.offsetX + 'px';
}else{
document.getElementById(data).style.left=playTime.offsetWidth + 'px';
}
audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
playedTime.innerText = getFormatTime(audioId.currentTime);
progressId.value = (audioId.currentTime / audioId.duration) * 100;
}
let progressId = document.getElementById("progressId");
let playedTime = document.getElementById("playedTime");
let playAllTime = document.getElementById("playAllTime");
var t = '';
//播放狀態播放事件
audioId.onplaying = function () {
t = setInterval(function () {
console.log('setIN');
progressId.value = (audioId.currentTime / audioId.duration) * 100;
let playedTime = document.getElementById("playedTime");
playedTime.innerText = getFormatTime(audioId.currentTime);
let playAllTime = document.getElementById("playAllTime");
playAllTime.innerText = getFormatTime(audioId.duration);
controlBtn.style.left = (progressId.value / 100) * playTime.offsetWidth + 'px';
}, 1000);//設置每1000毫秒（一秒鐘）回調一次函數
}
//播放狀態停止事件
audioId.onpause = function () {
console.log('clearInterval');
//停止播放時候再次更新下dom滾動條 以防不同步更新
setTimeout(function () {
console.log('setIN');
progressId.value = (audioId.currentTime / audioId.duration) * 100;
let playedTime = document.getElementById("playedTime");
playedTime.innerText = getFormatTime(audioId.currentTime);
let playAllTime = document.getElementById("playAllTime");
playAllTime.innerText = getFormatTime(audioId.duration);
controlBtn.style.left = (progressId.value / 100) * playTime.offsetWidth + 'px';
}, 100);
clearInterval(t);
}
function pause() {
let tex=audioId.paused;
document.getElementById('pauseBtn').innerText=tex?'暫停':'播放';
audioId.paused ? audioId.play() : audioId.pause();
}
function repeatPlay() {
audioId.currentTime = 0;
audioId.play();
}
function controlMuted() {
let tex=audioId.muted;
document.getElementById('mutedBtn').innerText=tex?'不靜音':'靜音';
audioId.muted = !audioId.muted;
}
function getFormatTime(currentTime) {
let currMin = '' + Math.floor(currentTime / 60);
currMin = currMin < 10 ? currMin.padStart(2, '0') : currMin;
let currSecond = '' + Math.floor(currentTime % 60);
currSecond = currSecond < 10 ? currSecond.padStart(2, '0') : currSecond;
return currMin + ':' + currSecond
}
function getInitTime() {
// debugger;
let playedTime = document.getElementById("playedTime");
playedTime.innerText = getFormatTime(audioId.currentTime);
let playAllTime = document.getElementById("playAllTime");
playAllTime.innerText = getFormatTime(audioId.duration);
}
setTimeout(() => {
getInitTime();//開始初始化時間
}, 100)
</script>