zz85 / timeliner

simple javascript timeline library for animation and prototyping
https://twitter.com/blurspline
MIT License
709 stars 123 forks source link

Audio/video as waveform (line/oscillo/etc) [suggestion] #4

Open Kuranes opened 9 years ago

Kuranes commented 9 years ago

Use case: better visual sync between animations and audio/video, a bit like demoscene usual audio/visual reactivity ( http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/ )

Ideally, in the end, it's about having a custom ease where you can edit spline to make it look like the line waveform of you audio. (many audio/video tag libs like https://github.com/collab-project/videojs-wavesurfer or https://github.com/bbcrd/peaks.js etc)

zz85 commented 9 years ago

Thanks for the suggestion. Curves and audio is eventually something I wish to support

although I'm do not think that audio or audio analysis would be inside Timeliner core, perhaps as a plugin. Right now I think of Timeliner more as an embeddable easing tool rather than a full fledged NLE.

Perhaps @mrdoob's frame.js is currently more suited for syncing audio reactive visuals :)

zz85 commented 9 years ago

I'm think that audio support might actually be pretty useful.

So I experimented with creating an audio waveform in js + web audio api today. http://codepen.io/zz85/pen/pJzbwd?editors=101

I'll give more thought on how this can eventually go into timeliner

pwkey commented 6 years ago

I wondered if you had taken your thoughts further on integration of audio into Timeliner? I am looking to develop 3D enabled technical presentations which would comprise an initial animation (utilising Timeliner driving three.js) followed by the ability to interact in the 3D scene. A voice over would accompany the animation and hence the need to include audio and the ability to conveniently sync between the audio and animation.