D3画个音乐播放器

灵感来源于一个D3学习群中的一个大神的demo，再加上自己学习D3一个半多月，看了很多Demo,总有一种看了知道是什么意思的，但是要让自己写，就写不出来的赶脚，

所以就尝试做个小Demo来练练手。难度不大，主要在于自己把之前学的一些东西串起来。巩固一下自己知识点。

主要使用到的就是d3(用于界面的绘制)和html5中audio的使用。

下面就让我们一起来看下演示的效果，如下图：

从上面的效果图可以看出：

播放器可以实现音乐的声音和歌曲的切换

并且在音乐播放的时候有动态的矩形在上下伸缩。

还有最外层的进度条，用来显示当前歌曲的进度的。还有中间按钮暂停或者播放显示不同的图形。

这些效果是都d3做出来的，也就是说都是被包裹在svg里面的。

那么接下来我就大概我怎么使用d3画的思路：

首先是最外面的进度条：这个应该是比较简单。只要用d3画出来两个圆弧，第二个圆弧的开始endAngle是0,随着音乐的播放，获取当前播放时间和总的时间，来

得到当前应该旋转到多少度，这里面自然而然就可以使用attrTween('d',function(){})这个方法来设置角度的过渡动画，我之前写过饼图动画就是说这个的,这样就可

以让他一直增加endAngle,从而达到进度条的效果。

PS：其实也可以是自己弄个定时器，不断改变当前的endAngle,效果跟上面一样，我就这样试过，不过人家把东西弄好了，你可以直接调用上面的API。

中间的圆弧，就是分成4份的。这只是画的饼图，在使用padAngle弄出圆弧之间的一点间隙。

然后就是他外层的一直动的rect,这个就是在每层的添加6个rect,然后不断的更新rect的属性，

然后使用data中的update从而不断更新数据，然后再添加上transition()的过渡动画，这样就让rect不断的更新自己的高度。不断的动起来。

中间就是给circle添加图片：

play.append("defs")
		.append('pattern')
		.attr({
			id: "avatar",
			width: "100%",
			height: "100%",
			patternContentUnits: "objectBoundingBox"
		})
		.append('image')
		.attr('class', 'myImage')
		.attr({
			width: "1",
			height: "1",
			"xlink:href": "media/1.png"
		});
	
	play.append("circle")
		.attr("r", 90)
		.attr('fill', 'url(#avatar)')

然后就是中间还有两个按钮一个播放一个暂停的样式，是两个path路径，然后通过设置一个class名字，来在后面处理中是否让他显示出来。

play.append("path").attr('class', 'startBtn')
	.attr("d", "M-22,-30l60,30l-60,30z")
play
	.append("path").attr('class', 'restartBtn1')
	.attr('d', "M-30,-30L-30,30L-10,30L-10,-30Z");
play.append("path").attr('class', 'restartBtn2')
	.attr('d', "M10,-30L10,30L30,30L30,-30Z");

然后剩下来就是audio的使用的，这个没有什么说的，有什么不懂就可以在网上找到很多这方面的知识，内容也不是很多。

然后一个简单但不粗暴的音乐播放器就完成了。学习的过程是无聊还是通过来做点东西，来增加对d3的兴趣和知识掌握。

最后音乐代码还是比较多的，所以我把他放在了github上面了。

https://kangjun-kj.github.io/D3-Music/

可以下载源码到自己本地看效果。

代码下载传送门