使用原生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音乐播放器插件
点这里音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

随机推荐

记一次Laravel定时任务导致日志没有写入权限的坑
问题:用laravel开发定时任务时,发生了日志没有写入权限导致项目打不开的问题原因:linux的添加定时任务时默认是当前登录用户,我定时任务会生成日志 crontab: kernel: 生成日志的 ...
<松本行弘的程序世界> 读书笔记
第一章编程语言不是从安全性的角度考虑以减少程序员犯错误,而是在程序员自己负责的前提下为他提供最大限度发挥能力的灵活性. 第二章根据对象的不同类型而进行适当的处理,就是多态性的基本内容.根据数据类型 ...
flutte 命令行指令卡死
flutter ui
快速生成无状态模板 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget ...
推荐下载CentOS下各种组件的网址
http://vault.centos.org/ ftp://mirrors.sohu.com/ http://mirror.webtatic.com/
[Atcoder Regular Contest 063] Tutorial
Link: ARC063 传送门 C: 将每种颜色的连续出现称为一段,寻找总段数即可 #include <bits/stdc++.h> using namespace std; ,len; ...
AGC 025 B - RGB Coloring
B - RGB Coloring Time limit : 2sec / Memory limit : 1024MB Score : 700 points Problem Statement Taka ...
[CodePlus2017NOV]晨跑
题目大意: 三个人分别以a,b,c的速度在一个圈上晨跑,在时间为0时,他们一起出发,问何时能相遇? 思路: lcm(a,b,c)即可. #include<cstdio> #include& ...
显示字符 Exercise06_12
/** * @author 冰樱梦 * 时间:2018年下半年 * 题目:显示字符 *1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J ...
微信小程序退款【证书的使用】
1,官方文档的地址 2,在官方文档中给出了证书使用的链接,如下: [其实只有证书的获取,选择.具体的证书怎么在代码中使用,文档中并没有给出说明] 3,第一步准备请求的参数,里面只有五个是参数是有点特殊 ...

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

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

随机推荐

热门专题

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

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