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

四、精简提炼

我们的播放器基本实现了，但是代码复用不高，所以我们要进行封装，以插件的形式体现。

1.插件的基本运行代码如下： 

;(function(undefined){

‘use strict‘;

... ...

})()

上述代码就是基本的插件代码，下面详细记录这段代码所表示的意思。

前面的分号，可以解决插件与其它js合并时，别的代码可能会产生的错误问题；

“(function(){})()”这个结构表示立即执行第一个括号内的函数,其实立即执行函数还有另一种写法，“(function(){}())”。看大家的喜好，我一般喜欢用第一种；

“undefined”做为参数传入，因为在老一辈的浏览器是不被支持的，直接使用会报错，js框架要考虑到兼容性，因此增加一个形参undefined，就算有人把外面的 undefined 定义了，插件里面的 undefined 依然不受影响。

严格模式开发

下面进一步补充代码函数内代码：

‘use strict‘;

这行代码表示严格模式，顾名思义，严格模式就是使得 Javascript 在更严格的条件下运行，有助于我们更规范的开发。如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。如果在运行期出现了违反严格模式的代码，则抛出执行异常。

定义我们的播放器插件“playMythology”

下面我们真正开始我们的插件代码了，目前整个代码如下：

;(function(undefined){
‘use strict‘;
var _global;
function playMythology(opt) {
... ...
}
playMythology.prototype = {}；
//将插件对象暴露给全局对象
_global = (function() {
return this || (0, eval)(‘this‘);
}());
if (typeof module !== "undefined" && module.exports) {
module.exports = playMythology;
} else if (typeof define === "function" && define.amd) {
define(function() {
return playMythology;
});
} else {
!(‘playMythology‘ in _global) && (_global.playMythology = playMythology);
}
})()

定义“_global”，并把全局环境赋值给一个_global。

并把当前顶级对象赋值给这个变量，代码如下：

_global = (function() {
return this || (0, eval)(‘this‘);
}());

看这段代码又是个立即执行函数，不是上面提到的第一种的立即执行函数，而是这种第二种立即执行函数：（functiong(){}）结构；首先先介绍一下eval()函数的作用：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行，如果参数是一个表达式，eval() 函数将执行表达式，如果参数是Javascript语句，eval()将执行 Javascript 语句。然后在逐一分析语句：return this表示返回当前对象；第一个括号内的逗号操作符 对它的每个操作数求值（从左到右），并返回最后一个操作数的值，那么这个(0, eval)(‘this‘)相当于eval（‘this’），那么为什么不用eval（‘this’），而用(0, eval)(‘this‘)呢？在严格模式下，如果没有给 this指定值的话，它就是未定义的，为了防止在严格模式下window变量被赋予undefined，使用(0, eval)(‘this’)就可以把this重新指向全局环境对象。因为(0, eval)(‘this’)通过逗号表达式对它的操作数执行了GetValue，计算出一个值，让this的值指向了全局对象；而eval（‘this’）计算出的是一个引用，是一个直接调用，方法中的this值是obj的引用。

定义“playMythology”，表示我们插件的名称。然后我们给这个函数添加属性，通过prototype来添加，简单解释一下prototype是函数的一个属性，并且是函数的原型对象。prototype只能够被函数调用。

为了实现插件的模块化并且让我们的插件也是一个模块，就得让我们的插件也实现模块化的机制。这只需要判断是否存在加载器，如果存在加载器，我们就使用加载器，如果不存在加载器。我们就使用顶级域对象。下面代码就实现了这个功能：

if (typeof module !== "undefined" && module.exports) {

module.exports = playMythology;

} else if (typeof define === "function" && define.amd) {

define(function() {

return playMythology;

});

} else {

!(‘playMythology‘ in _global) && (_global.playMythology = playMythology);

}

介绍一下主要的运算符：“==”表示相等；“===”表示绝对相等；“!=”表示不相等；“!==”，表示严格不相等。JavaScript中，unll与undefined并不相同，但是null==undefined为真，null===undefined为假,所以null !== undefined 为真。

“typeof ”表示返回数据类型，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。返回类型为字符串，值包括如下几种：

