Interested in working with us? We offer a superb REMOTE work opportunity for a WEB ENGINEER.
Displaying the Episode's Waveform
What’s a Waveform?
A waveform is a visual representation of an audio file according to its volume intensity changes over time. Spreaker uses a waveform to display an episode’s playback progress on both the website and widget, and provides access to the waveform data points through the API.
Loading Waveform Data Points
The waveform data consists of a JSON-encoded array of 870 float numbers ranging from 0 (lowest) to 1 (highest). Each Episode exports the property
waveform_url, which contains the URL of a gzipped JSON, and within that contains the episode’s waveform data points.
Example: Get an episode’s waveform URL
Example: Get an episode’s waveform data points
The response body is a JSON object containing every waveform data point.
## Drawing the Waveform
Drawing the waveform is quite easy. Given that
H is the height of your waveform, you should draw a vertical line for each data point, where each line should be a maximum height of
H * data_point_value. The waveform lines should be anchored to the bottom of the waveform area.
Note: the widget’s waveform, embedded at the top of the page, draws 2 lines (data points) every 3 pixels. The natural total width of that waveform is 870 + (870 / 3) pixels = 1160 pixels. In order to fit the waveform in a different area, you should rescale the data points (see the next section).
Rescaling Waveform Data Points
Spreaker provides 870 data points for each waveform. However, in some cases you may need more or fewer. For the sake of simplicity, we provide a PHP implementation of an algorithm that rescales data points from 870 values to the number of values you need.