jquery - HTML 自定义音频播放器 - 获取当前时间和总时间
问题描述
所以我正在创建一个定制的 MP3，我刚刚设法更新了你可以跳到曲目特定部分的部分。
但我不知道如何设置它以显示当前播放的时间 hh:mm:ss 以及显示总时间 hh:mm:ss
这是播放器的 CodePen。有人可以帮忙吗？
HTML：
<div class="player">
<div class="player__bar">
<div class="player__album">
<div class="player__albumImg active-song"
data-author="UCL"
data-song="Library Atmos"
data data-src="https://uclinformationstudies100.org/wp-content/uploads/2021/01/DISCENT-SMVB-Part-1-Edit-1_01.mp3" style="background-image: url(http://ucl.nathandasilva.co.uk/record-player.png">
</div>
<div class="player__albumImg"
data-author="UCL"
data-song="Library Atmos"
data data-src="http://ucl.nathandasilva.co.uk/Library_Atmos_Edit_1.wav" style="background-image: url(https://alikinvv.github.io/minimal-player/build/img/album.jpg">
</div>
</div>
<div class="player__controls">
<div class="player__prev">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
</div>
<div class="player__play">
<svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"/></svg>
<svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"/></svg>
</div>
<div class="player__next">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
</div>
</div>
</div>
<div class="player__timeline">
<p class="player__author"></p>
<p class="player__song"></p>
<div class="player__timelineBar"><div id="playhead"></div></div>
</div>
</div>
JS
$(document).ready(function () {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
var tl = new TimelineMax();
tl.to('.player__albumImg', 3, {
rotation: '360deg',
repeat: -1,
ease: Power0.easeNone
}, '-=0.2');
tl.pause();
$('.player__play').click(function () {
if ($('.player').hasClass('play')) {
$('.player').removeClass('play');
audioElement.pause();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1,
ease: Power0.easeNone
})
tl.pause();
} else {
$('.player').addClass('play');
audioElement.play();
TweenMax.to('.player__albumImg', 0.2, {
scale: 1.1,
ease: Power0.easeNone
})
tl.resume();
}
});
var playhead = document.getElementById("playhead");
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
function updateInfo() {
$('.player__author').text($('.active-song').attr('data-author'));
$('.player__song').text($('.active-song').attr('data-song'));
}
updateInfo();
$('.player__next').click(function () {
if ($('.player .player__albumImg.active-song').is(':last-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:first-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});
$('.player__prev').click(function () {
if ($('.player .player__albumImg.active-song').is(':first-child')) {
$('.player__albumImg.active-song').removeClass('active-song');
$('.player .player__albumImg:last-child').addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
} else {
$('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
audioElement.addEventListener("timeupdate", function () {
var duration = this.duration;
var currentTime = this.currentTime;
var percentage = (currentTime / duration) * 100;
playhead.style.width = percentage + '%';
});
}
updateInfo();
audioElement.setAttribute('src', $('.active-song').attr('data-src'));
audioElement.play();
});
$('.player__timelineBar').click(function (ev) {
var $div = $(ev.target);
var $display = $div.find('.playhead');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var ratio = x / $(this).width();
var duration = audioElement.duration;
var newCurrentTime = ratio * duration;
audioElement.currentTime = newCurrentTime;
});
});
SCSS
.icon {
display: inline-block;
width: 2em;
height: 2em;
font-size: 30px;
fill: #D7DCE2;
transition: all .2s ease-in-out;
}
html, body {
height: 100%;
}
body {
background: #000;
position: relative;
}
.player {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.play {
.player__timeline {
transform: translateY(-90%);
}
.player__album:after {
box-shadow: 0px 30px 28px -10px rgba(0,0,0,.2);
}
.player__album {
top: -65px;
}
.pause {
display: inline-block;
}
.play {
display: none;
}
}
&__album {
width: 112px;
height: 112px;
border-radius: 50%;
margin-right: 22px;
position: relative;
top: -50px;
transition: all .4s ease-in-out;
&:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 50%;
}
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
box-shadow: none;
transition: all .3s ease-in-out;
}
}
&__albumImg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
z-index: 2;
display: none;
&.active-song {
display: block;
}
}
&__bar {
background: #fff;
padding: 10px 25px;
height: 100px;
display: flex;
justify-content: space-between;
border-radius: 15px;
box-shadow: 0 30px 56px 6px rgba(0,0,0,0.1);
position: relative;
z-index: 3;
}
&__controls {
display: flex;
align-items: center;
}
&__prev {
transform: rotate(180deg);
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 15px;
transition: all .2s ease-in-out;
margin-right: 3px;
&:hover {
background: #D7DCE2;
svg {
fill: #fff;
}
}
}
&__play {
cursor: pointer;
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
transition: all .2s ease-in-out;
margin-right: 3px;
position: relative;
&:hover {
background: #D7DCE2;
svg {
fill: #fff;
}
}
svg {
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.pause {
display: none;
}
}
}
&__next {
cursor: pointer;
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
transition: all .2s ease-in-out;
margin-left: -8px;
&:hover {
background: #D7DCE2;
svg {
fill: #fff;
}
}
}
&__timeline {
background: #FFF;;
height: 95px;
border-radius: 15px;
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
transform: translateY(0);
transition: all .3s ease-in-out;
z-index: 1;
padding-left: 160px;
flex-direction: column;
justify-content: center;
}
&__timelineBar {
background: #E7E7E7;
width: 95%;
height: 4px;
border-radius: 15px;
margin-top: 13px;
position: relative;
}
#playhead {
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
width: 0;
height: 100%;
background: #fd6d94;
}
&__author {
line-height: 1;
font-weight: bold;
margin-bottom: 6px;
margin-top: 15px;
}
&__song {
line-height: 1;
margin: 0;
font-size: 12px;
color: #949494;
}
}
解决方案
持续时间和 currentTime 以秒为单位。
以您想要的格式显示它们只需进行一些简单的计算：
const formatTime = time => {
const hours = Math.floor(time / 3600);
const remainder = time % 3600;
const minutes = Math.floor(remainder / 60);
const seconds = Math.floor(remainder % 60);
const hh = hours.toString().padStart(2, '0');
const mm = minutes.toString().padStart(2, '0');
const ss = seconds.toString().padStart(2, '0');
return `${hh}:${mm}:${ss}`;
}
这是您更新后的工作代码笔： https ://codepen.io/ptcc/pen/WNReqPx
推荐阅读
- r - 从 R 中的名称列表中更改变量名称
- angular - 如何在角度中禁用formcontrol选择和表单控制
- react-native - 如何在 React Native 中从 pdf 文件中提取文本
- android - 如何从工具窗口android studio中删除模拟器
- java - 使用 Java 将 Docx 转换为 html
- angular - 返回true时路由保护不起作用
- javascript - “classList.toggle”不适用于按钮
- reactjs - 在 react-google-login 中出现“缺少必需的参数 'client_id'”错误
- java - 我想在对话框中实现一个回收器视图
- c# - 类上方的“[Xamarin.Forms.ContentProperty("Contents")]”实际上在做什么？