网页播放器系列教程（四）--功能开发

（三）功能开发

接上文，我们现在开始编写javascript代码，前文我们主文件已经引入了js文件，只需在js文件中编写代码。

1.播放音频；

怎样才能让页面播放音频呢？这需要“audio”标签，但是我们不是在页面总插入改标签，而是用js实现，只需编写如下代码：

var musicaudion = document.createelement("audio")
musicaudion.setattribute('autoplay',true)
document.body.appendchild(musicaudion);
musicaudion.setattribute("src", "mp3/01.mp3");

这里面要在项目根目录中添加mp3目录，并添加01.mp3音频文件，这样我们的网页就可以播放 "mp3/01.mp3"了。

但是这样写十分不利于我们复用，同时我们需要播放歌曲列表，所以进行了简单改进。

一定义播放歌曲列表内容：

var songlist = [{
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "张三"
    },
    {
        "songname": "angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "new thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "boys",
        "songurl": "04.mp3",
        "songer": "boy"
    },
    {
        "songname": "在一起",
        "songurl": "05.mp3",
        "songer": "girl"
    },
    {
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "张三"
    },
    {
        "songname": "angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "new thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "boys",
        "songurl": "04.mp3",
        "songer": "boy"
    },
    {
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "张三"
    },
    {
        "songname": "angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "new thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "boys",
        "songurl": "04.mp3",
        "songer": "boy"
    }
]

二是定义播放函数以便播放歌曲时重复利用。

上面定义的“musicaudion”和“两个全局变量”，同时我们还需要定义一个全局变量currentid，表示前歌曲播放序号代码如下： 

//当前歌曲播放序号，最小值为0，最大值为songlist数组的长度减一
var currentid=0;

 在函数中我们需要用到，具体代码如下： 

//播放歌曲函数，songid表示songlist数据数组序号
function playsong(songid) {
// 设置播放文件路径,从数组songlist中获取
musicaudion.setattribute("src", "mp3/" + songlist[songid].songurl);
//获取歌曲名称song_name和歌曲作者singer并动态设置
document.getelementbyid("song_name").innerhtml = songlist[songid].songname;
document.getelementbyid("singer").innerhtml = songlist[songid].songer;
//播放歌曲
musicaudion.play();
}

 

这样我们的播放函数就编写好了，最开始的代码“musicaudion.setattribute("src", "mp3/01.mp3");”修改为“playsong(currentid);”

2.歌曲播放、暂停、切换功能；

实现这些功能我们首先获取html中div变成js对象在进行相应设置，具体代码如下，有详细的注解：

播放暂停功能代码 

//定义全局变量isplay，0表示当前歌曲状态播放状态，1表示暂停状态
var isplay = 0;
//首先获取id为“button_play”按钮，然后设置单击事件
document.getelementbyid("button_play").onclick = function() {
//当歌曲为播放状态，单击变为暂停状态，歌曲暂停
if (isplay == 0) {
//设置我们定义的暂停样式
this.classname = "button_pause";
isplay = 1;
musicaudion.pause();
} else {
//当歌曲为暂停状态，单击变为播放状态，歌曲播放
this.classname = "button_play";
isplay = 0;
musicaudion.play();
}
};

 上一首，下一首歌曲功能。 

//上一首

document.getelementbyid("button_pre").onclick = function() {
//判读是否为第一首歌曲，如果是第一首歌曲，序号变为最后一首歌曲，不是第一首歌曲，歌曲切换到下一首
if (currentid > 0) {
currentid--;
} else {
currentid = songlist.length - 1;
}
playsong(currentid)
}

//下一首
document.getelementbyid("button_next").onclick = function() {
if (currentid < songlist.length - 1) {
currentid++;
} else {
currentid = 0;
}
playsong(currentid)
}

 

3.播放进度条功能；

该功能我们需要一个定时函数，随着歌曲的播放进度实时进行更新进度条，同时为进度条添加单击功能，调整播放进度，局具体代码如下： 

//设置定时器
var t = setinterval(function() {
//获取歌曲当前播放百分比
var percent = math.floor(musicaudion.currenttime / musicaudion.duration * 10000) / 100 + "%";
//设置播放头位置
document.getelementbyid("progressbar_playhead").setattribute("style", "left:" + percent);
//设置歌曲当前时间
document.getelementbyid("songcurrenttime").innerhtml = conversion(musicaudion.currenttime)
}, 100)
//单击进度条 调整发播放进度
document.getelementbyid("progressbar_box").onclick = function(e) {
//获取鼠标单击进度条位置
var x = (e || window.event).clientx;
//计算进度条移动距离
var left = x - this.offsetleft - document.getelementbyid("progressbar_playhead").offsetwidth;
//设置播放头位置
document.getelementbyid("progressbar_playhead").style.left = left + 'px';
//计算总的进度条长度
var maxwidth = document.getelementbyid("progressbar_box").offsetwidth - document.getelementbyid("progressbar_playhead").offsetwidth;
//计算当前点击进度百分比百分比
var p = left / maxwidth
//设置当前播放时间点到点击位置
musicaudion.currenttime = p * musicaudion.duration;
//播放音乐
musicaudion.play();
};

 时间格式显示函数。 

