如何做一个简单好玩的音乐网页

如何做一个简单好玩的音乐网页

作者：朝思
下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件
一共分为两部分：
一：播放部分
二：钢琴部分

由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作
其他就是钢琴部分，我把这分为两个html写入，把另一个小的用iframe标签嵌入进去

首先是布局，第一部分的布局十分简洁，一个时间+四个按钮，然后就是一些歌曲

然后就是css样式，可以说是十分简洁了

接下来就是重点，javascript的写法，主要就是简单的if 和for循环
这个是鼠标点击事件

这个是键盘的点击事件

再加一个自动播放，获取到音乐的时长，我把结尾减去了5秒

调用的方法在这里
//播放
function one(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].play();
}
tranfor = false;
}
//暂停
function two(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].pause();
}
tranfor = false;
}
//上一首
function three(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var leftBtn = ind-1;
if(leftBtn < 0){
alert(“已经到顶了!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[leftBtn].play();
musiclist[ind].pause();
}
ind–;
}
tranfor = false;
}
//下一首
function four(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var rightBtn = ind+1;
if(rightBtn === musiclist.length){
alert(“居然没有歌了，快去添加吧!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[rightBtn].play();
musiclist[ind].pause();
}
ind++;
}
tranfor = false;
}

接下来就是钢琴的部分
钢琴我把它分为了二个部分，一个是上面的词谱，另一个便是下面的钢琴按键部分，然后在右上角我给了一个背景音乐的按钮

首先html部分，一样的简洁

然后css部分，词谱部分是一个轮播的格式，钢琴按键部分排列整齐便可

Javascript部分更加简洁，首先是词谱的左右换页

然后再是背景音乐按钮的点击事件

接下来就是核心，钢琴按钮的点击事件，先是鼠标的点击

然后再加上按键的点击事件
就这样，一个简洁好用的音乐网页便完成了