1. ‘undefined‘              --未定义的变量或值

2. ‘boolean‘                 --布尔类型的变量或值

3. ‘string‘                     --字符串类型的变量或值

4. ‘number‘                  --数字类型的变量或值

5. ‘object‘                    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)

6. ‘function‘                 --函数类型的变量或值module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。这种方法可以返回全局共享的变量或者方法。

介绍一下AMD,AMD是一种规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。感兴趣的朋友可以认真研究一下，requireJS，NodeJs，Dojo，JQuery全部在使用，可见它的价值。

2.基本函数

引入CSS文件函数：前端开发引入CSS文件是必不可少的，css主要功能是对页面布局进行美化，我希望开发的插件的皮肤可以动态设置，所以要动态引入CSS文件，定义了引入CSS文件函数，具体代码如下：

//path表示引入CSS文件路径

function cssinto(path) {

//如果CSS文件错误，抛出错误异常

if (!path || path.length === 0) {

throw new Error(‘argument "path" is required !‘);

}

//获取head 对象

var head = document.getElementsByTagName(‘head‘)[0];

//创建link标签并插入到head标签内

var link = document.createElement(‘link‘);

link.href = path;

link.rel = ‘stylesheet‘;

link.type = ‘text/css‘;

head.appendChild(link);

}

时间转换函数：主要功能，讲audio currentTime 时间戳转换转化成“分:秒”显示格式。

//path表示引入CSS文件路径

//时间显示转换

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

}

引入json文件函数：file值json文件路径，callback只得是回调函数，当文件加载完毕就调用该函数。

function readTextFile(file, callback) {

var rawFile = new XMLHttpRequest();

rawFile.overrideMimeType("application/json");

rawFile.open("GET", file, true);

rawFile.onreadystatechange = function() {

if (rawFile.readyState === 4 && rawFile.status == "200") {

callback(rawFile.responseText);

}

}

rawFile.send(null);

}

getElementsByClass：因为我们未讲window传入插件，所以有些方法我们是不能使用的，所以我们定义下面方法实现，通过class查找html中dom对象。

//判断插件是否存在“getElementsByClass”，没存在，将使用下面方法实现该功能。

if (!(‘getElementsByClass‘ in HTMLElement)) {

//prototype在前面已经提到过了，通过“prototype”给HTMLElement添加属性方法“getElementsByClass”

HTMLElement.prototype.getElementsByClass = function(n) {

var el = [],

_el = this.getElementsByTagName(‘*‘);

for (var i = 0; i < _el.length; i++) {

if (!!_el[i].className && (typeof _el[i].className == ‘string‘) && _el[i].className.indexOf(n) > -1) {

el[el.length] = _el[i];

}

}

return el;

};

((typeof HTMLDocument !== ‘undefined‘) ? HTMLDocument : Document).prototype.getElementsByClass = HTMLElement.prototype

.getElementsByClass;

}

参数合并函数： 对象合并，这个主要用于插件默认参数赋值操作，如果设置就使用新的参数，如果不设置就使用默认参数

//表示原有参数，n表示新参数，override表示是否进行覆盖

function extend(o, n, override) {

for (var key in n) {

if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {

o[key] = n[key];

}

}

return o;

}

3.基本功能

参数初始化,里面有详细的注释。

_initial: function(opt) {

// 默认参数

var def = {

skinID: "default", //默认皮肤路径

domID: "musicbox" //设置播放器容器ID

};

//如果函数初始化时，设置参数时，进行合并，如果没有设置使用默认参数

this.def = extend(def, opt, true);

//用于JSON文件存储数据

this.data = {};

//播放器初始音量为0.3

this.sound = 0.3;

this.currentID = 0;

//创建audion

this.audion = document.createElement("AUDIO");

//获取播放器dom对象

this.dom = document.getElementById(def.domID);

//播放器初始音量

this.audion.volume = this.sound;

//定义定时器，用于进度条调整，歌曲滚动等功能

this.timecolick;

//歌曲容器

this.songBox;

//播放器状态，0表示顺序播放；1表示循环播放；2表示随机播放。

this.isPlayState = 0;

//歌曲列表用于存储歌曲数据

this.songList;

//歌曲播放进度条

this.songProgress;

//播放进度条上的播放头

this.songPlayHead;

//判断歌曲是否允许滚动，0表示允许，1表示不允许

this.isSlide = 0;

//播放进度，0表示初始位置

this.playprogress = 0;

//最大

this.playMax = 0;

//播放器是否在播放，0表示正在播放，1表示暂停

this.isPlaying = 0;

//歌曲列表滚动距离

this.scollHeight = 20;

//初始化播放器，并开始播放

this._GetData();

},

