运用JavaScript制作一个网页音乐播放器。
静态图片:
HTML文件:
<body>
<!-- 音频 -->
<div id="musicplayer">
<audio id="music" src="#"></audio>
</div>
<!-- 音频 end -->
<!-- 播放器界面 -->
<div class="player_bg">
<div class="cover">
<div class="opc"></div>
<div class="musImg">
<img id="image" src="#" alt="">
</div>
<div class="musName" id="mName"></div>
<div class="playerNmae" id="pName"></div>
</div>
<div class="jindutiao" id="musBar">
<div class="jindu" id="musJD">
<div class="jinduyuan"></div>
</div>
<div class="time">
<span class="beginTIme" id="bTime">00:00</span>
<span class="endTIme" id="eTime">00:00</span>
</div>
</div>
<div class="control">
<div class="replay" id="replay">
<span class="iconfont icon-replay"></span>
</div>
<select id="chagrSp" class="chagrSp">
<option value="0.5">0.5</option>
<option value="1.0" selected>1.0</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
<div class="change">
<div class="prev cotrBtn" id="prev"><span class="iconfont icon-shangyishou"></span></div>
<div class="play cotrBtn" id="play"><span class="iconfont icon-play"></span></div>
<div class="next cotrBtn" id="next"><span class="iconfont icon-xiayishou"></span></div>
</div>
<div class="cotrVolBtn" id="cotrVolBtn">
<span class="iconfont icon-yinliang"></span>
</div>
<div class="volCotr" id="musVol">
<div class="handle" id="handle">
<div class="yuan"></div>
</div>
</div>
<div class="volV" id="volV">100%</div>
</div>
</div>
<!-- 播放器界面 end -->
</body>
公共样式:
*{
margin: auto;
padding: 0;
}
ul,li,ol{
list-style: none;
}
img{
border:none;
}
a{
list-style: none;
text-decoration: none;
color: #fff;
}
body{
font-size: 14px;
font-family: "Microsoft Yahei","Arial";
color: #fff;
background-color: #3f3d7e;
}
页面样式:
.player_bg{
width: 600px;
height: 400px;
/*background-color: #a6c4ff;*/
margin-top: 100px;
overflow: hidden;
position: relative;
}
.cover{
width: 400px;
height: 300px;
border-radius: 20px 20px 0 0;
background-image: url("../images/musicBG0.jpg");
background-size: cover;
animation: beginAni 1.5s both;
z-index: -1;
overflow: hidden;
position: relative;
}
.musImg{
width: 200px;
height: 200px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: 0 0 30px #fff;
animation: imgAniBg 0.5s 1.5s both;
position: absolute;
top: 20px;
left: 50%;
margin-left: -100px;
}
.musImg>img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.musName,
.playerNmae{
width: 100%;
text-align: center;
text-shadow: 0 0 8px rgba(255,255,255,255);
position: absolute;
}
.musName{
font-size: 16px;
bottom: 25px;
animation: txetAniLeft 0.5s 1.2s both;
}
.playerNmae{
font-size: 14px;
bottom: 10px;
animation: txetAniRight 0.5s 1.4s both;
}
.opc{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #9a6e3a;
opacity: 0.3;
}
.jindutiao{
width: 600px;
height: 5px;
background-color: #9c64ab;
}
.jindu{
margin: 0;
width: 30%;
height: 5px;
background-color: #ffd7e8;
position: relative;
z-index: 1;
}
.jinduyuan{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffd7e8;
position: absolute;
right: -5px;
top: 50%;
margin-top: -5px;
box-shadow: 0 0 14px #ffd0ea;
}
.jinduyuan:hover{
width: 12px;
height: 12px;
position: absolute;
right: -6px;
top: 50%;
margin-top: -6px;
}
.time{
width: 100%;
font-size: 10px;
position: relative;
z-index: 1;
}
.beginTIme{
position: absolute;
top: 5px;
left: 10px;
}
.endTIme{
position: absolute;
top: 5px;
right:10px;
}
.control{
bottom: 0;
width: 100%;
height: 95px;
background:linear-gradient(0deg, #7d53c7,#ab93c9);
border-radius:0 0 20px 20px;
z-index: 0;
position: relative;
}
.replay>span{
font-size: 18px;
}
.replay{
position: absolute;
top: 50%;
left: 75px;
margin-top: -9px;
}
.chagrSp{
border-radius: 10px;
width: 45px;
height: 20px;
position: absolute;
top: 50%;
left: 110px;
margin-top: -10px;
outline: none;
}
.change{
position: absolute;
top: 50%;
left: 50%;
margin: -24.5px 0 0 -110px;
width: 220px;
height: 49px;
display: flex;
justify-content: space-between;
}
.cotrBtn{
margin: 0;
line-height: 45px;
text-align: center;
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #fff;
}
.cotrBtn>span{
font-size: 30px;
}
.cotrVolBtn>span{
font-size: 18px;
}
.cotrVolBtn{
position: absolute;
top: 50%;
right: 130px;
margin-top: -9px;
pointer-events: none; /* 防止事件穿透子标签 */
}
.volCotr{
position: absolute;
right: 20px;
bottom: 45px;
width: 100px;
height: 5px;
background-color: #7b52c7;
border-radius: 5px;
}
.handle{
position: relative;
width: 100%;
height: 5px;
background-color: #fff;
margin: 0;
border-radius: 5px;
pointer-events: none; /* 防止事件穿透子标签 */
}
.yuan{
width: 10px;
height: 10px;
pointer-events: none; /* 防止事件穿透子标签 */
border-radius: 50%;
background-color: #fff;
position: absolute;
right: 0;
top: -2.5px;
}
.volV{
position: absolute;
right: 60px;
top: 25px;
font-size: 12px;
}
.cotrBtn>span:hover,
.jindutiao:hover,
.volCotr:hover,
.replay>span:hover,
.chagrSp:hover,
.cotrVolBtn>span:hover{
cursor: pointer;
}
.yuan:hover{
box-shadow: 0 0 12px #bf9fee;
}
.rotate{
animation: roteAni 10s linear infinite;
}
/* 动画区 */
@keyframes roteAni {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes beginAni {
0%{
opacity: 0;
transform: translateY(400px);
}
50%{
opacity: 0.3;
transform: translateY(0);
}
100%{
opacity: 1;
}
}
@keyframes imgAniBg {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes txetAniLeft {
0%{
opacity: 0;
transform: translateX(-300px);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes txetAniRight {
0%{
opacity: 0;
transform: translateX(300px);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
iconfont样式:
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1587133346896'); /* IE9 */
src: url('iconfont.eot?t=1587133346896#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWIAAsAAAAAC1gAAAU5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqIIIZTATYCJAMoCxYABCAFhG0HgRkbqglRlE9On+yLBJ5D3dxKZxMJSJ0jNEc0EEhfm1U9H8HXfui+u/scYJcoYBcF1HZ8VIUsCwNkgVRVla/xHR+21f/nc7r3m0yrmZhlQ0SOg8hM5Ac8AW8dk8o2VO0IN/Z/zoYgbITadienjkih3cvafKD0Q3vAGHA94gRy/sH+/vyx1IsozGffzqU6FmWRNB5NhxtQdONENuABTQi3mFfTkyoMyubXQRcT6K1Igh49vH32Zgq2VSBeaYm9Wcqn1HBD66xLDiziFydt+tybwE/783EHiytJlbFLXTy5r3tXl7KvauLTsZwsEIaLYHsYGbtAIf6Uxn4jfG0XoT//BaQXeuZoENIl8Tn48+jPzOeiL0e+nP6q/j9yKcuPxhaHOV58JKhVkmaqf3itTiFq1DYBxHf1jkuZRNRcEoiKy2CrOvto8GjAzoAVzl4EiODqCKLl6jSi41pteC5tvT5gAZgmDkD8wByPbGeWhKD25Ad/xD8wKCgwgdB48FdSKr288gV3d9EKMmyTywt1kgMhJyTYY0SvTnjyZOFjDumrzoq9wfvRI/yQ8ZJrsU3i4MwT4fEkKJYB9vY+JZngpYWXkUvdrA5bRR+O0Yp2wZfn9IJD8mZ5g2TDXmV6rVeBu6giMp1uIos3nMrgazAgF0Hf/fAj8+gT++QLL9h7/PqHD5nHj7knT/grjybCFO1gNGtw+HLmw35THleTzbz7LnuAk8URK99p8yeN1uxyx6V4E5DGk1FiTNmuTYGG7lJHFKo9o8R6OcGM/C5nYqXo0p0b/bTFoh05LWsJG5DYqrydqrnMLp7E8aUlVnxKSiw3WJBgHvwW0ikcV1JqwyfFhDK9GQmWZ6mAWimWouSJ20KOG8M4jdNqJw0Lyt3qCzEoN73qg1zsmJcOpXIF+HKImTcn/8YfojYrM6jcF3wjPyNzSr0AO5hRq7sCFO48JYvKKCcxGcWnV4XRW3t53hHKhh7nmdse5jAOS1aOVxpqtxwvfjnLqt3z3xczv63yV67f3F7Irfzv4nDSOYwq7HK579IFYQR+ToaGks+5WmuULu7tY0w0+pBDP3/tIYaInz/JPUTtP2tLc+h+9393Ygqfub7NU027u9jwMaOPBY9La/znwq2QmIbfLukuvxvs778G76TxMr/7vrSq/a1P4C7/ZOnCbBju8RbTNjlURamwtAXpGU2Je8DHcw5HeMoMmsICxh70jJRwh2PZUjflwlIqRZsFpgUWTb14/VlRAeP5HDGj1xvl14QAyHvpCiD/6ntA/tm3AK212bH0F2MAO3rxNrg/v7mn7YT/rfwNW/DvzMttNDcqMGy9lUDrP9l65LRyMTJ/X04Tk4YfUP3CkA+FR8/n8IlOzXk9tGMR3ZfQWoyQNJYha61iC3EXKoN9qLVOobdj9uGDeU2GonTYtphAmLEHkil/IZtxC1uIr6Cy5BfUZkJA73F4nnCwnsrF9ERYqIaiP6isOAgRLAvX/51k6zAljVb6TSnrIqSlpGabjxQoDbFLcycvW4qAssQeZpHLkXMMDYkNVWVXUUpzpOmysnfaFbPvLTyUEFSQGijyB1SqsEDo+YtF7vvfEanloFQz6ln1G0kyvXyQJkUqAvtoC6hRlzK0WUe61EIrAijb9mUemEUjxPEaAw3l6xmkUuxUdKg0jmg6WxnWtpve4R9t4x9mDPYCfaTIUaKKOppoo4s+Bu1rHZzGIKdVWmkSwyZN1Dj8G0F22aywQG16cTvv0Ogjmy68m6cJ8qRaPGPY1LThzH/cCpyjTQr+W/b2egAA') format('woff2'),
url('iconfont.woff?t=1587133346896') format('woff'),
url('iconfont.ttf?t=1587133346896') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587133346896#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-yinliang:before {
content: "\e662";
}
.icon-jingyin:before {
content: "\e61d";
}
.icon-replay:before {
content: "\e654";
}
.icon-play:before {
content: "\e80f";
}
.icon-shangyishou:before {
content: "\e603";
}
.icon-xiayishou:before {
content: "\e602";
}
.icon-zanting_huaban:before {
content: "\e637";
}
.icon-lunboyoufangun:before {
content: "\e7b7";
}
.icon-lunbozuofangun:before {
content: "\e7be";
}
javaScript:
{
// 获取页面id
let music = document.getElementById("music");
let image = document.getElementById("image");
let play = document.getElementById("play");
let prev = document.getElementById("prev");
let next = document.getElementById("next");
let mName = document.getElementById("mName");
let pName = document.getElementById("pName");
let eTime = document.getElementById("eTime");
let musJD = document.getElementById("musJD");
let bTime = document.getElementById("bTime");
let musBar = document.getElementById("musBar");
let musVol = document.getElementById("musVol");
let handle = document.getElementById("handle");
let replay = document.getElementById("replay");
let chagrSp = document.getElementById("chagrSp");
let cotrVolBtn = document.getElementById("cotrVolBtn");
let volV = document.getElementById("volV");
let tupian = image.parentNode;
// console.log(musVol.offsetWidth);
// 音乐库
let songs = [{
name : "Bloom of Youth",
singer:"清水準一",
mp3:"music/1.mp3",
img:"images/1.jpg"
},
{
name : "Refrain",
singer:"Anan Ryoko",
mp3:"music/2.mp3",
img:"images/2.jpg"
},
{
name : "Summer's Here",
singer:"Thomas Greenberg",
mp3:"music/3.mp3",
img:"images/3.jpg"
},
{
name : "Sunny Jim",
singer:"Deep East Music",
mp3:"music/4.mp3",
img:"images/4.jpg"
},
{
name : "いのちの名前",
singer:"広橋真紀子",
mp3:"music/5.mp3",
img:"images/5.jpg"
}];
// 定义函数
let changeMus = function( index ){
music.src = songs[index].mp3;
image.src = songs[index].img;
mName.innerHTML = songs[index].name;
pName.innerHTML = songs[index].singer;
musJD.style.width = 0;
};
let setVol = function( event ){
let x = event.offsetX;
let bfb = x / musVol.offsetWidth * 100;
handle.style.width = bfb + "%";
music.volume = bfb / 100;
volV.innerHTML = Math.floor(bfb)+ "%";
// console.log(volV.innerHTML);
if( music.volume <= 0 ){
music.muted = true;
cotrVolBtn.innerHTML = "<span class='iconfont icon-jingyin'></span>";
}else {
music.muted= false;
cotrVolBtn.innerHTML = "<span class='iconfont icon-yinliang'></span>";
}
};
let musicSchl = function( evetn ){
let x = event.offsetX;
let bfb = x / musBar.offsetWidth * 100;
musJD.style.width = bfb + "%";
music.currentTime = music.duration * bfb / 100;
play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
image.classList.add("rotate");
};
// 事件集合
let index = 0;
// 默认第一首
changeMus(index);
// 给play添加点击事件
play.addEventListener("click",function( event ){
if( music.paused ){
music.play();
event.currentTarget.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
// let tupian = image.parentNode;
image.classList.add("rotate");
// tupian.style.animationDuration = music.duration;
}else {
music.pause();
event.currentTarget.innerHTML = "<span class='iconfont icon-play'></span>";
// let tupian = image.parentNode;
image.classList.remove("rotate");
}
});
// 切换歌曲
prev.addEventListener("click", function ( event ) {
index--;
if( index <= -1 ){
index = songs.length-1;
}
changeMus( index );
play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
image.classList.add("rotate");
console.log( index );
});
next.addEventListener("click", function ( event ) {
index++;
if( index > songs.length-1 ){
index = 0;
}
changeMus( index );
play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
image.classList.add("rotate");
console.log( index );
});
// 歌曲事件
// 元素据加载,显示总时长,duration
music.addEventListener("loadedmetadata",function( event ){
let end = music.duration;
let m = Math.floor(end/60);
let c = Math.floor(end%60);
let ct = 0;
let cti = 0;
// console.log(m,c);
if( c < 10 ){
ct = "0"+c;
eTime.innerHTML = "0"+m+":"+ct;
}else if( c >= 10 ){
cti = c ;
eTime.innerHTML = "0"+m+":"+cti;
}
});
//canplay 切换歌曲是,顺利播放
music.addEventListener("canplay",function( event ){
music.play();
});
// 时间更新
music.addEventListener("timeupdate",function( event ){
let jd = music.currentTime / music.duration;
let bfb = jd*100 ;
musJD.style.width = bfb + "%";
let begin = music.currentTime;
let m = Math.floor(begin/60);
let c = Math.floor(begin%60);
if(c<10){
// console.log("0"+m,"0"+c);
bTime.innerHTML = "0"+m+":"+0+c;
}else if(c>=10){
// console.log(m,c);
bTime.innerHTML = "0"+m+":"+c;
}
});
// 歌曲进度条
musBar.addEventListener("click",function( event ){
musicSchl( event );
});
// 音量控制
musVol.addEventListener("click",function(){
setVol(event);
});
musVol.addEventListener("mousedown",function( event ){
musVol.addEventListener("mousemove",setVol);
});
musVol.addEventListener("mouseup",function( event ){
musVol.removeEventListener("mousemove",setVol);
});
//重新播放事件
replay.addEventListener("click",function( event ){
music.currentTime = 0;
play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
image.classList.add("rotate");
});
// 切换播放速度
chagrSp.addEventListener("change",function( event ){
music.playbackRate = event.currentTarget.value;
});
// 静音事件
cotrVolBtn.addEventListener("click",function( event ){
if( !music.muted ){
music.muted = true;
event.currentTarget.innerHTML = "<span class='iconfont icon-jingyin'></span>";
}else {
music.muted= false;
event.currentTarget.innerHTML = "<span class='iconfont icon-yinliang'></span>";
}
})
}