--- /dev/null
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>TimeSide : open and fast web audio components</title>
+
+ <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
+ <meta name="author" content="Hakim El Hattab">
+
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+ <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/reveal.min.css">
+ <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/theme/night.css" id="theme">
+
+ <!-- For syntax highlighting -->
+ <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/lib/css/zenburn.css">
+
+ <!-- If the query includes 'print-pdf', use the PDF print sheet -->
+ <script>
+ document.write( '<link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
+ </script>
+
+ <!--[if lt IE 9]>
+ <script src="lib/js/html5shiv.js"></script>
+ <![endif]-->
+ </head>
+
+ <body>
+
+ <div class="reveal">
+
+ <!-- Any section element inside of this container is displayed as a slide -->
+ <div class="slides">
+
+ <section>
+ <h1>TimeSide</h1>
+ <h3>open and fast web audio components</h3>
+ <p>
+ <small>Created by <a href="http://fr.linkedin.com/in/guillaumepellerin">Guillaume Pellerin</a> / <a href="http://twitter.com/yomguy">@yomguy</a> at <a href="http://parisson.com" target="_blank">Parisson.com</a></small>
+ </p>
+ <iframe width='374' height='221' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://parisson.telemeta.org/archives/items/PRS_07_01_01/player/360x130'></iframe>
+ </section>
+
+ <section>
+ <h2>Heads up</h2>
+ <p>
+ TimeSide is a set of python components enabling easy audio processing, transcoding, imaging and streaming.
+ <br/><br/>
+ Its simple architecture and high-level API have been design to process serial pipelines.
+ <br/><br/>
+ It includes a powerfull HTM5 interactive player which can be embedded in any web application to provide fancy waveforms, various analyzer results, synced time metadata display during playback (time-marking) and remote indexing.
+ <br/><br/>
+ The engine (server side) is fully written in Python, the player (client side) in HTML, CSS and JavaScript.
+ </p>
+
+ <aside class="notes">
+ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
+ </aside>
+ </section>
+
+ <section>
+ <h2>Goals</h2>
+ <p>We just *need* a python library to:</p>
+ <br/>
+ <ul>
+ <li>build a <a href="http://python.org" target="_blank">python</a> framework to do asynchronous audio processing</li>
+ <li>decode audio frames from ANY format to numpy arrays</li>
+ <li>stream the frames in processors and do numpy data analyzing</li>
+ <li>create various waveforms, spectrograms, etc.. with numpy and PIL</li>
+ <li>transcode the processed frames in various media formats and stream it</li>
+ <li>provide a high-level HTML5 UI to stream the results <i>on demand</i> through the web</li>
+ <li>remote metadata indexing and time marking through a server like <a href="http://telemeta.org" target="_blank">Telemeta</a></li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Architecture</h2>
+ <img src="http://timeside.googlecode.com/git/doc/img/timeside_schema.png" alt="TimeSide architecture">
+ </section>
+
+ <section>
+ <h2>Quick processing example</h2>
+ <p>Define some processors:</p>
+ <pre><code data-trim class="python">
+import timeside
+
+decoder = timeside.decoder.FileDecoder('source.wav')
+grapher = timeside.grapher.Waveform()
+analyzer = timeside.analyzer.MaxLevel()
+encoder = timeside.encoder.Mp3Encoder('output.mp3')
+ </code></pre>
+ <p>then, the <i>magic</i> pipeline:</p>
+ <pre><code data-trim>
+(decoder | grapher | analyzer | encoder).run()
+ </code></pre>
+ <p>get the results:</p>
+ <pre><code data-trim>
+grapher.render(output='image.png')
+print 'Level:', analyzer.result()
+ </code></pre>
+ </section>
+
+ <section>
+ <h2>Quick UI example</h2>
+ <iframe width='374' height='221' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://parisson.telemeta.org/archives/items/PRS_07_01_01/player/360x130'></iframe>
+ </section>
+
+ <section>
+ <h2>Install for production</h2>
+ <p>(Linux, Debian)</p>
+ <pre><code data-trim class="bash">
+sudo apt-get update
+
+sudo apt-get install python python-pip python-setuptools python-gobject \
+ python-gst0.10 gstreamer0.10-plugins-base gir1.0-gstreamer-0.10 \
+ gstreamer0.10-plugins-good gstreamer0.10-plugins-bad \
+ gobject-introspection
+
+sudo pip install timeside
+ </code></pre>
+ </section>
+
+ <section>
+ <h2>Install for development 1/2</h2>
+ <p>(Linux, Debian)</p>
+ <pre><code data-trim class="bash">
+sudo apt-get update
+
+sudo apt-get install python python-pip python-setuptools python-gobject \
+ python-gst0.10 gstreamer0.10-plugins-base gir1.0-gstreamer-0.10 \
+ gstreamer0.10-plugins-good gstreamer0.10-plugins-bad \
+ gobject-introspection libsndfile-dev libsamplerate-dev docbook-to-man \
+ liblash-dev libfftw3-dev gcc git-core ipython
+ </code></pre>
+
+ <p>Install <a href="http://aubio.org" target="_blank">aubio</a> with "develop" branch</p>
+ <pre><code data-trim class="bash">
+git clone git://git.aubio.org/git/aubio/
+
+cd aubio
+
+git checkout develop
+
+./waf configure
+./waf build
+sudo ./waf install
+
+cd python
+sudo python setup.py install
+ </code></pre>
+ </section>
+
+
+ <section>
+ <h2>Install for development 2/2</h2>
+
+ <pre><code data-trim class="bash">
+
+git clone git@github.com:yomguy/TimeSide.git
+
+cd TimeSide
+
+git checkout dev
+
+export PYTHONPATH=$PYTHONPATH:`pwd`
+
+ </code></pre>
+
+ <h3>Ready!</h3>
+ </section>
+
+ <section>
+ <h2>Links</h2>
+ <ul>
+ <li><a href="https://code.google.com/p/timeside/">The official website</a></li>
+ <li><a href="https://github.com/yomguy/TimeSide">Source code on GitHub</a></li>
+ <li><a href="http://telemeta.org">Telemeta</a></li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Thanks!</h2>
+ <p>by Guillaume Pellerin</p>
+ <p><a href="mailto:guillaume@parisson.com">guillaume@parisson.com</a></p>
+ <p><a href="https://twitter.com/yomguy">@yomguy</a></p>
+ <br/>
+ <p><small>This document is released under the terms of the contract Creative Commons <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/" target="_blank">by-nc-sa/2.0/fr</a></small></p>
+ </section>
+
+ </div>
+
+ </div>
+
+ <script src="http://files.parisson.com/static/reveal.js/lib/js/head.min.js"></script>
+ <script src="http://files.parisson.com/static/reveal.js/js/reveal.min.js"></script>
+
+ <script>
+
+ // Full list of configuration options available here:
+ // https://github.com/hakimel/reveal.js#configuration
+ Reveal.initialize({
+ controls: true,
+ progress: true,
+ history: true,
+ center: true,
+
+ // The "normal" size of the presentation, aspect ratio will be preserved
+ // when the presentation is scaled to fit different resolutions. Can be
+ // specified using percentage units.
+ width: 960,
+ height: 700,
+
+ // Factor of the display size that should remain empty around the content
+ margin: 0.1,
+
+ // Bounds for smallest/largest possible scale to apply to content
+ minScale: 0.2,
+ maxScale: 1.0,
+
+ theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
+ transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
+
+ // Optional libraries used to extend on reveal.js
+ dependencies: [
+ { src: 'http://files.parisson.com/static/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
+ { src: 'http://files.parisson.com/static/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'http://files.parisson.com/static/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: 'http://files.parisson.com/static/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+ { src: 'http://files.parisson.com/static/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+ { src: 'http://files.parisson.com/static/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+ // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
+ // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
+ ]
+ });
+
+ </script>
+
+ </body>
+</html>
projects / timeside.git / commitdiff