fertswap.blogg.se

Wavesurfer js
Wavesurfer js













wavesurfer js

On iOS the visual quality no longer matches that of the SoundCloud player – the bar widths are uneven with what seems to be a mismatch between the number of bars and the pixel resolution of the screen. Only the top half of the waveform is presented, with comments below. Hearthis.at, a self-styled SoundCloud alternative. That helps with the nice 3D effect (achieved by simply shading less of the bottom half of the waveform) and makes place for comments and the time indicator. When compared to the Wavesurfer example above it becomes clear that all silences have been boosted away. The mirror effect is similar to the one on SoundCloud, but with the reflection point set to exactly half.Īntjie in Berlin in the SoundCloud app on iPad. A bar width of 2 pixels would match the look of SoundCloud’s player, but I’ve allowed for some finer detail. The width of the Wavesurfer bars is set to 1px. Examples WavesurferĪntjie in Berlin on my website. Resize the browser window or change the orientation of your device when visiting the examples and watch the level of detail change. It’s worth keeping in mind that these waveform representations on the web are not static graphics (as are the examples below) – they are redrawn and appear slightly differently depending on the amount of space available. On the web the waveform serves more as an overview – as a form of navigation.

Wavesurfer js software#

With editing software the possibility of zooming in on details with as accurate a representation as possible is crucial. It’s a little less detailed when compared to a typical DAW waveform, but the vertical emphasis is perhaps well suited to identifying the particular point on a track one wants to click/tap in on – at least that’s how I think about it. Using them to display waveforms marks a move away from the more continuous style one is familiar with from DAWs and audio editing software.Īs far as I can tell, the shift can be traced back to late 2011 with the introduction of SoundCloud’s HTML5 player. Those meters are possibly still the most deeply entrenched (in the popular mind) graphic indication that music is playing. The most characteristic feature of waveform visualizations over the past few years has to be the style of tightly packed vertical bars, somewhat like a more detailed version of old HiFi EQ meters. The numerous options that Wavesurfer provides got me looking at the way waveforms are displayed on the web in a little more detail, and got me thinking about recent trends in visualizing audio. I recently began using Wavesurfer.js on my site rather than embedding everything via SoundCloud.

wavesurfer js

24, 2017 4 min read Waveforms (On the Web)















Wavesurfer js