播放器界面初始化，并播放歌曲

//设置播放器界面

var _this = this;//把当前对象存到_this

//初始化CSS文件

cssinto("skin/" + this.def.skinID + "/css/music.css");

//读取json数据

readTextFile("skin/" + this.def.skinID + "/data.json", function(text) {

//数据读取到data

_this.data = JSON.parse(text);

//把界面HTML代码插入容器，界面初始化

_this.dom.innerHTML = _this.data[0].MusicHtml;

//设置歌曲列表

var htmlinsert = "";

//过去歌曲容器dom对象

_this.songBox = _this.dom.getElementsByClass(_this.data[0].musiclistbox)[0];

//存储歌曲数据

_this.songList = _this.data[0].Songlist;

for (var i = 0; i < _this.songList.length; i++) {

htmlinsert += ‘<li><span>‘ + _this.songList[i].songname + ‘</span></li>‘;

}

_this.songBox.innerHTML = htmlinsert;

//设置音乐列表单击事件

for (var i = 0; i < _this.songBox.childNodes.length; i++) {

(

function(j) {

_this.songBox.childNodes[j].onclick = function() {

_this._PlaySong(j);

}

})(i)

}

//所有数据加载完毕，开始播放歌曲

_this._PlaySong(0);

暂停播放功能。

//播放停止按钮事件 _this.dom.getElementsByClass(_this.data[0].playBT)[0].onclick = function(e) {

//如果正在播放则停止播放

if (_this.isPlaying == 0) {

this.className = "playbutton";

_this.isPlaying = 1;

_this.audion.pause()

} else //如果停止播放则开始播放

{

this.className = "pausebutton";

_this.isPlaying = 0;

_this.audion.play();

}

}

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

//上一首按钮

_this.dom.getElementsByClass(_this.data[0].preBton)[0].onclick = function(e) {

if (_this.currentID > 0) {

_this.currentID--;

} else {

_this.currentID = _this.songList.length - 1;

}

_this._PlaySong(_this.currentID)

}

//下一首按钮

_this.dom.getElementsByClass(_this.data[0].nextBton)[0].onclick = function(e) {

if (_this.currentID < _this.songList.length - 1) {

_this.currentID++;

} else {

_this.currentID = 0;

}

_this._PlaySong(_this.currentID)

}

随机播放功能，按钮点击后歌曲将实现随机播放。

//随机播放按钮

var randombtn = _this.dom.getElementsByClass(_this.data[0].randombtn)[0];

randombtn.onclick = function(e) {

if (_this.isPlayState == 1) {

_this.isPlayState = 0;

this.className = _this.data[0].shuffle;

return;

}

if (_this.isPlayState == 2) {

onereplay.className = _this.data[0].replay;

}

_this.isPlayState = 1;

this.className = _this.data[0].shuffleon;

}

单曲循环功能，按钮点击后歌曲将实现单曲循环播放。

//单曲循环按钮

var onereplay = _this.dom.getElementsByClass(_this.data[0].onereplay)[0];

onereplay.onclick = function(e) {

if (_this.isPlayState == 2) {

_this.isPlayState = 0;

this.className = _this.data[0].replay;

return;

}

if (_this.isPlayState == 1) {

randombtn.className = _this.data[0].shuffleon;

}

_this.isPlayState = 2;

this.className =  _this.data[0].replay;

}

音量调节功能,拖放调节音量功能。

//音量调节按钮

var soundHead = _this.dom.getElementsByClass(_this.data[0].soundHead)[0];

var soundBox = _this.dom.getElementsByClass(_this.data[0].soundBox)[0];

var soundCurrentTime = _this.dom.getElementsByClass(_this.data[0].soundCurrentTime)[0];

soundHead.style.left = _this.sound * 100 + ‘px‘;

soundCurrentTime.style.width = _this.sound * 100 + ‘%‘;

soundHead.onmousedown = function(e) {

var x = (e || window.event).clientX;

var l = this.offsetLeft;

var max = 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;

}

soundHead.style.left = to + ‘px‘;

//此句代码可以除去选中效果

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

_this.audion.volume = to / max;

//document.querySelector(‘.now‘)

soundCurrentTime.style.width = to / max * 100 + ‘%‘;

}

