自己寫的一個簡單的音樂播放器程式碼可自定義樣式
阿新 • • 發佈: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>