音乐播放器应用更新

教程分享

音乐播放器

今天闲来无事把之前做的一款音乐播放器进行了一些更新，做了如下的修改和调整：

  1. 调整了界面，应该比之前会好看点儿，嘿嘿
  2. 添加了频谱图，会更具音乐的播放而变化
  3. 修复一些bug

总的来说，本应用的实现是通过HTML5的AudioContext接口来实现的，该API可以实现对音频的很好控制。为了更好的发挥出音频文件播放的效果，我在该应用中使用了wavesurfer.js （一个对AudioContext接口的封装），具体可以看下官方的说明。

关于频谱图的实现，见如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/**
 * 绘制频谱图函数
 */
function Render(){	
	var o = null;	
	return function(){
		ctx.fillStyle = ARR.linearGradient;
		var w = Math.round(WIDTH / SIZE),
		cgap = Math.round(w * 0.3);
		cw = w - cgap;
		ctx.clearRect(0, 0, WIDTH, HEIGHT);

		for(var i = 0; i < SIZE; i++){	
			o = ARR[i];
			if(Render.type == 'Dot'){
				var x = o.x,
					y = o.y,
					r = Math.round((this[i]/2+18)*(HEIGHT > WIDTH ? WIDTH : HEIGHT)/1000);
				o.x += o.dx;
				o.x > (WIDTH + r) && (o.x = - r);

				//开始路径，绘画圆
				ctx.beginPath();
				ctx.arc(x, y, r, 0, Math.PI * 2, true);
		    	var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
			    gradient.addColorStop(0, "rgb(255,255,255)");

			    gradient.addColorStop(1, o.color);

			    ctx.fillStyle = gradient;
			    ctx.fill();			    
			}else if(Render.type == 'Column'){
				var h = this[i] / 280 * HEIGHT;
				ARR[i].cheight > cw && (ARR[i].cheight = cw);
				if(--ARR[i].cap < ARR[i].cheight){
					ARR[i].cap = ARR[i].cheight;
				};
				if(h > 0 && (ARR[i].cap < h + 40)){
					ARR[i].cap = h + 40 > HEIGHT ? HEIGHT : h + 40;
				}
				ctx.fillRect(w * i, HEIGHT - ARR[i].cap, cw, ARR[i].cheight);			
				ctx.fillRect(w * i, HEIGHT - h, cw, h);
			}
			
		}
	}
}

/**
 * 利用HMLT5新动画函数进行循环渲染
 */
function visualize(){
	analyser.fftSize = SIZE * 2;
	var arr = new Uint8Array(analyser.frequencyBinCount);

	var requestAnimationFrame = window.requestAnimationFrame || 
								window.webkitRequestAnimationFrame || 
								window.oRequestAnimationFrame || 
								window.mzRequestAnimationFrame;
	function v(){
		analyser.getByteFrequencyData(arr);
		//将分析得到的音频数据传递给mv.visualizer方法可视化
		Render().call(arr);
		requestAnimationFrame(v);
	}

	requestAnimationFrame(v);
}

之后可能还会对该应用进行优化，比如：

  1. 优化播放性能
  2. ​优化代码结构

微信