//注意此处是document 才能有好的拖动效果

document.onmouseup = function() {

document.onmousemove = null;

};

}

进度条功能。

//获取进度条dom

_this.songProgress = _this.dom.getElementsByClass(_this.data[0].SongProgress)[0];

//获取进度条上的播放头

_this.songPlayHead = _this.dom.getElementsByClass(_this.data[0].playHead)[0];

//单击进度条 调整发播放进度

_this.songProgress.onclick = function(e) {

var x = (e || window.event).clientX;

var left = x - this.offsetLeft - _this.songPlayHead.offsetWidth;

var maxwidth = _this.songProgress.offsetWidth;

_this.dom.getElementsByClass(_this.data[0].playHead)[0].style.left = left + ‘px‘;

var currenttime = _this.audion.duration * (left / maxwidth)

var p = left / maxwidth

_this.audion.currentTime = p * _this.audion.duration;

_this.audion.play();

};

//拖动播放头，调整播放进度

_this.songPlayHead.onmousedown = function(e) {

var x = (e || window.event).clientX;

var l = this.offsetLeft;

var max = _this.songProgress.offsetWidth - this.offsetWidth;

_this.playMax = max;

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;

}

_this.playprogress = to;

_this.isSlide = 1;

_this.songPlayHead.style.left = to + ‘px‘;

_this.dom.getElementsByClass(_this.data[0].SingerCurrentTime)[0].innerHTML = conversion(_this.audion.duration * (_this

.playprogress / _this.playMax));

//此句代码可以除去选中效果

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

// _this.audion.currentTime = to / max;

}

//注意此处是document 才能有好的拖动效果

document.onmouseup = function() {

_this.isSlide = 0;

_this.audion.currentTime = (_this.playprogress / _this.playMax) * _this.audion.duration;

_this.audion.play();

document.onmousemove = null;

};

定时函数功能

//定时函数

_this.timecolick = setInterval(function() {

if (_this.isSlide == 1) {

return;

}

//设置进度条

var percent = Math.floor(_this.audion.currentTime / _this.audion.duration * 10000) / 100 + "%";

_this.songPlayHead.style.left = percent;

//设置当前播放时间

_this.dom.getElementsByClass(_this.data[0].SingerCurrentTime)[0].innerHTML = conversion(_this.audion.currentTime);

if (_this.audion.ended) {

if (_this.isPlayState == 0) //顺序播放

{

if (_this.currentID < _this.songList.length - 1) {

_this.currentID++;

} else {

_this.currentID = 0;

}

} else if (_this.isPlayState == 1) //随机播放

{

_this.currentID = Math.floor(Math.random() * _this.songList.length - 1)

} else //单曲循环

{

_this.currentID = _this.currentID;

}

console.log(_this.currentID)

_this._PlaySong(_this.currentID);

}

}, 100)

歌曲播放功能

__PlaySong: function(songID) {

var _this = this;

this.audion.setAttribute("src", this.data[0].Songlist[songID].songurl);

this.dom.getElementsByClass(this.data[0].SongName)[0].innerHTML = _this.data[0].Songlist[songID].songname;

_this.dom.getElementsByClass(this.data[0].Singer)[0].innerHTML = this.data[0].Songlist[songID].songer;

_this.audion.onloadedmetadata = function() {

_this.dom.getElementsByClass(this.data[0].SingerCurrentTime)[0].innerHTML = conversion(_this.audion.currentTime);

_this.dom.getElementsByClass(this.data[0].showalltime)[0].innerHTML = conversion(_this.audion.duration)

}

this.audion.play();

var Songlist = _this.songBox.childNodes;

for (var i = 0; i < Songlist.length; i++) {

if (songID == i) {

Songlist.item(i).setAttribute("class", this.data[0].currentSong);

} else {

Songlist.item(i).setAttribute("class", "")

}

}

//console.log(_this.scollHeight*songID)

_this._scollToMusiclist(songID, _this.dom.getElementsByClass(this.data[0].MusicList)[0])

}

