forked from bbc/peaks.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (103 loc) · 4.33 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
<!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 Demo</h1>
<p>Peaks.js is a modular client-side JavaScript component designed for
the display of and interaction with audio waveform material in the
browser.</p>
<p>Peaks.js 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 the browser.</p>
<p>Peaks.js uses HTML5 canvas technology to display the audio waveform 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="http://waveform.prototyping.bbc.co.uk/test_data/TOL_6min_720p_download.mp3" type="audio/mpeg">
<source src="http://waveform.prototyping.bbc.co.uk/test_data/TOL_6min_720p_download.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="peaks.js"></script>
<script>
(function(Peaks){
var options = {
container: document.getElementById('first-waveform-visualiser-container'),
mediaElement: document.querySelector('audio'),
dataUri: {
arraybuffer: 'http://waveform.prototyping.bbc.co.uk/test_data/test_data/TOL_6min_720p_download.dat',
json: 'http://waveform.prototyping.bbc.co.uk/test_data/test_data/TOL_6min_720p_download.json'
},
keyboard: false
};
var peaksInstance = Peaks.init(options);
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 () {
peaksInstance.segments.add({
startTime: peaksInstance.time.getCurrentTime(),
endTime: peaksInstance.time.getCurrentTime() + 10,
editable: true
});
});
document.querySelector('button[data-action="add-point"]').addEventListener("click", function () {
peaksInstance.points.add({
timestamp: peaksInstance.time.getCurrentTime(),
editable: true
});
});
document.querySelector('button[data-action="log-data"]').addEventListener("click", function (event) {
console.log('Segments', peaksInstance.segments.getSegments());
console.log('Points', peaksInstance.points.getPoints());
});
})(peaks);
</script>
</body>
</html>