-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
162 lines (138 loc) · 5.44 KB
/
index.html
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Firefox 4 Simple Binaural Beat Generator</title>
<link type="text/css" href="css/Aristo/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
//code adopted from https://wiki.mozilla.org/Audio_Data_API#Complete_Example:_Creating_a_Web_Based_Tone_Generator
function AudioDataDestination(sampleRate, readFn) {
// Initialize the audio output.
var audio = new Audio();
audio.mozSetup(2, sampleRate);
var currentWritePosition = 0;
var prebufferSize = sampleRate / 2; // buffer 500ms
var tail = null, tailPosition;
// The function called with regular interval to populate
// the audio output buffer.
setInterval(function() {
var written;
// Check if some data was not written in previous attempts.
if(tail) {
written = audio.mozWriteAudio(tail.subarray(tailPosition));
currentWritePosition += written;
tailPosition += written;
if(tailPosition < tail.length) {
// Not all the data was written, saving the tail...
return; // ... and exit the function.
}
tail = null;
}
// Check if we need add some data to the audio output.
var currentPosition = audio.mozCurrentSampleOffset();
var available = currentPosition + prebufferSize - currentWritePosition;
if(available > 0) {
// Request some sound data from the callback function.
var soundData = new Float32Array(available);
readFn(soundData);
// Writting the data.
written = audio.mozWriteAudio(soundData);
if(written < soundData.length) {
// Not all the data was written, saving the tail.
tail = soundData;
tailPosition = written;
}
currentWritePosition += written;
}
}, 100);
}
// Control and generate the sound.
var frequency = 0, currentSoundSample;
var sampleRate = 44100;
function requestSoundData(soundData) {
if (!frequency) {
return; // no sound selected
}
//k = left channel with normal frequency,
//k2 = right channel with frequency + Binaural Beat Offset
var k = 2* Math.PI * frequency / sampleRate;
var k2 = 2* Math.PI * (frequency + BBeat) / sampleRate;
for (var i=0, size=soundData.length; i<size; i+=2) {
soundData[i] = Math.sin(k * currentSoundSample);
soundData[i+1] = Math.sin(k2 * currentSoundSample++);
}
}
var audioDestination = new AudioDataDestination(sampleRate, requestSoundData);
function start() {
currentSoundSample = 0;
frequency = parseFloat(document.getElementById("freq").value);
BBeat = parseFloat(document.getElementById("beat").value);
}
function stop() {
frequency = 0;
}
$(function(){
// Init Sliders
$('#BBeat').slider({
range: "min",
animate: true,
min: 1,
max: 40
}).width(500);
$('#CFreq').slider({
range: "min",
animate: true,
min: 100,
max: 300
}).width(500);
//On slide change change the input
$("#BBeat, #CFreq").bind( "slide", function(event, ui) {
var parid = $(ui.handle).parent().attr("id");
$("input[name='"+parid+"']").attr("value",ui.value);
if($(this).attr("id") == "BBeat"){
BBeat = ui.value;
}else{
frequency = ui.value;
}
});
//On input change change slider
$("input").change(function(){
var newval = $(this).val();
var valid = $(this).attr("name")
$("#"+valid).slider("value",newval);
});
});
</script>
<style type="text/css">
body{ font: 62.5% Cambria, Georgia, serif; margin: 25px 50px;}
h1{margin:0;padding:0;font-size:21px;}
p{font-size:12px;margin:0; padding:0;}
h2{margin-bottom:20px;}
input{float:left;margin-left:7px;}
#explain{margin-top:20px;}
#CFreq, #BBeat{float:left;margin-top:8px;}
#buttons{margin-top:20px;}
button:last-child{margin-left:10px;}
</style>
</head>
<body>
<h1>Firefox 4 Simple Binaural Beat Generator</h1>
<h2>Select your carrier frequency and binaural beat.</h2>
<p>Carrier (Hz)</p>
<div id="CFreq"></div><input type="text" size="4" name="CFreq" id="freq" value="240">
<br style="clear:both;">
<p>Binaural Beat (Hz)</p>
<div id="BBeat"></div><input type="text" size="4" name="BBeat" id="beat" value="12">
<br style="clear:both;">
<div id="buttons">
<button onclick="start()">play</button>
<button onclick="stop()">stop</button>
</div>
<div id="explain">
<p>Carrier Frequency: The overall tone</p>
<p>Binaural Beat Frequency: The binaural beat frequency to entrain to.</p>
</div>
</body>
</html>