Permalink
Browse files

Merge branch 'master' of heroku.com:waveform

Conflicts:
	views/index.haml
  • Loading branch information...
2 parents ab13e46 + c674439 commit 145cb25e6ef877a31767dbab4d56c814a5c1ffd1 @leemartin leemartin committed Jun 26, 2012
Showing with 237 additions and 103 deletions.
  1. +1 −12 README.md
  2. +5 −1 app.rb
  3. +29 −21 public/application.js
  4. BIN public/favicon.ico.bak.ico
  5. +2 −1 views/application.sass
  6. +122 −58 views/index.haml
  7. +78 −10 views/waveform.coffee
View
@@ -7,15 +7,4 @@ JavaScript library and is using a lightweight service hosted on
[waveformjs.org](http://waveformjs.org) that translates the waveform image provided by
SoundCloud into an **array** of **floating points**.
-The project is open source and [hosted on Github](http://github.com/soundcloud/waveform.js). This page provides
-all the documentation you'll need as well as a list of [examples](#examples).
-Waveform.js is available to use under the [MIT software license](#).
-
-You can report bugs and discuss features on the [Github issues page](http://github.com/soundcloud/waveform.js/issues) and send tweets to [@waveformjs](http://twitter.com/waveformjs).
-
-Usage
-----------
-
-Examples
-----------
-
+Head to [waveformjs.org](http://waveformjs.org) for the documentation.
View
@@ -64,7 +64,11 @@ def render(text)
waveform
end
- "#{ params[:callback] }(#{ waveform.to_json });"
+ if params[:callback]
+ "#{ params[:callback] }(#{ waveform.to_json });"
+ else
+ waveform.to_json
+ end
end
def memcache_fetch(key)
View
@@ -9,12 +9,12 @@ $(function() {
}
}
- var i = 0;
+ var i = 0, showWaves = [0, 0, 0, 0];
var headerWaveform = new Waveform({
container: $("#logo")[0],
outerColor: "transparent",
innerColor: function(x){
- if(i > x){
+ if(showWaves[Math.floor(x / 0.25)]){
return "#ff6600";
}else{
return "#333";
@@ -27,26 +27,34 @@ $(function() {
});
setTimeout(function(){
- i = 0.25;
+ showWaves = [1, 0, 0, 0];
headerWaveform.redraw();
- }, 300);
-
-
- setTimeout(function(){
- i = 0.50;
- headerWaveform.redraw();
- }, 400);
-
- setTimeout(function(){
- i = 0.75;
- headerWaveform.redraw();
- }, 500);
-
-
- setTimeout(function(){
- i = 1;
- headerWaveform.redraw();
- }, 600);
+ setTimeout(function(){
+ showWaves = [0, 1, 0, 0];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [0, 0, 1, 0];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [0, 0, 0, 1];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [0, 0, 1, 0];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [0, 1, 0, 0];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [1, 0, 0, 0];
+ headerWaveform.redraw();
+ setTimeout(function(){
+ showWaves = [0, 0, 0, 0];
+ headerWaveform.redraw();
+
+ setTimeout(function(){
+ showWaves = [1, 1, 1, 1];
+ headerWaveform.redraw();
+ }, 150); }, 150); }, 150); }, 150); }, 150); }, 150); }, 150); }, 150); }, 300);
});
Binary file not shown.
@@ -2,7 +2,7 @@
@import "compass/css3"
body
- background: white // url(/images/bg.jpg)
+ background: url(/images/bg.jpg)
color: #333
font: 13px "Interstate Light"
@@ -72,6 +72,7 @@ pre, script.example
border-style: solid
border-width: 0 4px
padding: 2px 0 2px 15px
+ font: 11px Monaco, Consolas, "Lucida Console", monospace
nav
background: white
View
@@ -15,112 +15,176 @@
%script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
%script(src="//platform.twitter.com/widgets.js")
+ %script(src="//connect.soundcloud.com/sdk.js")
+ :javascript
+ SC.initialize({
+ client_id: "YOUR_CLIENT_ID"
+ });
%script(src="/waveform.js")
%script(src="/application.js")
%link(href="http://cloud.webtype.com/css/c09e383b-9747-406d-8ff5-95ae1c9217e9.css" rel="stylesheet" type="text/css")
%link(href="/application.css" rel="stylesheet" type="text/css")
%body
+
+ // NAVIGATION
+
%nav
%h4 <a href="#top">Waveform.js <em>(1.0.0)</em></a>
-
%ul
%li <a href="http://github.com/soundcloud/waveform.js" target="_blank">Github Repository</a>
-
%h4 <a href="#top">Introduction</a>
-
%h4 <a href="#usage">Usage</a>
-
%h4 <a href="#examples">Examples</a>
-
%ul
%li <a href="#interpolation">Interpolation</a>
%li Cropped
%li Playback
%li Innercolor
+ // CONTENT
+
%section
%a(name="top")
%h1 Waveform.js <div id="logo"></div>
- %p Waveform.js makes drawing <a href="http://soundcloud.com">SoundCloud</a> waveforms simple and lets you <strong>style</strong> and <strong>color</strong> them the way you want them. It comes as a small JavaScript <strong>library</strong> and is using a <em>lightweight service</em> hosted on <a href="http://waveformjs.org">waveformjs.org</a> that translates the waveform images provided by SoundCloud into <strong>floating points</strong>.
- %em "Damn Good Waveforms" - Eric Wahlforss, CTO of SoundCloud
-
- %p The project is open source and <a href="http://github.com/soundcloud/waveform.js">hosted on Github</a>. This page provides all the documentation you'll need as well as a list of <a href="#examples">examples</a>. Waveform.js is available to use under the <a href="#">MIT software license</a>. It was written by <a href="https://twitter.com/intent/user?screen_name=johanneswagener">Johannes Wagener</a> and <a href="https://twitter.com/intent/user?screen_name=leemartin">Lee Martin</a>.
- %p You can report <strong>bugs</strong> and discuss <strong>features</strong> on the <a href="http://github.com/soundcloud/waveform.js/issues">Github issues page</a>.
- %p Follow <a href="https://twitter.com/intent/user?screen_name=waveformjs">@waveformjs</a> for the latest.
+ %p
+ Waveform.js makes drawing <a href="http://soundcloud.com">SoundCloud</a> waveforms simple and lets you <strong>style</strong> and <strong>color</strong> them the way you want it.
+ It comes as a small JavaScript <strong>library</strong> and is using a <em>lightweight service</em> hosted on <a href="http://waveformjs.org">waveformjs.org</a> that translates the waveform images provided by SoundCloud into <strong>floating points</strong>.
+ %em "Damn Good Waveforms" (Eric Wahlforss, CTO of SoundCloud, 2nd of July 2013)
+ %p The project is open source and <a href="http://github.com/soundcloud/waveformjs">hosted on Github</a>. This page provides all the documentation you'll need as well as a list of <a href="#examples">examples</a>. Waveform.js is available to use under the <a href="#">MIT software license</a>. It was written by <a href="https://twitter.com/intent/user?screen_name=johanneswagener">Johannes Wagener</a> and <a href="https://twitter.com/intent/user?screen_name=leemartin">Lee Martin</a>. You can report <strong>bugs</strong> and discuss <strong>features</strong> on the <a href="http://github.com/soundcloud/waveformjs/issues">Github issues page</a>.
+ %a.button(href="/waveform.js") Download Latest Version (1.0.0)
%a(name="examples")
%h2 Examples
- %h3 A SoundCloud waveform
- #example2.example-waveform(style="height:100px;width:500px")
- :example
- $.getJSON("http://waveformjs.org/w?callback=?", {
- url: "https://w1.sndcdn.com/cWHNerOLlkUq_m.png",
- }, function(d){
+ %h3 Hooking up a waveform to a SoundCloud track
+ #example2.example-waveform
+ %p
+ Using the <code>dataFromSoundCloudTrack</code> the data of the waveform will be pulled from the endpoint on waveform.js.org that converts the SoundCloud waveform image into the floats.
- new Waveform({
- container: document.getElementById("example2"),
- innerColor: "#81D8D0",
- data: d
- });
- });
+ Additionally <code>optionsForSyncedStream</code> will prepare options for SC.stream that will sync up the loading and playing progress of the stream with the waveform.
- %h3 A custom, rainbow colored waveform
- #example1.example-waveform
- :example
- new Waveform({
- container: document.getElementById("example1"),
- innerColor: function(){
- return '#'+Math.floor(Math.random()*16777215).toString(16);
- },
- data: [1, 0.5, 1, 0],
- });
+ %a{href: "javascript:window.exampleStream.togglePause(); false;"} Click here to test playback!
- %h3 SoundCloud waveform with play and loading states.
- #example3.example-waveform
:example
- new Waveform({
- container: document.getElementById("example3"),
- innerColor: function(){
- return '#'+Math.floor(Math.random()*16777215).toString(16);
- },
- data: [1, 0.5, 1, 0],
+ // assumes that the SoundCloud JS SDK is loaded and initialized.
+ SC.get("/tracks/293", function(track){
+ var waveform = new Waveform({
+ container: document.getElementById("example2"),
+ innerColor: "#333"
+ });
+
+ waveform.dataFromSoundCloudTrack(track);
+ var streamOptions = waveform.optionsForSyncedStream();
+ SC.stream(track.uri, streamOptions, function(stream){
+ window.exampleStream = stream;
+ });
});
- %h3 A growing waveform
+ %h3 Drawing a waveform with a gradient on the fly
#example4.example-waveform
+ %p
+ When the <code>interpolate</code> option is false, each data sample will be drawn on one pixel.
+ Once the full width has been exceeded the older data will be cut off. This can be used to
+ draw waveforms when sounds are recorded with the SoundCloud Javascript SDK.
+ In addition this waveform is styled using a canvas gradient as <code>innerColor</code>.
:example
var data = [];
+
var waveform = new Waveform({
container: document.getElementById("example4"),
- innerColor: "#f60",
interpolate: false
});
+ var ctx = waveform.context;
+
+ var gradient = ctx.createLinearGradient(0, 0, 0, waveform.height);
+ gradient.addColorStop(0.0, "#f60");
+ gradient.addColorStop(1.0, "#333");
+ waveform.innerColor = gradient;
+ var i=0;
setInterval(function(){
- data.push(Math.random());
+ data.push(Math.cos(i++/25) - 0.2 + Math.random()*0.3);
waveform.update({
data: data
});
}, 50);
- %h2 Downloads <em>(Right-click, and use "Save As")</em>
-
- %table#downloads
- %tr
- %td
- %a.button(href="/waveform.js") Latest Version (1.0.0)
- %td
- %em 5kb, Full source
+ %h3 Weird customized waveform with random colors
+ #example1.example-waveform
+ %p
+ In this example the data is set manually to just a few samples, which will be interpolated to the full width.
+ The <code>innerColor</code> is a function that gets called for each vertical line and will return a random color.
+ :example
+ new Waveform({
+ container: document.getElementById("example1"),
+ innerColor: function(x, y){
+ return '#'+Math.floor(Math.random()*16777215).toString(16);
+ },
+ data: [0, 0.3, 1, 0.5, 1, 0.3, 0]
+ });
%a(name="usage")
%h2 Usage
- %p Bacon ipsum dolor sit amet tri-tip jerky cow turducken chuck, pig short ribs short loin speck ground round beef ribs. Pork belly pork loin tongue ham hock pastrami. Ham hock speck chicken, jerky ribeye tongue filet mignon turducken pancetta. Flank ground round fatback salami. Cow andouille pork chop turducken. T-bone tail spare ribs filet mignon tongue.
- %pre
- var object = {};
- %a(name="interpolation")
- %h3 Interpolation
- %p Bacon ipsum dolor sit amet tri-tip jerky cow turducken chuck, pig short ribs short loin speck ground round beef ribs. Pork belly pork loin tongue ham hock pastrami. Ham hock speck chicken, jerky ribeye tongue filet mignon turducken pancetta. Flank ground round fatback salami. Cow andouille pork chop turducken. T-bone tail spare ribs filet mignon tongue.
+ %p Start by adding the <code>waveform.js</code> script to your page or app:
+
+ %pre.code
+ = preserve do
+ :escaped
+ <script src="waveform.js"></script>
+
+ %p
+ Once added you can create new waveforms using the
+ <code>Waveform</code> prototype:
+
+ %pre.code
+ = preserve do
+ :escaped
+ var waveform = new Waveform({
+ container: document.getElementById("test"),
+ data: [1, 0.2, 0.5]
+ });
+ %p
+ The following options can be passed, except for <code>container</code> all others are optional:
+ %ul
+ %li
+ <code>container</code>: html element that will contain the new canvas element.
+ %li
+ <code>width</code>: width in pixel, if not passed will be calculated from the container
+ %li
+ <code>height</code>: height in pixel, if not passed will be calculated from the container
+ %li
+ <code>innerColor</code>: color of the waveform. can be a hex triplet string, a canvas gradient or a function that returns one of these.
+ %li
+ <code>outerColor</code>: color of the outer area. can be a hex triplet string or a canvas gradient.
+ %li
+ <code>interpolate</code>: interpolated waveforms will be stretched to the full width, non interpolated will be drawn in one pixel lines per sample and cut off on the left end.
+
+ %h4 Waveform#update()
+
+ %p
+ With the <code>update</code> method the data can be updated and the waveform redrawn, it also accepts the <code>interpolate</code> option.
+
+ %pre.code
+ = preserve do
+ :escaped
+ waveform.update({
+ data: [0.5, 1.0, 0.5, 1.0]
+ });
+
+ %h4 Waveform#dataFromSoundCloudTrack()
+ %p
+ The <code>dataFromSoundCloudTrack</code> method accepts a SoundCloud track object (containing the waveform_url) and will call the waveformjs.org endpoint to
+ retrieve and set the data samples.
+
+ %h4 Waveform#optionsForSyncedStream()
+ %p
+ The <code>optionsForSyncedStream</code> method returns an options object that can be passed to soundManager or the SoundCloud JS SDK <code>SC.stream</code> method. These options will automatically sync and redraw the waveform according to its stream loading and playing progress.
+ The options will only include the whileplaying and whileloading option, all others can be overridden.
+
+ %h4 SoundCloud Waveform Endpoint
+
+ %p
+ The endpoint is located at <a href="http://waveformjs.org/w">http://waveformjs.org/w</a> and accepts a <code>url</code> parameter that is pointing to a SoundCloud waveform image URL (waveform_url in the track object). The response will be an array of floats between 0 and 1. JSONP is supported.
Oops, something went wrong.

0 comments on commit 145cb25

Please sign in to comment.