歌曲滚动功能。

_scollToMusiclist: function(singID, wmusicbox) {

//ok  2019年4月5日，终于调试成功，长时间不开发真的不行，好多事情想不到，刚才不停的滚动现象是由于我没有对最大值进行判断，如果超过最大值，我们需要把最大值赋给变量，那样就不会不停的闪烁了。

var gundong = singID * 20;

var maxgundong = wmusicbox.scrollHeight - wmusicbox.offsetHeight;

if (gundong > maxgundong) {

gundong = maxgundong;

}

var scollTime = setInterval(function() {

console.log(wmusicbox.scrollTop)

if (wmusicbox.scrollTop < gundong) {

wmusicbox.scrollTop = wmusicbox.scrollTop + 1;

console.log(gundong)

} else if (wmusicbox.scrollTop > gundong) {

wmusicbox.scrollTop = wmusicbox.scrollTop - 1;

console.log("2")

} else {

console.log("=")

clearInterval(scollTime);

}

})

}

ok,这网我们的网页播放器已经全部编写完毕，我把源代码打包，提供大家下载，多提宝贵意见。 单击下载

原文地址：https://www.cnblogs.com/agoodlife/p/10741432.html

时间： 2024-08-28 09:58:05

网页播放器开发（四）代码精炼提纯的相关文章

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

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

HTML5之audio实战，网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

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

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

（转）开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

文章链接:http://justcoding.iteye.com/blog/2110275 CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格 式播放,此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了,具体的各

网页播放器

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=

仿酷狗音乐播放器开发日志二十一 开发动态调色板控件（附源代码）

转载请说明原出处,谢谢~~ 上一篇仿酷狗日志结束后,整个换肤功能就仅仅剩下调色板功能没有做了.我本以为会非常easy.可是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1aG9uZ3NodQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" > waterm

微信公众号教程（20）微信音乐播放器开发 下

微信音乐播放器开发 五.音乐播放器前后端整合   在前两期教程中我们已经将前台播放器界面.后台音乐内容管理以及数据通讯接口完成了,现在要做的事情就是编写代码让前台播放器利用通讯接口来调用后台音乐内容,实现一些播放器操作. 之前的前台页面是实现播放器效果展现和离线播放,所以在整合的时候对之前的html代码做了一些调整,去除了音乐封面.音乐信息以及音乐url等,这里就不重点讲了,有兴趣的朋友可以将前后两个文件做个对比. 下面重点来讲如何使用JS来完成数据调用以及播放器操作,所有的代码都在第69行<s

使用网页播放器

最近在家懒得很,刚下好的电影想躺在床上看(我是台式电脑),可是对于我这个有内存清洁癖的人又不想把那么一个多g的电影复制到手机上去看 于是我就自己做了个网页播放器,然后弄在IIS上,局域网访问,这样躺床上就可以看电脑里所有的电影啦! 其实实现很简单 最开始用最原始的方法Object,但是发现在goole,360浏览器极速模式都是空白.... 只有在360兼容模式下才能看,不知道有没有童鞋知道这个怎么搞,估计浏览器要有IE内核才能看 <html xmlns="http://www.w3.org

html 音乐 QQ播放器 外链 代码 播放器 外链 代码

韩梦飞沙  韩亚飞  [email protected]  yue31313  han_meng_fei_sha QQ播放器 外链 代码 播放器 外链 代码 ======== 歌曲链接 QQ播放器 外链 代码 播放器 外链 代码 <EMBED src="音乐url" autostart="true" loop="true" width="80" height="20"> 在网易云音乐, 搜索一首