SoundJS/examples/02_PlayOnClick.html at master · CreateJS/SoundJS · GitHub - github.com

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Sound Grid</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
	<style>
		body {
			font-family: sans-serif;
			font-size: 11px;
		}

		#content {
			width: 1000px;
		}

		.gridBox {
			float: left;
			background-repeat: no-repeat;
			background-position: 0 0px;
			background-color: #222;
			background-size: 320px 300px;
			border: 0px solid #666;
			width: 320px;
			height: 100px;
		}

		.gridBox:hover {
			background-position: 0 -100px;
			background-color: #322;
			cursor: pointer;
		}

		.gridBox.active, .gridbox.active:hover {
			background-position: 0 -200px;
			cursor: auto;
		}
	</style>

</head>

<body onload="init();">

<header class="SoundJS">
	<h1>Sound Grid</h1>

	<p>Click audio instances in the grid to play them.</p>
</header>

<!-- We'll use the ID of the div to determine which audio file to play.
These id's match the ones passed into the audioList array. -->
<div id="content">
	<div id="1" onclick="playSound(this)" class="gridBox"></div>
	<div id="2" onclick="playSound(this)" class="gridBox"></div>
	<div id="3" onclick="playSound(this)" class="gridBox"></div>
	<div id="4" onclick="playSound(this)" class="gridBox"></div>
	<div id="5" onclick="playSound(this)" class="gridBox"></div>
	<div id="6" onclick="playSound(this)" class="gridBox"></div>
	<div id="7" onclick="playSound(this)" class="gridBox"></div>
	<div id="8" onclick="playSound(this)" class="gridBox"></div>
	<div id="9" onclick="playSound(this)" class="gridBox"></div>
	<div id="10" onclick="playSound(this)" class="gridBox"></div>
	<div id="11" onclick="playSound(this)" class="gridBox"></div>
	<div id="12" onclick="playSound(this)" class="gridBox"></div>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<script type="text/javascript" src="../lib/soundjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

<script id="editable">
	var preload;

	function init() {
		if (!createjs.Sound.initializeDefaultPlugins()) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		//examples.showDistractor("content");
		var assetsPath = "../_assets/audio/";
		var sounds = [
			{src: "Game-Break.ogg", id: 1},
			{src: "Game-Spawn.ogg", id: 2},
			{src: "Game-Shot.ogg", id: 3},

			{src: "GU-StealDaisy.ogg", id: 4},
			{src: "Humm.ogg", id: 5},
			{src: "R-Damage.ogg", id: 6},

			{src: "Thunder1.ogg", id: 7},
			{src: "S-Damage.ogg", id: 8},
			{src: "U-CabinBoy3.ogg", id: 9},

			{src: "ToneWobble.ogg", id: 10},
			{src: "Game-Death.ogg", id: 11},
			{src: "Game-Break.ogg", id: 12}  //OJR would prefer a new sound rather than a copy
		];

		createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
		createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this)); // add an event listener for when load is completed
		createjs.Sound.registerSounds(sounds, assetsPath);
	}

	function soundLoaded(event) {
		//examples.hideDistractor();
		var div = document.getElementById(event.id);
		div.style.backgroundImage = "url('../_assets/art/audioButtonSheet.png')";
	}

	function stop() {
		if (preload != null) {
			preload.close();
		}
		createjs.Sound.stop();
	}

	function playSound(target) {
		//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
		var instance = createjs.Sound.play(target.id);
		if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) {
			return;
		}
		target.className = "gridBox active";
		instance.addEventListener("complete", function (instance) {
			target.className = "gridBox";
		});
	}
</script>

</body>
</html>