html音乐播放器 利用css和js知识来创建一个音乐播放器(虽然简陋,但是逻辑很容易懂,适合初学者)
作为初学者,制作一个网页播放器来提高我们编写代码水平很有用。html部分,把你要的歌曲放到src里面就可以了。
·
作为初学者,制作一个网页播放器来提高我们编写代码水平很有用
这是css部分,很简单,随便信息样式就行
.musicDiv{
width: 250px;
height: 70px;
background-color: red;
position: relative;
overflow: hidden;
}
.xia,.kais,.shang{
width: 60px;
float: left;
}
.musicAdress{
height: 70px;
}
i{
line-height: 70px;
text-align: center;
font-style: normal;
font-size: 50px;
padding-left: 22.5px;
}
这里是js部分,我思路是先给播放键绑定事件,按下播放键为每一首歌曲绑定监听事件,记录他们播放结束,当播放结束后,歌曲会自动切换为下一首,用一个x来记录我当前播放歌曲的序号,
然后通过x+1来自动切换到下一首,而这个index是为手动切换上下歌曲服务的,这里用index来记录我当前播放歌曲,上下手动切换通过index--,index++实现。
<script>
window.onload=function(){
//获取元素
var bof=document.getElementById("bof")
var musicList=document.getElementsByClassName("musicList")
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var pause=document.getElementById("pause");
//初始化音乐列表下标
var index=0
//设置播放暂停标志,一开始是播放的标志
var flag=true
bof.onclick=function(){
/* console.log(index%musicList.length) */
if(flag){
musicList[index].play();
bof.className="icon-zanting"//当为播放标志
flag=false
for(var i=0;i<musicList.length;i++){
musicList[i].num=i
//为每一首歌曲添加一个绑定事件
musicList[i].addEventListener("ended",function(){
x=this.num
/*
这个很重要,是记录你当前点击绑定的歌曲的序号
*/
if(x>=musicList.length-1){
/*这个是用来判断当前播放歌曲是否超出音乐列表的范围
当超过重新从0开始
*/
x=0
musicList[x].play();
index=x//为切换歌曲服务
}else{
musicList[x+1].play();
index=x+1//为切换歌曲服务
}
/* alert((x+1)%musicList.length)*/
},false);
}
}else{
musicList[index].pause();
bof.className="icon-bofangjian"
flag=true
}
}
pre.onclick=function pre(){
/* console.log(index%musicList.length) */
/* if(index<0){
musicList[musicList.length].play();
} */
musicList[index].pause();
bof.className="icon-zanting"
flag=false
/*上面这两行代码解释下,因为一开始打开页面,是icon-bofangjian状态,按下键歌曲就会播放,然后变为icon-zanting状态,按播放下一首,应该以icon-zanting状态,flag值为flase,此时你想按暂停,键位就切换到icon-bofangjian状态
*/
//musicList[index].currenTime=0
index--
/* console.log(index%musicList.length) */
if(index<0){
//当歌曲为第0首,下一首要切换为最后一首
index=musicList.length-1;
}
musicList[index].play();
}
next.onclick=function next(){
/* console.log(index%musicList.length) */
/* if(index>musicList.length){
musicList[0].play();
} */
musicList[index].pause();
bof.className="icon-zanting"
flag=false
//musicList[index].currenTime=0
index++
//当歌曲为最后一首时候,下一首要切换为第0首
if(index>=musicList.length){
index=0
}
musicList[index].play();
}
}
html部分,把你要的歌曲放到src里面就可以了
<body>
<div class="musicDiv iconfont">
<div class="shang">
<i class="icon-shangyishoushangyige" id="pre"></i>
</div>
<div class="kais">
<i class="icon-bofangjian" id="bof"></i>
</div>
<div class="xia">
<i class="icon-xiayigexiayishou" id="next"></i>
</div>
<div class="musicAdress">
<audio src="../music/认真地老去.flac" controls class="musicList"></audio>
<audio src="../music/漠河舞厅.mp3" controls class="musicList"></audio>
<audio src="../music/夏天的风.m4a" controls class="musicList"></audio>
<audio src="../music/想去海边.mp3" controls class="musicList"></audio>
<audio src="../music/慢慢喜欢你.m4a" controls class="musicList"></audio>
</div>
</div>
</body>
演示视频我放主页视频这里了,有什么见解欢迎讨论,谢谢大家
更多推荐
已为社区贡献1条内容
所有评论(0)