SoundBow_JS/index.html at master · stc/SoundBow_JS · GitHub

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
146
<!DOCTYPE html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>SoundBow JS </title>

		<script type="text/javascript">

		// <![CDATA[
    	var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
    	if (mobile)
    	{
        	document.location = "http://www.binaura.net/stc/wrx/soundbow/mobile.html";
    	}
		// ]]>

		var viewportwidth;
 		var viewportheight;

 		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

 		viewportwidth = window.innerWidth,
      	viewportheight = window.innerHeight

		</script>

		<style type="text/css">
		body
		{
	  		background-color: #333; color: #bbb; line-height: normal;
	  		font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
	  		font-size: 11px; font-weight: normal; text-decoration: none;
		  	line-height: 1.5em;
		}

		a img
		{
			border: 0px solid transparent;
		}

		a, a:link, a:visited, a:active, a:hover
		{
			color: #cdcdcd; text-decoration: underline;
		}

		h1
		{
	    	font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
			width: 100%; letter-spacing: 0.1em;
			margin-bottom: 1em; font-size: 1.65em;
		}

		canvas
		{
			display: block;
			outline: 0px;
			position: fixed;
			top:0px;
    		left:0px;
			/* for iPads*/
			-webkit-user-select: none;
		}

		#content
		{
			margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;
			width: 1000px; min-width: 300px; overflow: auto;
			border-left: 1px solid #444; border-top: 1px solid #444;
			border-right: 1px solid #333; border-bottom: 1px solid #333;
			background-color: #3d3d3d;
		}
		</style>
		<!--[if lt IE 9]>
			<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
		<![endif]-->
		<script src="./assets/code/processing.js" type="text/javascript"></script>
		<script src="./assets/code/jQuery.js" type="text/javascript"></script>

		<script type="text/javascript">
		// convenience function to get the id attribute of generated sketch html element
		function getProcessingSketchId () { return 'SoundBowJS'; }
		</script>


		<script type="text/javascript" language="javascript" >


		var audioElementArrayPentascale = new Array();
		var audioElementArrayHarmonicscale = new Array();


		for ( var i=0; i<8; i++ )
		{

			//	load sounds for pentaton scale

			audioElementArrayPentascale[i] = document.createElement('audio');
			var index = i+1;
			audioElementArrayPentascale[i].setAttribute('src', './assets/sounds/' + index +'.wav');

			//	load sounds for harmonic scale

			audioElementArrayHarmonicscale[i] = document.createElement('audio');
			audioElementArrayHarmonicscale[i].setAttribute('src', './assets/sounds/1' + index +'.wav');
		}

		function PlayPentaSound(sel)
		{
			console.log(audioElementArrayPentascale.length);
			if((sel>=1)&&(sel<=8))
			{
				audioElementArrayPentascale[sel-1].load;
				audioElementArrayPentascale[sel-1].currentTime = 0;
				audioElementArrayPentascale[sel-1].play();
			}
		}

		function PlayHarmonicSound(sel)
		{

			console.log(audioElementArrayHarmonicscale.length);
			if((sel>=1)&&(sel<=8))
			{
				audioElementArrayHarmonicscale[sel-1].load;
				audioElementArrayHarmonicscale[sel-1].currentTime = 0;
				audioElementArrayHarmonicscale[sel-1].play();
			}
		}

		</script>

		</head>

		<body>
		<div id="content">
			<div>
				<canvas id="SoundBowJS" data-processing-sources="./assets/code/SoundBow_JS.pde" width="1000" height="600">
					<p>Your browser does not support the canvas tag.</p>
				</canvas>
				<noscript>
					<p>JavaScript is required to view the contents of this page.</p>
				</noscript>
	    	</div>
			<h1>SoundBow_JS</h1>
		</div>
	</body>
</html>