正文

使用 原生js 制作插件 (javaScript音乐播放器)

IP云
IP云V管理员/6 阅读
08/13
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.引用页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>极简的音乐播放器</title>
<script src="dn_music_play.js"></script>
<style type="text/css">
html,body{
background: #3d860d;
}
pre{
color: #fff;
}
</style>
</head>
<body>
<pre>
思路(要求):
1.可控制音乐状态(播放、暂停)
2.灵活的音乐资源配置(单个、多个)
3.自动音乐列表(无选择列表、有列表)
4.可指定播放器所在容器(元素、页面)
5.可指定播放器所在容器位置(顶、左、右、下)
6.可自动加载音乐资源并自动播放(浏览器、微信)
7.可自定义皮肤(按钮、列表)
8.极简小巧(无图片资源加载、无css样式文件加载)
9.更友好的用户体验(手机、PC)说明文档：
1.单个音乐
DNmusicPlay({audioUrl:"music/ccav.mp3"});
DNmusicPlay({
audioUrl:{title:"中国人",source:"music/ccav.mp3"}
});
2.多个音乐
DNmusicPlay({
audioUrl:[
{title:"中国人",source:"music/ccav.mp3"},
{title:"我爱你",source:"music/mdzz.mp3"}
]
});
3.指定节点
DNmusicPlay({
nodeID:"dntest",
audioUrl:"music/ccav.mp3"
});
4.指定位置
DNmusicPlay({
boxStyle:"top:10px;left:20px;opacity:0.5;",
audioUrl:"music/ccav.mp3"
});
5.修改皮肤
按钮图(宽高比1:2)：
DNmusicPlay({
bottonSrc:"icon.png",
audioUrl:"music/ccav.mp3"
});播放器：
DNmusicPlay({
htmls:"<div>...</div>",
audioUrl:"music/ccav.mp3"
});</pre>
<div id="dntest" style="background: #f1f1f1;width: 100%;height: 200px;position: relative;">
也可以把播放器加到这里：
</div><script type="text/javascript">
// 执行插件代码
// 传入的是一个字符串
// DNmusicPlay({audioUrl:"music/ccav.mp3"});// 传入的是一个对象
/*DNmusicPlay({
audioUrl:{title:"中国人",source:"music/ccav.mp3"}
});*/// 传入的是一个数组
DNmusicPlay({
nodeID:"dntest", // 插入节点
boxStyle:"top:10px;left:20px;opacity:1;", // 播放器位置
bottonSrc:"icon.png", // 按钮背景图
audioUrl:"music/ccav.mp3" // 音乐文件路径
});
</script>
</body>
</html>

2.插件代码

