/
recording.html
128 lines (115 loc) · 4.17 KB
/
recording.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>SoundCloud JavaScript SDK Examples</title>
<link href="http://importer.soundcloudlabs.com/stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css" />
<link href="examples.css" media="screen" rel="stylesheet" type="text/css" />
<link href="highlight.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="examples.js"></script>
</head>
<body>
<textarea class="exampleSource"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.dev/sdk.js"></script>
<script>
SC.initialize({
client_id: "c202b469a633a7a5b15c9e10b5272b78",
redirect_uri: "http://connect.soundcloud.com/examples/callback.html"
});
$("#recorderUI.reset #controlButton").live("click", function(e){
updateTimer(0);
SC.record({
start: function(){
setRecorderUIState("recording");
},
progress: function(ms, avgPeak){
updateTimer(ms);
}
});
e.preventDefault();
});
$("#recorderUI.recording #controlButton, #recorderUI.playing #controlButton").live("click", function(e){
setRecorderUIState("recorded");
SC.recordStop();
e.preventDefault();
});
$("#recorderUI.recorded #controlButton").live("click", function(e){
updateTimer(0);
setRecorderUIState("playing");
SC.recordPlay({
progress: function(ms){
updateTimer(ms);
},
finished: function(){
setRecorderUIState("recorded");
}
});
e.preventDefault();
});
$("#reset").live("click", function(e){
SC.recordStop();
setRecorderUIState("reset");
e.preventDefault();
});
$("#upload").live("click", function(e){
setRecorderUIState("uploading");
SC.connect({
connected: function(){
$("#uploadStatus").html("Uploading...");
SC.recordUpload({
track: {
title: "Untitled Recording",
sharing: "private"
}
}, function(track){
$("#uploadStatus").html("Uploaded: <a href='" + track.permalink_url + "'>" + track.permalink_url + "</a>");
});
}
});
e.preventDefault();
});
function updateTimer(ms){
$("#timer").text(SC.Helper.millisecondsToHMS(ms));
}
function setRecorderUIState(state){
// state can be reset, recording, recorded, playing, uploading
// visibility of buttons is managed via CSS
$("#recorderUI").attr("class", state);
}
</script>
<div id="recorderUI" class="reset">
<a href="#" id="controlButton" class="record"><span id="timer" class="hidden">0:00</span></a>
<div id="otherControls">
<a href="#" id="reset" class="button">Reset</a>
<a href="#" id="upload" class="button">Upload</a>
</div>
<div id="uploadStatus"></div>
</div>
</textarea>
<div id="page">
<div id="header">
<a href="/"><h1>SoundCloud JavaScript SDK Examples</h1></a>
</div>
<div class="content">
<div class="tab-ui">
<ul class="tabs">
<li class="first"><a href="basic.html">Basic</a></li>
<li class="first"><a href="connecting.html">Connecting</a></li>
<li class="first"><a href="streaming.html">Streaming</a></li>
<li class="first current"><a href="recording.html">Recording</a></li>
</ul>
</div>
<div id="left">
<p>The <b>SoundCloud JavaScript SDK</b> provides essential tools that let you easiliy integrate SoundCloud features like <b>player embedding</b>, <b>audio streaming</b>, <b>audio recording</b> and other actions like <b>following, favoriting and commenting</b> into your website.
For more infos have a look at the <a href="http://developers.soundcloud.com/docs/javascript-sdk">docs</a>.</p>
<p>This example shows how to record audio and upload it to SoundCloud. </p>
<div class="example">
</div>
</div>
<div id="right"><pre><code></code></pre></div>
</div>
</div>
</body>
</html>