forked from art19/peaks.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (106 loc) · 4.53 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
<!DOCTYPE html>
<html>
<head>
<title>Peaks.js Demo Page</title>
<style>
#titles {
font-family: 'Helvetica neue', Helvetica, Arial, sans-serif;
}
#titles, [id*="waveform-visualiser"] {
margin: 24px auto;
width: 1000px;
}
[id*="waveform-visualiser"] [class*="-container"] {
box-shadow: 3px 3px 20px #919191;
margin: 0 0 24px 0;
-moz-box-shadow: 3px 3px 20px #919191;
-webkit-box-shadow: 3px 3px 20px #919191;
line-height: 0;
}
.overview-container {
height: 85px;
}
#second-waveform-visualiser-container [class*="-container"] {
background: #111;
}
#demo-controls {
margin: 0 auto 24px auto;
width: 1000px;
}
#demo-controls > * {
vertical-align: middle;
}
#demo-controls button {
background: #fff;
border: 1px solid #919191;
cursor: pointer;
}
</style>
</head>
<body>
<div id="titles">
<h1>Peaks.js Frontend Component Demo</h1>
<p>Peaks is a modular frontend component designed for the display of and interaction with audio waveform material in the browser.</p>
<p>Peaks was developed by <a href="http://www.bbc.co.uk/rd">BBC R&D</a> to allow users to make accurate clippings of audio data over a timeline in browser by leveraging a backend API for encoding.</p>
<p>Peaks utilizes HTML5 canvas technology to display waveform data at different zoom levels and provides some basic convenience methods for interacting with waveforms and creating time-based visual sections for denoting content to be clipped or for reference eg: distinguishing music from speech or identifying different music tracks.</p>
</div>
<div id="first-waveform-visualiser-container"></div>
<div id="demo-controls">
<audio controls=controls>
<source src="./test_data/sample.mp3" type="audio/mpeg">
<source src="./test_data/sample.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<button data-action="zoom-in">zoom in</button>
<button data-action="zoom-out">zoom out</button>
<button data-action="add-segment">Add a Segment at current time</button>
<button data-action="add-point">Add a Point at current time</button>
<button data-action="log-data">Log segments/points</button>
</div>
<script src="bower_components/requirejs/require.js"></script>
<script>
requirejs.config({
paths: {
peaks: 'src/main',
EventEmitter: 'node_modules/eventemitter2/lib/eventemitter2',
konva: 'node_modules/konva/konva',
'waveform-data': 'node_modules/waveform-data/dist/waveform-data.min'
}
});
require(['peaks'], function(Peaks){
var options = {
container: document.getElementById('first-waveform-visualiser-container'),
mediaElement: document.querySelector('audio'),
dataUri: {
arraybuffer: '/test_data/sample.dat',
json: '/test_data/sample.json'
},
keyboard: false
};
var peaksInstance = Peaks.init(options);
window['peaksInstance'] = peaksInstance;
document.querySelector('[data-action="zoom-in"]').addEventListener("click", peaksInstance.zoom.zoomIn.bind(peaksInstance));
document.querySelector('[data-action="zoom-out"]').addEventListener("click", peaksInstance.zoom.zoomOut.bind(peaksInstance));
document.querySelector('button[data-action="add-segment"]').addEventListener("click", function () {
var segment = {
startTime: peaksInstance.time.getCurrentTime(),
endTime: peaksInstance.time.getCurrentTime() + 10,
editable: true
};
peaksInstance.segments.add([segment]);
});
document.querySelector('button[data-action="add-point"]').addEventListener("click", function () {
var point = {
timestamp: peaksInstance.time.getCurrentTime(),
editable: true
};
peaksInstance.points.add([point]);
});
document.querySelector('button[data-action="log-data"]').addEventListener("click", function (event) {
console.log('Segments', peaksInstance.segments.getSegments());
console.log('Points', peaksInstance.points.getPoints());
});
});
</script>
</body>
</html>