自己寫的一個簡單的音樂播放器程式碼可自定義樣式
阿新 • • 發佈：2019-02-09
效果圖：
需要的圖片：
css部分：
#show_in{ position:absolute; bottom:0px; left:0px; width: 100%; height: 60px; border: 1px solid red; } #playaudio{ position:absolute; bottom:0px; left:0px; opacity: 0.9; width: 100%; height: 60px; background-color:#404040; border: 1px solid black; box-shadow: 0px 0px 10px black; } #aduioBox{ width: 1280px; height: 50px; margin: 0px auto; } #list_s{ position: absolute; width: 300px; height: 300px; border: 1px solid red; transform:translate(900px,-300px); background-color:#404040; border: 1px solid black; box-shadow: 0px 0px 10px black; z-index: -1; } #lis_m{ } #lis_m>li{ color: white; cursor: pointer; } #aduioPlay{ transform: translate(50px,5px); } #playUP,#playNext,#playBtn,#vilumeBtn{ background: url(../img/playbar.png) no-repeat; border: 0px; border-radius:50px; outline: none; } #playUP{ width: 28px; height: 28px; background-position-x:-1px; background-position-y:-131px; } #playUP:hover{ background-position-x:-32px; background-position-y:-131px; } #playNext{ width: 28px; height: 28px; background-position-x:-80px; background-position-y:-131px; } #playNext:hover{ background-position-x:-110px; } #playBtn{ width:40px; height: 40px; background-position-x:2px; background-position-y:-202px; } #playBtn:hover{ background-position-x:-39px; background-position-y:-202px; } #authorAndMusicName{ position:absolute; transform: translate(210px,-40px); } #authorAndMusicName>a{ text-decoration: none; color:white; } #authorAndMusicName>a:hover{ text-decoration: underline; } #ProgressBar{ width: 500px; position:absolute; transform: translate(200px,-20px); } #timeS{ color: white; position:absolute; transform: translate(740px,-20px); } #volume{ position:absolute; width: 100px; transform: translate(850px,-20px); } #vilumeBtn{ width: 20px; height: 20px; position:absolute; transform: translate(838px,-18px); background-position-x:-107px; background-position-y:-72px; } #vilumeBtn:hover{ background-position-x:-129px; } #playList{ cursor: pointer; width: 58px; height: 25px; transform: translate(1000px,-30px); background: url(../img/playbar.png) no-repeat; background-position-x: -45px; background-position-y: -68px; }
js部分：
<script type="text/javascript" charset="utf-8">
var range,x,audio_s,times,next,playBtn,playList,liST,volume_l,playaudio,show_in,now;
var min,second,time,f=0,m=0,start=0,before=0,timeindex=0,timeLong,timeStart;
window.onload=function(){
playList=document.getElementById("playList");
volume_l=document.getElementById("volume");
playaudio=document.getElementById("playaudio");
show_in=document.getElementById("show_in");
playList.onmouseenter=function(){
playList.style.background="url(img/playbar.png) no-repeat";
playList.style.backgroundPositionX="-45px";
playList.style.backgroundPositionY="-98px";
}
playList.onmouseleave=function(){
playList.style.background="url(img/playbar.png) no-repeat";
playList.style.backgroundPositionX="-45px";
playList.style.backgroundPositionY="-68px";
}
playList.onclick=function(){
audio_s.src="js/Against The Current,英雄聯盟 - 英雄聯盟2017全球總決賽主題曲-Legends Never Die.mp3";
}
volume_l.onclick=function(){
audio_s.volume=volume_l.value;
}
range=document.getElementById("ProgressBar");
playBtn=document.getElementById("playBtn");
audio_s = document.getElementById('audio');
//muted 設定或返回是否關閉聲音。
next=document.getElementById("next");
range.onmousedown=function(){
clearInterval(start);
clearInterval(times);
};
range.onmouseup=function(){
now=parseInt(range.value);
clearInterval(start);
clearInterval(times);
audio_s.currentTime=now;
rangeplay();
};
range.value=0;
}
function getMusicTime(){
timeLong=document.getElementById("totaltime");
timeStart=document.getElementById("startTime");
var aduiotime=document.getElementById("audio");
min=parseInt(aduiotime.duration/60);
second=parseInt(aduiotime.duration%60);
var total=min+":"+second;
//aduiotime.currentTime=total;播放時間的位置
timeLong.innerText=total;
start=setInterval(function(){
before=parseInt(aduiotime.currentTime);
f=parseInt(aduiotime.currentTime/60);
if(before>=60){
timeindex=parseInt(aduiotime.currentTime/60);
before=before-(60*timeindex);
}
if(before<10){
var sv=f+":"+m+before;
}else{
var sv=f+":"+before;
if(f==min&&before==second){
clearInterval(start);
}
}
timeStart.innerText=sv;
},10);
}
function rangeplay(){
times=setInterval(function (){
range.value=audio_s.currentTime;
},1000);
}
function play(){
if(audio_s!==null){
//檢測播放是否已暫停.audio.paused 在播放器播放時返回false.
if(audio_s.paused){
range.max=audio_s.duration;
audio_s.play();//audio.play();// 這個就是播放
playBtn.style.background="url(img/playbar.png) no-repeat";
playBtn.style.backgroundPositionX="2px";
playBtn.style.backgroundPositionY="-163px";
getMusicTime();
rangeplay();
}else{
audio_s.pause();// 這個就是暫停
playBtn.style.background="url(img/playbar.png) no-repeat";
playBtn.style.backgroundPositionX="2px";
playBtn.style.backgroundPositionY="-202px";
// playBtn.style.backgroundSize="cover";
// playBtn.style.backgroundPositionX="-4px";
}
}
}
</script> html部分：
<audio id="audio" > <source src="music/自選音樂.mp3"> </source> 你的瀏覽器不支援播放 </audio> <div id="playaudio"> <!--<div id="list_s"> <ul id="lis_m"> <li>你就不要想起我</li> </ul> </div>--> <div id="aduioBox"> <div id="aduioPlay"> <input type="button" id="playBtn" onclick="play()"/> </div> <div id="authorAndMusicName"> <a href="#">texe</a><a href="#">texe</a> </div> <div id="timeS"> <label id="startTime">0:00</label> <label id="totaltime">0:00</label> </div> <input type="button" id="vilumeBtn" /> <input type="range" id="ProgressBar" /> <input type="range" id="volume" value="1" max="1" step="0.1"/> <div id="playList"></div> </div> </div>