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

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对象,并进行兼容处理

使用原生js 制作插件 (javaScript音乐播放器)的更多相关文章

自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
Vuejs---《Vue.js + Node.js-构建音乐播放器新玩法-video》
官方文档:http://vuejs.org/v2/guide/syntax.html 中文文档: https://cn.vuejs.org/v2/guide/syntax.html https://g ...
原生js制作播放器
以前就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过a ...
原生JS实现音乐播放器！
前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
JS实现音乐播放器
JS实现音乐播放器前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件
播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...
吴裕雄--天生自然python学习笔记：python 用pygame模块制作 MP3 音乐播放器
利用 music 对象来制作一个 MP3 音乐播放器 . 应用程序总览从歌曲清单中选择指定的歌曲,单击“播放”按钮可开始播放, 在播放 xxx 歌曲”的信息. 歌曲播放的过程中,可以暂停.停止,也可 ...
10个免费开源的JS音乐播放器插件
点这里音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

随机推荐

Solidity 文档--第一章：智能合约入门
一个简单的智能合约先从一个非常基础的例子开始,不用担心你现在还一点都不了解,我们将逐步了解到更多的细节. 存储 contract SimpleStorage { uint storedData; f ...
selenium 操作cookie （cookie测试）
前言在实际的web应用中,可能会涉及到cookie测试,验证浏览器中的cookie是否正确..Cookies 验证:如果系统使用了cookie,测试人员需要对它们进行检测.如果在 cookies 中 ...
selenium3+python自动化50-环境搭建（firefox）【转载】
前言有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的. 安装环境过程中主要会遇到三个坑: 1.'geckodri ...
qt include_directories没用
include_directories之后在.cpp文件中include.h文件没有路径补全说明qt没有找到该.h文件问题解决: 在add_executable里加入那个.cpp文件就可以了因为c ...
spark技术热点问题互动问答
决胜云计算大数据时代” Spark亚太研究院100期公益大讲堂 [第4期互动问答分享] Q1:Spark SQL和Shark有啥区别? Shark需要依赖于Hadoop上Hive去做SQL语句的解析 ...
hscan扫描工具
在网上发现一篇关于hscan工具的介绍文章来源: http://book.51cto.com/art/200810/94967.htm 2.4.3 使用HScan获取信息案例 HScan是一款优秀 ...
Feign负载均衡(五）
一.Feign定义 Feigin是服务消费者,Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Fei ...
福州三中基训day2
今天讲的BFS,不得不说,福建三中订的旅馆是真的劲,早餐极棒!!! 早上和yty大神边交流边听zld犇犇讲BFS,嘛,今天讲的比较基础,而且BFS也很好懂(三天弄过一道青铜莲花池的我好像没资格说),除 ...
训练指南 UVALive - 3523 （双联通分量 + 二分图染色）
layout: post title: 训练指南 UVALive - 3523 (双联通分量 + 二分图染色) author: "luowentaoaa" catalog: tru ...
洛谷——P1287 盒子与球
P1287 盒子与球题目描述现有r个互不相同的盒子和n个互不相同的球,要将这n个球放入r个盒子中,且不允许有空盒子.问有多少种方法? 例如:有2个不同的盒子(分别编为1号和2号)和3个不同的球(分 ...

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

使用 原生js 制作插件 (javaScript音乐播放器)的更多相关文章

随机推荐

热门专题

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

使用原生js 制作插件 (javaScript音乐播放器)的更多相关文章