//时间格式转换函数
function conversion(value) {
let minute = math.floor(value / 60)
minute = minute.tostring().length === 1 ? ('0' + minute) : minute
let second = math.round(value % 60)
second = second.tostring().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}

 这样我们的进度条已经设置完成了，这里介绍一下setinterval函数，这个函数是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setinterval方法会不停地调用函数，直到 clearinterval被调用或窗口被关闭。

4.随机播放，循环播放功能。

这部分的代码也是很简单，大同小异，代码如下，注释很详细： 

var isplaystate=0;//0顺序播放,1随机播放,2单曲循环
//随机播放按钮
var randombtn = document.getelementbyid("songoption_shuffle");
var onereplaybtn = document.getelementbyid("songoption_replay");
randombtn.onclick = function() {
if (isplaystate == 1) {
isplaystate = 0;
this.classname = "songoption_shuffle"
return;
}
if (isplaystate == 2) {
onereplaybtn.classname = "songoption_replay";
}
isplaystate = 1;
this.classname = "songoption_shuffle_on"
}
onereplaybtn.onclick = function() {
if (isplaystate == 2) {
isplaystate = 0;
this.classname = "songoption_replay"
return;
}
if (isplaystate == 1) {
randombtn.classname = "songoption_shuffle";
}
isplaystate = 2;
this.classname = "songoption_replay_on"
}

 这里需要更改一下css代码，“#songoption_shuffle”，更改为“.songoption_shuffle”；“#songoption_shuffle_on”，更改为“.songoption_shuffle_on”；“#songoption_replay”，更改为“.songoption_replay”；“#songoption_replay_on”，更改为“.songoption_replay”。html代码中id为“songoption_shuffle”添加css样式“songoption_shuffle”；id为“songoption_replay”添加css样式“songoption_replay”。原因是我们js代码中要切换样式。

这样我们的样式功能切换就实现了，还需要在setinterval函数中添加代码实现循环、重复功能，具体代码如下： 

//判断个歌曲是否结束
if (musicaudion.ended) {
if (isplaystate == 0) //顺序播放
{
if (currentid < songlist.length - 1) {
currentid++;
} else {
currentid = 0;
}
} else if (isplaystate == 1) //随机播放
{
currentid = math.floor(math.random() * songlist.length - 1)
} else //单曲循环
{
currentid = currentid;
}
playsong(currentid);
}

 

5.音量调节功能；

音量调节需要一个初始数值，所以我们进行了如下设置： 

//初始音量
var soundstart = 0.3;
//计算音量最大移动数值
var soundmax = document.getelementbyid("songoption_soundbox").offsetwidth - document.getelementbyid("songoption_soundhead").offsetwidth;
//设置音量初始位置
document.getelementbyid("songoption_soundhead").style.left = (soundmax * soundstart) + 'px';
document.getelementbyid("songoption_soundcurrent").style.width = soundstart * 100 + '%';
musicaudion.volume = soundstart;
//音频载入完成
musicaudion.onloadedmetadata = function() {
//歌曲总的显示时间
document.getelementbyid("songalltime").innerhtml = conversion(musicaudion.duration)
}

 设置音量调节功能，具体代码如下： 

//调整音量
document.getelementbyid("songoption_soundhead").onmousedown = function(e) {
var x = (e || window.event).clientx;
var l = this.offsetleft;
var max = document.getelementbyid("songoption_soundbox").offsetwidth - this.offsetwidth;
document.onmousemove = function(e) {
var thisx = (e || window.event).clientx;
var to = math.min(max, math.max(-2, l + (thisx - x)));
if (to < 0) {
to = 0;
}
document.getelementbyid("songoption_soundhead").style.left = to + 'px';
//此句代码可以除去选中效果
window.getselection ? window.getselection().removeallranges() : document.selection.empty();
musicaudion.volume = to / max;
//document.queryselector('.now')
document.getelementbyid("songoption_soundcurrent").style.width = to / max * 100 + '%';
}
//注意此处是document 才能有好的拖动效果
document.onmouseup = function() {
document.onmousemove = null;
};
}

 

6.音频列表。

初始数据 

var htmlinsert = "";
for (var i = 0; i < songlist.length; i++) {
htmlinsert += '<li onclick="playsong(' + i + ')"><span>' + songlist[i].songname + '</span> </li>';
}
var musiclistbox = document.getelementbyid('songlist_box');
musiclistbox.innerhtml = htmlinsert;
var lis = musiclistbox.childnodes;
var onesong = lis.item(0);
var gundongheight = onesong.offsetheight;

 在play函数中添加如下代码 

//设置歌曲库
for (var i = 0; i < lis.length; i++) {
if (songid == i) {
lis.item(i).setattribute("class", "currentsong")
} else {
lis.item(i).setattribute("class", "")
}
}
//歌曲库滚动到相应歌曲
if (songid > 2) {
document.getelementbyid('playmusic_songlist').scrolltop = gundongheight * (songid - 1);
} else {
document.getelementbyid('playmusic_songlist').scrolltop = 0;
}

这样我们的所有js代码已经输入完成，播放器的功能全部实现，下一步我们将对代码精简提炼，进行封装。

需要源代码的可以留言。