/**
* 使用原生js制作音乐播放器插件
*/
//创建闭包
(function(global) {
// 9.定义一个常量,挂载到window,便于用户修改
var __INFO__ = {
plug:"DNmusicPlay", // 插件的名称
version:"1.0.1", // 版本号
author:"TL"// 作者
}// 3.定义默认值
var defaults = {
audioUrl:"",
nodeID:"",
boxStyle:"",
bottonSrc:"",
htmls:`<audio autoplay loop style="width: 0px">
<source src="" type="audio/mpeg" />
</audio><a style="width: 24px;height: 24px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplODZjZmIzYy1kZmNkLTQ4NTUtOTg4Yi0zNmI5OTNhNzllZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0Y5RjUxNUU4NzRBMTFFNEE3OTJCRDg1RUEzMENCNDkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0Y5RjUxNUQ4NzRBMTFFNEE3OTJCRDg1RUEzMENCNDkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MmJkZjhjOGItYmMwMy00NTVlLTg3N2EtYzYxNWVhMjU5ZGQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmU4NmNmYjNjLWRmY2QtNDg1NS05ODhiLTM2Yjk5M2E3OWVlOCIvPiA8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) transparent no-repeat scroll top left;background-size: 100% auto;display: inline-block;" href="javascript:;" title="音乐开关"></a><select style="vertical-align: top;">
</select>`, // 使用ES6语法,字符串模板
}
// 2.定义插件名称
var PlugCode = function(options) {
// 4.合并缺损值(默认值)和用户自定义的值 jQuery:$.extend({},defaults,options) ES6:Object.assign({},defaults,options) 浅拷贝
var settings = Object.assign({},defaults,options); // 将defaults(默认值)和options(用户传参)合并到一个空对象中// 5.获取用户节点
var audioDOM = document.getElementById(settings.nodeID);
// 6.用户没有传值,默认为body节点
if(!audioDOM) audioDOM = document.body;// 7.创建一个div元素节点,使得htmls返回一个对象，便于操作
var audioBOX = document.createElement("div");
// 8.赋值 设置指定位置
audioBOX.id = "dnmusiccontrol";
audioBOX.style = "opacity: 0.5;overflow: hidden;position: absolute;z-index: 2147483646;" + settings.boxStyle;
audioBOX.innerHTML = settings.htmls; // 使用innerHTML,插入htmls
audioDOM.appendChild(audioBOX); // 使用appendChild,插入音乐盒子// 操作htmls中的元素(按钮...)
// 11.获取对象
var audioButton = audioBOX.querySelectorAll("a")[0]; // 使用querySelectorAll找到a元素,返回一个nodeList对象
var audioList = audioBOX.querySelectorAll("select")[0];
var audioTag = audioBOX.querySelectorAll("audio")[0];// 23.修改音乐按钮图标
// 判断用户是否修改图标
if(settings.buttonSrc) audioButton.style.backgroundImage = "url(" + settings.buttonSrc + ")";// 21.初始化按钮状态(按钮背景)
audioButton.state = true;// 12.定义操作方法
var audioFN = {
// 20.修改背景 传参url
// 播放
play:function(url) {
// 文件路径
if(url) audioTag.src = url;
// 背景图
audioButton.style.backgroundPosition = "0 0";
audioTag.play();
},
// 暂停
stop:function() {
audioButton.style.backgroundPosition = "0 100%";
audioTag.pause();
}
};// 13.判断设备是PC端还是移动端
//定义 _device 变量接收
var _device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); // 返回true 移动端 false PC端
// 定义事件
var clickEvtName = _device ? "touchstart" : "mousedown"// 14.通过addEventListener,给按钮绑定事件
audioButton.addEventListener(clickEvtName,function(e){
// 给当前按的按钮赋值
// console.log(e.type);
if(this.state){
this.state = false;
// 暂停
audioFN.stop();
}else{
this.state = true;
// 播放
audioFN.play();
}
});// 15.对文件路径进行操作
// 16.定义变量_urlType 接收类型
var _urlType = toString.apply(settings.audioUrl);
// console.log(_urlType);
// 17.通过判断,传参统一变为数组形式
if(_urlType === '[object Object]'){
// 定义一个空数组
var _temp = [];
// 将settings.audioUrl放入其中
_temp.push(settings.audioUrl);
// 转换,将传入的对象转为,并重新赋值
settings.audioUrl = _temp;
}
// 18.当用户什么都没传时
if(!settings.audioUrl.length){
console.log(__INFO__.plug + "因无音乐资源启动失败,请添加音乐资源 audioUrl:");
return;
}
// 19.使用typeof,判断传参是数组还是字符串
if(typeof settings.audioUrl === 'object'){ // 数组
console.log("数组对象自动播放音乐");
// 设置默认播放地址
audioTag.src = settings.audioUrl[0].source;
// 遍历
for(var i=0; i<settings.audioUrl.length; i++){
// 创建option标签
var _option = new Option(settings.audioUrl[i].title,settings.audioUrl[i].source);
// 通用add,将option标签添加到audioList列表中
audioList.add(_option);
}
}else{ // 字符串
// 赋值
audioTag.src = settings.audioUrl;
// 隐藏列表
audioList.style.display = "none";
}// 22.制作音乐切换
// 监听select列表的change事件
audioList.addEventListener("change",function(e) {
var musicName = this.options[this.selectedIndex].value; // selectedIndex 为 option 的索引
// 播放音乐
audioFN.play(musicName);
// 修改音乐按钮状态
audioButton.state = true;
})// 24.兼容微信
// 通过浏览器厂商,判断是否为微信
if(navigator.userAgent.toLowerCase().match(/micromessenger/i)){
document.addEventListener("WeixinJSBridgeReady",function onBridgeReady() {
// 模拟获取用户网络
WeixinJSBridge.invoke("getNetworkType",{},function(e){
audioFN.play();
})
})
}} // 结束 插件// 10.将插件代码放入window对象中
global[__INFO__.plug] = PlugCode;
})(typeof window !== "undefined" ? window : this) // 1.传入window对象,并进行兼容处理

.