Skip to content

Commit 750d917

Browse files
chriswebchrisweb
committed
examples update
1 parent 9d92ef8 commit 750d917

File tree

5 files changed

+422
-1
lines changed

5 files changed

+422
-1
lines changed

‎examples/client/scripts/main-server-data.js‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
2+
'use strict';
3+
4+
/**
5+
*
6+
* http://requirejs.org/
7+
*
8+
* require configuration
9+
*
10+
*/
11+
require.config({
12+
baseUrl: 'client/scripts',
13+
paths: {
14+
// vendor scripts
15+
'jquery': 'vendor/jquery/dist/jquery',
16+
'player': 'vendor/web-audio-api-player/source/player',
17+
'ajax': 'vendor/web-audio-api-player/source/ajax',
18+
'audio': 'vendor/web-audio-api-player/source/audio',
19+
20+
// own small event manager for this example
21+
'event': 'library/event',
22+
23+
// waveform visualizer scripts
24+
'canvas': '../../../source/scripts/library/canvas',
25+
'waveform': '../../../source/scripts/library/waveform'
26+
}
27+
28+
});
29+
30+
/**
31+
*
32+
* main require
33+
*
34+
* @param {type} $
35+
* @param {type} ajax
36+
* @param {type} Waveform
37+
* @param {type} canvas
38+
* @param {type} audio
39+
* @param {type} Player
40+
* @returns {undefined}
41+
*/
42+
require([
43+
'jquery',
44+
'ajax',
45+
'waveform',
46+
'canvas',
47+
'audio',
48+
'player'
49+
50+
], function ($, ajax, Waveform, canvas, audio, Player) {
51+
52+
// on dom load
53+
$(function() {
54+
55+
// WAVEFORM 1
56+
var options = {};
57+
58+
options.trackId = 1100511;
59+
options.peaksAmount = 400;
60+
options.trackFormat = 'ogg';
61+
options.service = 'jamendo';
62+
63+
// paint a waveform using server data
64+
ajax.getWaveDataFromServer(options, function(error, data) {
65+
66+
// if there was no error on the server
67+
if (!error) {
68+
69+
// get the canvas element
70+
var $element = $('#serverWaveForm_1');
71+
72+
var canvasContext = canvas.getContext($element);
73+
74+
var waveform = new Waveform({
75+
canvasContext: canvasContext
76+
});
77+
78+
// set waveform data
79+
waveform.setWaveData(data);
80+
81+
// set the optioms
82+
var layoutOptions = {};
83+
84+
layoutOptions.waveHeightInPixel = 200;
85+
layoutOptions.waveBackgroundColorHex = 'f8f8f8';
86+
layoutOptions.peakWidthInPixel = 2;
87+
layoutOptions.spaceWidthInPixel = 1;
88+
layoutOptions.waveTopPercentage = 70;
89+
layoutOptions.peakTopColorHex = '6c00ff';
90+
layoutOptions.peakBottomColorHex = 'bd8cff';
91+
layoutOptions.peakTopProgressColorHex = '380085';
92+
layoutOptions.peakBottomProgressColorHex = '8265ab';
93+
94+
waveform.setLayoutOptions(layoutOptions);
95+
96+
// draw the waveform using the waveform module
97+
waveform.draw();
98+
99+
var trackOptions = {};
100+
101+
trackOptions.trackId = 1100511;
102+
trackOptions.trackFormat = 'ogg';
103+
104+
addPlayer(waveform, trackOptions);
105+
106+
} else {
107+
108+
// log the server error
109+
console.log(error);
110+
111+
}
112+
113+
});
114+
115+
// WAVEFORM 2
116+
var options = {};
117+
118+
options.trackId = 1100511;
119+
options.peaksAmount = 400;
120+
options.trackFormat = 'mp3';
121+
options.service = 'jamendo';
122+
123+
// paint a waveform using server data
124+
ajax.getWaveDataFromServer(options, function(error, data) {
125+
126+
// if there was no error on the server
127+
if (!error) {
128+
129+
// get the canvas element
130+
var $element = $('#serverWaveForm_2');
131+
132+
var canvasContext = canvas.getContext($element);
133+
134+
var waveform = new Waveform({
135+
canvasContext: canvasContext
136+
});
137+
138+
// set waveform data
139+
waveform.setWaveData(data);
140+
141+
// draw the waveform using the waveform module
142+
waveform.draw();
143+
144+
var trackOptions = {};
145+
146+
trackOptions.trackId = 1100511;
147+
trackOptions.trackFormat = 'mp3';
148+
149+
addPlayer(waveform, options);
150+
151+
} else {
152+
153+
// log the server error
154+
console.log(error);
155+
156+
}
157+
158+
});
159+
160+
});
161+
162+
var addPlayer = function addPlayer(waveform, options) {
163+
164+
// create an audio context
165+
var audioContext = audio.getContext();
166+
167+
ajax.getAudioBuffer(options, audioContext, function(error, trackBuffer) {
168+
169+
// if there was no error on the server
170+
if (!error) {
171+
172+
// analyze track again but this time using the client
173+
// web audio api
174+
//analyzer.analyzeTrack(trackBuffer);
175+
176+
// player
177+
var player = new Player({ audioContext: audioContext });
178+
179+
player.setBuffer(trackBuffer);
180+
181+
var $button = $('<button>');
182+
183+
$button.addClass('play').text('>');
184+
185+
var $body = $('body');
186+
187+
$body.find('.player').append($button);
188+
189+
$button.on('click', function() {
190+
191+
if ($(this).hasClass('play')) {
192+
193+
player.play();
194+
195+
$button.removeClass('play').addClass('pause').text('||');
196+
197+
waveform.updateRangeStart();
198+
199+
} else {
200+
201+
player.pause();
202+
203+
$button.removeClass('pause').addClass('play').text('>');
204+
205+
waveform.updateRangeStop();
206+
207+
}
208+
209+
});
210+
211+
} else {
212+
213+
// log the server error
214+
console.log(error);
215+
216+
}
217+
218+
});
219+
220+
};
221+
222+
});

