html5+JS制作音乐播放器 |
您所在的位置：网站首页 › html5播放音乐 › html5+JS制作音乐播放器 |
html5+JS制作音乐播放器
|
今天我们要实现的这个播放页面主要是通过audio标来实现，然后上一首、暂停等按钮时通过字体图标来实现的。 先看一下最终的效果： 这里最外层用来两个盒子photo和words，分别用来存放图片和歌词。然后左边盒子里面放了两个div标记，分别用来存放图片和图标。这里图标是用的子图图标来实现的。然后歌词部分是直接放在div里面的。 当前浏览器不支持audio 喜欢 收藏 下载 分享 ;;;; ;;;; ;;;; ;;;; ;;;; 歌词…… div> CSS部分：这一部分主要是设置了盒子的宽高、位置及字体。背景等。 #photo{ width: 550px; height: 600px; background-color: #191970; } #words{ width: 450px; height: 600px; background-color: #191970; text-align: center; color: white; line-height: 25px; } #photo,#words{float: left;} #photo2{ width: 350px; height: 350px; margin-top: 50px; background-image: url(img/1.jpg); background-size: contain; border: black 10px solid; border-radius: 50%; } button{ width: 80px; height: 30px; margin-top: 30px; margin-left: 20px; border: darkgray 1px solid; border-radius: 5px; color: dimgray; } button:hover{color: black;} #backward,#forward,#random,#volume{ font-size: 30px; color: white; } #playing{ font-size: 45px; color: white; } #point{ font-size:50px; margin-top:140px; margin-left:380px; } JS部分：这里主要是实现了播放、暂停、下一首、上一首和歌词的显示隐藏等效果。 播放/暂停： //先获取播放按钮 var Play=window.document.getElementById('music'); function playing(){ var Pause=document.getElementById('playing'); //判断是否在播放，如果在播放则点击时暂停，并且该图标的类名变为暂停样式。反之亦然。 if(Play.paused){ Play.play(); Pause.className='fa fa-pause-circle'; } else{ Play.pause(); Pause.className='fa fa-play-circle'; } }上一首/下一首： 这里是通过数组以及索引 i来实现他的路径的赋值，实现切换的效果。 let root="music/"; let songs=['1.mp3','2.mp3','3.mp3']; let i=0; var Pic=document.getElementById('photo2'); //上一首 function last(){ let song; i>0?--i:i=songs.length-1; Play.src = root+songs[i]; Play.play(); } //下一首 function next(){ if (++i>songs.length-1) { i=0 } let song=songs[i]; Play.src=root+song; Play.play(); }歌词显示/隐藏： 这里的效果是通过点击图标是盒子隐藏，再点击时盒子你隐藏，主要是通过display属性来实现的。 //歌词显示隐藏 function move(){ var Odiv=document.getElementById('words'); var Point=document.getElementById('point'); //通过类名来判断隐藏还是显示的效果 if(Point.className=='fa fa-angle-double-right'){ Odiv.style.display='none'; Point.className='fa fa-angle-double-left'; } else if(Point.className=='fa fa-angle-double-left'){ Odiv.style.display='block'; Point.className='fa fa-angle-double-right'; } } |
【本文地址】
今日新闻 |
推荐新闻 |