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

（三）功能开发

接上文，我们现在开始编写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代码已经输入完成，播放器的功能全部实现，下一步我们将对代码精简提炼，进行封装。

需要源代码的可以留言。

原文地址：https://www.cnblogs.com/helpall/p/10262218.html

时间： 2024-08-28 06:10:44

网页播放器系列教程（四）--功能开发的相关文章

ckplayer网页播放器使用教程

前言 ckplayer是一款在网页上播放视频的免费视频插件,该插件兼容性强.使用简单.api齐全.另外,任何个人网站或商业网站在不修改右键版权的基础上都可以免费使用. 下面将对ckplayer的整个使用过程做一遍简单的说明与演示(想了解更多功能请访问官网).有兴趣的朋友可以跟着做一遍. 本文涉及环境 开发工具:hbuilder ckplayer版本:ckplayer v6.7(插件下载地址:点击下载) 浏览器:chrome v48.0.2564.82 注意:ckplayer插件要在服务器环境中使

网页播放器开发（四）代码精炼提纯

四.精简提炼 我们的播放器基本实现了,但是代码复用不高,所以我们要进行封装,以插件的形式体现. 1.插件的基本运行代码如下:  ;(function(undefined){ 'use strict'; ... ... })() 上述代码就是基本的插件代码,下面详细记录这段代码所表示的意思. 前面的分号,可以解决插件与其它js合并时,别的代码可能会产生的错误问题: “(function(){})()”这个结构表示立即执行第一个括号内的函数,其实立即执行函数还有另一种写法,“(function(){

网页播放器开发（三）--页面展示

(二)页面展示 各位朋友大家好,我们接着上文继续开发,这一节我们主要是把上一节最后的图片素材从新组合,用web形式展现,我们用到的主要工具是:HBuilderX,这个工具我就不介绍了,上手很容易,很好用的,具体情况大家可以百度研究一下. 1.新建项目 首先启动HBuilderX开发工具,新建一个项目,具体操作"文件"→"新建"→"项目"如图2-1所示. 图2-1 新建项目 在弹出的对话框中选择普通项目,项目名称填入"网页播放器"

基于ffmpeg网络播放器的教程与总结

基于ffmpeg网络播放器的教程与总结 一.         概述 为了解决在线无广告播放youku网上的视频.(youku把每个视频切换成若干个小视频). 视频资源解析可以从www.flvcd.com获取,此网站根据你输入的优酷的播放网页地址解析成若干个真实的视频地址. 二.         实现 首先搜索关闭网络播放器(流媒体播放器的实现方法) 得出的结论,目前主流的播放器分三大阵营微软,苹果,基于FFmpeg内核的.所以我决定从ffmpeg开源的播放器入手. 最出名的ffmpeg播放器vc

网页播放器

1.avi格式代码片断如下:<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"><param name="ShowDisplay" value="0"><param name=

最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）

本文继续上一篇文章,记录一些基于Flash的流媒体处理的例子.本文记录一些基于Flash技术的网页播放器.基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是"免插件安装"了,这一点可以很大的提高用户的体验质量.早些时候网络视频(尤其是直播)一般都使用ActiveX控件作为视频播放器,而这些控件并不普及,所以终端用户必须下载相关的插件才能收看节目,因而对很多不熟悉电脑的用户造成了很大的障碍.直到Flash网页播放器的出现,这一障碍才得到了解决.本文将会记录几个常用的网页播放

webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的. 目前webpack针对此项功能提供 2 种函数: import(): 引入并且自动执行相关 js 代码 require.ensure(): 引入但需要手动执行相关 js 代码 本文将会进行逐一讲解. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 此次代码

仿照网易云音乐项目（自制音乐网页播放器）

最近准备把上一周做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结. 相关功能如下: 1.通过后台页面上传歌曲.编辑歌曲功能.    2.前端页面自动更新播放热度高的歌曲    3.在线听歌.查看歌词.且配有相应的播放动画. 原文地址:https://www.cnblogs.com/gitnull/p/10041183.html

史上最详细的Android Studio系列教程四--Gradle基础

史上最详细的Android Studio系列教程四--Gradle基础