‎examples/client/scripts/main-test-data.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
2+
'use strict';
3+
4+
/**
5+
*
6+
* http://requirejs.org/
7+
*
8+
* require configuration
9+
*
10+
*/
11+
require.config({
12+
baseUrl: 'client/scripts',
13+
paths: {
14+
// vendor scripts
15+
'jquery': 'vendor/jquery/dist/jquery',
16+
'player': 'vendor/web-audio-api-player/source/player',
17+
'ajax': 'vendor/web-audio-api-player/source/ajax',
18+
'audio': 'vendor/web-audio-api-player/source/audio',
19+
20+
// own small event manager for this example
21+
'event': 'library/event',
22+
23+
// waveform visualizer scripts
24+
'canvas': '../../../source/scripts/library/canvas',
25+
'waveform': '../../../source/scripts/library/waveform'
26+
}
27+
28+
});
29+
30+
/**
31+
*
32+
* main require
33+
*
34+
* @param {type} $
35+
* @param {type} ajax
36+
* @param {type} Waveform
37+
* @param {type} canvas
38+
* @param {type} audio
39+
* @param {type} Player
40+
* @returns {undefined}
41+
*/
42+
require([
43+
'jquery',
44+
'ajax',
45+
'waveform',
46+
'canvas',
47+
'audio',
48+
'player'
49+
50+
], function ($, ajax, Waveform, canvas, audio, Player) {
51+
52+
var addPlayer = function addPlayer(waveform, options) {
53+
54+
// create an audio context
55+
var audioContext = audio.getContext();
56+
57+
ajax.getAudioBuffer(options, audioContext, function(error, trackBuffer) {
58+
59+
// if there was no error on the server
60+
if (!error) {
61+
62+
// player
63+
var player = new Player({ audioContext: audioContext });
64+
65+
player.setBuffer(trackBuffer);
66+
67+
var $button = $('<button>');
68+
69+
$button.addClass('play').text('>');
70+
71+
var $body = $('body');
72+
73+
$body.find('.player').append($button);
74+
75+
$button.on('click', function() {
76+
77+
if ($(this).hasClass('play')) {
78+
79+
player.play();
80+
81+
$button.removeClass('play').addClass('pause').text('||');
82+
83+
waveform.updateRangeStart();
84+
85+
} else {
86+
87+
player.pause();
88+
89+
$button.removeClass('pause').addClass('play').text('>');
90+
91+
waveform.updateRangeStop();
92+
93+
}
94+
95+
});
96+
97+
} else {
98+
99+
// log the server error
100+
console.log(error);
101+
102+
}
103+
104+
});
105+
106+
};
107+
108+
// on dom load
109+
$(function() {
110+
111+
// get the canvas element
112+
var $element = $('#serverWaveForm');
113+
114+
var canvasContext = canvas.getContext($element);
115+
116+
var waveform = new Waveform({
117+
canvasContext: canvasContext
118+
});
119+
120+
var data = {"peaks":[7,18,25,16,4,10,7,42,90,38,60,72,69,86,98,70,83,67,81,92,78,85,68,76,85,81,71,19,72,91,88,87,90,84,90,92,88,85,84,90,96,83,92,81,89,96,89,96,82,78,84,85,85,76,77,83,83,83,80,77,84,83,83,80,70,84,89,79,89,78,89,98,85,89,80,91,89,91,91,84,82,90,89,89,87,81,92,89,93,92,71,62,56,55,52,53,61,53,60,53,52,48,58,61,53,56,49,60,60,57,51,89,92,96,89,92,77,94,100,87,82,84,90,100,89,93,85,90,95,90,78,52,74,84,83,85,80,78,85,84,83,79,72,86,87,79,79,71,83,96,81,90,74,82,87,82,86,73,78,83,81,85,80,76,85,83,85,79,71,84,88,84,85,69,84,98,72,82,67,80,90,78,85,73,76,84,82,88,78,73,83,84,89,87,49,9,1,0,0,0]};
121+
122+
// set waveform data
123+
waveform.setWaveData(data);
124+
125+
// set the optioms
126+
var layoutOptions = {};
127+
128+
layoutOptions.waveHeightInPixel = 200;
129+
layoutOptions.waveBackgroundColorHex = 'f8f8f8';
130+
layoutOptions.peakWidthInPixel = 2;
131+
layoutOptions.spaceWidthInPixel = 1;
132+
layoutOptions.waveTopPercentage = 70;
133+
layoutOptions.peakTopColorHex = '6c00ff';
134+
layoutOptions.peakBottomColorHex = 'bd8cff';
135+
layoutOptions.peakTopProgressColorHex = '380085';
136+
layoutOptions.peakBottomProgressColorHex = '8265ab';
137+
138+
waveform.setLayoutOptions(layoutOptions);
139+
140+
// draw the waveform using the waveform module
141+
waveform.draw();
142+
143+
var trackOptions = {};
144+
145+
trackOptions.trackId = 1100511;
146+
trackOptions.trackFormat = 'ogg';
147+
148+
addPlayer(waveform, trackOptions);
149+
150+
});
151+
152+
153+
});

‎examples/waveform-server-data.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>waveform prototype</title>
7+
<script data-main="client/scripts/main-server-data" src="client/scripts/vendor/requirejs/require.js"></script>
8+
</head>
9+
<body>
10+
<h1>waveform prototype</h1>
11+
<canvas id="serverWaveForm_1"></canvas>
12+
<canvas id="serverWaveForm_2"></canvas>
13+
<canvas id="clientWaveForm"></canvas>
14+
<div class="player"></div>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)