Permalink
Browse files

Merge branch 'master' of heroku.com:waveform

  • Loading branch information...
2 parents 398b401 + e91550d commit 87eef4f52306a888253f1fba2e1d3756f26ba463 @jwagener jwagener committed Jun 27, 2012
Showing with 92 additions and 82 deletions.
  1. BIN public/favicon.ico
  2. BIN public/favicon.ico.bak.ico
  3. +11 −3 views/application.sass
  4. +81 −79 views/index.haml
View
Binary file not shown.
View
Binary file not shown.
View
@@ -59,10 +59,10 @@ p
line-height: 20px
margin: 25px 0
-code, pre
+code, pre, dt, script.example
font: 12px Monaco, Consolas, "Lucida Console", monospace
-code
+code, dt
background: white
border: 1px solid #DDD
padding: 0px 3px
@@ -72,7 +72,7 @@ pre, script.example
border-style: solid
border-width: 0 4px
padding: 2px 0 2px 15px
- font: 11px Monaco, Consolas, "Lucida Console", monospace
+ //font: 11px Monaco, Consolas, "Lucida Console", monospace
nav
background: white
@@ -102,6 +102,14 @@ section
margin: 0 0 50px 280px
width: 550px
+ dl
+ dt
+ clear: left
+ float: left
+ dd
+ margin-left: 100px
+ padding-bottom: 20px
+
a.button
background-color: white
@include background(linear-gradient(top, rgba(white, .8) 0%, rgba(245, 245, 245, .4) 50%, rgba(160, 160, 160, .1) 100%))
View
@@ -3,6 +3,8 @@
%head
%title Waveform.js
+ %link(rel="shortcut icon" href="/favicon.ico")
+
%meta(content="Waveform.js" property="og:title")
%meta(content="Waveform.js makes drawing SoundCloud waveforms simple and lets you style and color them the way you want." property="og:description")
%meta(content="website" property="og:type")
@@ -14,48 +16,109 @@
%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>
+ %li <a href="http://github.com/soundcloud/waveformjs" target="_blank">Github Repository</a>
%h4 <a href="#top">Introduction</a>
%h4 <a href="#usage">Usage</a>
+ %ul
+ %li <a href="#options">Options</a>
+ %li <a href="#functions">Functions</a>
+ %li <a href="#endpoint">Endpoint</a>
%h4 <a href="#examples">Examples</a>
%ul
- %li <a href="#interpolation">Interpolation</a>
- %li Cropped
- %li Playback
- %li Innercolor
+ %li <a href="#track">Track</a>
+ %li <a href="#fly">On the Fly</a>
+ %li <a href="#weird">Weird</a>
+ // CONTENT
%section
+
+ // Introduction
%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 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)
- %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>.
+ // Usage
+ %a(name="usage")
+ %h2 Usage
- %em "Damn Good Waveforms" (Eric Wahlforss, CTO of SoundCloud, 2nd of July 2013)
+ %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 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>.
+ %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]
+ });
- %a.button(href="/waveform.js") Download Latest Version (1.0.0)
+ %a(name="options")
+
+ %p The following options can be passed, except for <code>container</code> all others are optional:
+ %dl
+ %dt container
+ %dd html element that will contain the new canvas element.
+ %dt width
+ %dd width in pixel, if not passed will be calculated from the container
+ %dt height
+ %dd height in pixel, if not passed will be calculated from the container
+ %dt innerColor
+ %dd color of the waveform. can be a hex triplet string, a canvas gradient or a function that returns one of these.
+ %dt outerColor
+ %dd color of the outer area. can be a hex triplet string or a canvas gradient.
+ %dt interpolate
+ %dd 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.
+
+ %a(name="functions")
+
+ %h3 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]
+ });
+ %h3 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.
+
+ %h3 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.
+
+ %a(name="endpoint")
+ %h3 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.
%a(name="examples")
%h2 Examples
- %h3 Hooking up a waveform to a SoundCloud track
+ %a(name="track")
+ %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.
@@ -80,7 +143,8 @@
});
});
- %h3 Drawing a waveform with a gradient on the fly
+ %a(name="fly")
+ %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.
@@ -98,7 +162,7 @@
var gradient = ctx.createLinearGradient(0, 0, 0, waveform.height);
gradient.addColorStop(0.0, "#f60");
- gradient.addColorStop(1.0, "#333");
+ gradient.addColorStop(1.0, "#ff1b00");
waveform.innerColor = gradient;
var i=0;
@@ -108,7 +172,9 @@
data: data
});
}, 50);
- %h3 Weird customized waveform with random colors
+
+ %a(name="weird")
+ %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.
@@ -121,67 +187,3 @@
},
data: [0, 0.3, 1, 0.5, 1, 0.3, 0]
});
-
- %a(name="usage")
- %h2 Usage
-
- %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.

0 comments on commit 87eef4f

Please sign in to comment.