手机端快速点击按钮播放音效的优化

发表于 |

今天突发奇想，想试一个在手机端点击按钮，播放音效的效果，这种效果可以用来作为射击子弹，发生碰撞时出现的音效。原理不难，就是添加audio标签，设置MP3地址，然后播放。但是细心的同学就会发现在快速点击按钮时，每一次创建audio标签，然后设置src，就会对一次对音频文件的请求，这样是很不好的，在测试了一番后，总结出了两种解决方法。
1、当点击的时候，先判断前面的audio标签是否播放完毕，上码：

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
<!DOCTYPE html>
<html lang="en">
<head>	
</head>
<body>
	<input type="button" value="播放" id="btn">
	<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		var audioArr = document.getElementsByTagName("audio");
		for(var i = 0; i < audioArr.length; i++){
			if(audioArr[i].ended){
				audioArr[i].play();
				return;
			}
		}
		var audio = document.createElement("audio");
		audio.src=audio.src || "http://chongqing.sinaimg.cn/20160913_hack/GameSpawn.mp3";
		document.body.appendChild(audio);
		audio.autoplay = 'autoplay';
		audio.play();
		// console.log(audio.ended);
		// if(audioArr.length != 0){
		// 	// audioArr[0].pause();
		// 	audioArr[0].currentTime = 0;
		// 	audioArr[0].play();
		// }else{
		// 	var audio = document.createElement("audio");
		// 	audio.src = "http://chongqing.sinaimg.cn/20160913_hack/GameSpawn.mp3";
		// 	document.body.appendChild(audio);
		// 	audio.autoplay = 'autoplay';
		// 	audio.play();
		// }
	}
	</script>
</body>
</html>

这样的话，刚开始会多加载几次资源，加载的最多数就是你点击的最快数。当你点不到那么快时，这种是很好的优化方法。

2、每次点击让他重新播放，上码：

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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	<input type="button" value="播放" id="btn">
	<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		var audioArr = document.getElementsByTagName("audio");
		// for(var i = 0; i < audioArr.length; i++){
		// 	if(audioArr[i].ended){
		// 		audioArr[i].play();
		// 		return;
		// 	}
		// }
		// var audio = document.createElement("audio");
		// audio.src=audio.src || "http://chongqing.sinaimg.cn/20160913_hack/GameSpawn.mp3";
		// document.body.appendChild(audio);
		// audio.autoplay = 'autoplay';
		// audio.play();
		// console.log(audio.ended);

		if(audioArr.length != 0){
			// audioArr[0].pause();
			audioArr[0].currentTime = 0;
			audioArr[0].play();
		}else{
			var audio = document.createElement("audio");
			audio.src = "http://chongqing.sinaimg.cn/20160913_hack/GameSpawn.mp3";
			document.body.appendChild(audio);
			audio.autoplay = 'autoplay';
			audio.play();
		}
	}
	</script>
</body>
</html>

这种方法只会请求一次资源，但是在手机端播放效果不如第一种方法理想。

总结：所以总的来说，建议还是第一种比较好，另外看create.js对音效的处理也是按第一种方式来的。
另外在手机端要把onclick换成ontouchstart。