<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
.wd-hidden{display:none;}
.musicBox{
margin-top:15px;
}
.musicBoxL {
position: relative;
margin-left:22px;
}
.musicControl{
position:absolute;
top:0;
width:79.5px;
height:81.5px;
border-radius:2.5px;
overflow:hidden;
}
.musicControl img{
width:100%;
height:100%;
}
.musicControl .musicImgBox{
position:relative;
}
.musicControl .musicImgBg{
height:81.5px;
}
.musicControl .musicMo{
position: absolute;
top: 0;
width: 100%;
height: 81.5px;
background: #000;
opacity: 0.3;
}
.musicControl .musicBtn{
position: absolute;
z-index: 2;
top: 22.25px;
left: 21.25px;
width: 37px;
height: 37px;
}
.musicDie{
height:73.5px;
width:108px;
border-radius:2.5px;
overflow:hidden;
margin-top:3px;
margin-left:10px;
}
.musicDie img{
width:100%;
height:100%;
}
.musicBoxR{
width:calc(100% - 140px);
height:81.5px;
}
.musicBoxR .playTimeBox{
margin-top:29.25px;
display: flex;
}
.musicBoxR .playTime{
font-size:12px;
color:#6E6E6E;
height:23px;
line-height:23px;
}
.musicBoxR .playTimeL{
margin-left:13px;
margin-right:5px;
}
.musicBoxR .playTimeR{
margin-left:10px;
margin-right:21px;
}
.musicBox .playProgress{
height:23px;
width:30%;
flex:1;
}
.musicBox .playProgress .playXian{
height:1.5px;
background:#DCDCDC;
margin-top:10.75px;
position:relative;
}
.musicBox .playPro{
width:0%;
height:1.5px;
background:#FF8810;
}
.playCircle{
position:absolute;
top:-4px;
left:0%;
width:10px;
height:10px;
border-radius:50%;
background:#FF8810;
box-shadow:0px 3px 12px 0px rgba(255,136,16,0.92);
z-index:10;
}
</style>
</head>
<body>
<div id="wrap">
<div class="playBg">
<div class="fishContainer">
<div class="fishLiBox">
<div class="musicBox">
<div class="musicBoxL wd-fl">
<div class="musicControl">
<div class="musicImgBox">
<div class="musicImgBg">
<img src="images/music1.png" alt="">
</div>
<div class="musicMo"></div>
<div class="musicBtn">
<img src="images/stop.png" alt="">
</div>
</div>
</div>
<div class="musicDie">
<img src="images/die.png" alt="">
</div>
</div>
<div class="musicBoxR wd-fl">
<div class="playTimeBox">
<div class="playTime playTimeL wd-fl">00:00</div>
<div class="playProgress wd-fl">
<div class="playXian">
<div class="playPro"><span class="playCircle"></span></div>
</div>
</div>
<div class="playTime playTimeR wd-fl">00:00</div>
</div>
<audio controls class="myAudio wd-hidden">
<source src="http://www.jq22.com/demo/musicplayer201803272200/audio/a1.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
</div>
<div class="clear"></div>
</div>
<div class="musicBox">
<div class="musicBoxL wd-fl">
<div class="musicControl">
<div class="musicImgBox">
<div class="musicImgBg">
<img src="images/music2.png" alt="">
</div>
<div class="musicMo"></div>
<div class="musicBtn">
<img src="images/stop.png" alt="">
</div>
</div>
</div>
<div class="musicDie">
<img src="images/die.png" alt="">
</div>
</div>
<div class="musicBoxR wd-fl">
<div class="playTimeBox">
<div class="playTime playTimeL wd-fl">00:00</div>
<div class="playProgress wd-fl">
<div class="playXian">
<div class="playPro"><span class="playCircle"></span></div>
</div>
</div>
<div class="playTime playTimeR wd-fl">00:00</div>
</div>
<audio controls class="myAudio wd-hidden">
<source src="http://www.jq22.com/demo/musicplayer201803272200/audio/a1.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
</div>
<div class="clear"></div>
</div>
<div class="musicBox">
<div class="musicBoxL wd-fl">
<div class="musicControl">
<div class="musicImgBox">
<div class="musicImgBg">
<img src="images/music3.png" alt="">
</div>
<div class="musicMo"></div>
<div class="musicBtn">
<img src="images/stop.png" alt="">
</div>
</div>
</div>
<div class="musicDie">
<img src="images/die.png" alt="">
</div>
</div>
<div class="musicBoxR wd-fl">
<div class="playTimeBox">
<div class="playTime playTimeL wd-fl">00:00</div>
<div class="playProgress wd-fl">
<div class="playXian">
<div class="playPro"><span class="playCircle"></span></div>
</div>
</div>
<div class="playTime playTimeR wd-fl">00:00</div>
</div>
<audio controls class="myAudio wd-hidden">
<source src="https://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
</div>
<div class="clear"></div>
</div>
</div>
<div class="fishBottom"></div>
</div>
</div>
</div>
<script>
var playTimeL = document.querySelectorAll(".playTimeL");
var playTimeR = document.querySelectorAll(".playTimeR");
var myAudio = document.querySelectorAll(".myAudio");
var playPro = document.querySelectorAll(".playPro");
var playCircle = document.querySelectorAll(".playCircle");
var playProgress = document.querySelector(".playProgress");
var musicImgBox = document.querySelectorAll(".musicImgBox");
var musicBtn = document.querySelectorAll(".musicBtn");
var musicMo = document.querySelectorAll(".musicMo");
for(var i = 0; i < musicImgBox.length; i++){
musicImgBox[i].index = i;
musicImgBox[i].onclick = function(){
for(var j = 0; j < musicImgBox.length; j++){
if(j != this.index){
musicBtn[j].children[0].setAttribute('src', 'images/stop.png');
myAudio[j].pause();
}
}
if(musicBtn[this.index].children[0].getAttribute('src',"images/playStart.png") == "images/playStart.png"){
musicBtn[this.index].children[0].setAttribute('src', 'images/stop.png');
myAudio[this.index].pause();
}
else{
musicBtn[this.index].children[0].setAttribute('src', 'images/playStart.png');
myAudio[this.index].play();
}
}
}
for(var i = 0; i < myAudio.length; i++){
myAudio[i].index = i;
myAudio[i].oncanplay = function(){
console.log("音樂時長",myAudio[this.index].duration);//音樂總時長
//處理時長
var time = myAudio[this.index].duration;
//分鐘
var minute = Math.floor(time) / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
var seconds = Math.floor(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
playTimeR[this.index].innerHTML = minutes+":"+seconds;
}
myAudio[i].ontimeupdate = function(){
let timeDisplay;
//用秒數來顯示當前播放進度
timeDisplay = Math.floor(myAudio[this.index].currentTime);//獲取實時時間
playPro[this.index].style.width = (myAudio[this.index].currentTime/myAudio[this.index].duration)*100+"%";
playCircle[this.index].style.left = (myAudio[this.index].currentTime/myAudio[this.index].duration)*100+"%"
if(playCircle[this.index].style.left == "100%")
{
musicBtn[this.index].children[0].setAttribute("src", "images/stop.png");
}
//處理時間
//分鐘
let minute = timeDisplay / 60;
let minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
// //秒
let second = timeDisplay % 60;
let seconds = Math.round(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
playTimeL[this.index].innerHTML = minutes+":"+seconds;
}
}
</script>
</body>
</html>
