SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
realtime audio on ze web

                APIs, Demos, Anwendungen
                Jan Krutisch <jan.krutisch@mindmatters.de>
                für #hhjs, 21.Februar 2011




Montag, 21. Februar 2011
Moi.




Montag, 21. Februar 2011
Realtime audio?




Montag, 21. Februar 2011
In/Out




Montag, 21. Februar 2011
Status Quo.




Montag, 21. Februar 2011
nada.




Montag, 21. Februar 2011
flash.




Montag, 21. Februar 2011
horizont.




Montag, 21. Februar 2011
Montag, 21. Februar 2011
Audio Data API




Montag, 21. Februar 2011
<audio/>




Montag, 21. Februar 2011
10 beta




Montag, 21. Februar 2011
Montag, 21. Februar 2011
Montag, 21. Februar 2011
Montag, 21. Februar 2011
Web Audio API




Montag, 21. Februar 2011
AudioContext




Montag, 21. Februar 2011
Das wars.




Montag, 21. Februar 2011
Ja, sorry, ey.




Montag, 21. Februar 2011
Code, or it didn‘t happen




Montag, 21. Februar 2011
<!DOCTYPE html>
                <html>
                  <head>
                    <title>JavaScript Audio Write Example</title>
                  </head>
                  <body>
                    <input type="text" size="4" id="freq" value="440"><label for="hz">Hz</label>
                    <button onclick="start()">play</button>
                    <button onclick="stop()">stop</button>

                    <script type="text/javascript">
                      function AudioDataDestination(sampleRate, readFn) {
                        // Initialize the audio output.
                        var audio = new Audio();
                        audio.mozSetup(1, sampleRate);

                          var currentWritePosition = 0;
                          var prebufferSize = sampleRate / 2; // buffer 500ms
                          var tail = null;

                          // The function called with regular interval to populate
                          // the audio output buffer.
                          setInterval(function() {
                            var written;
                            // Check if some data was not written in previous attempts.
                            if(tail) {
                              written = audio.mozWriteAudio(tail);
                              currentWritePosition += written;
                              if(written < tail.length) {
                                // Not all the data was written, saving the tail...
                                tail = tail.slice(written);
                                return; // ... and exit the function.
                              }
                              tail = null;
                            }

                            // Check if we need add some data to the audio output.
                            var currentPosition = audio.mozCurrentSampleOffset();
                            var available = currentPosition + prebufferSize - currentWritePosition;
                            if(available > 0) {
                              // Request some sound data from the callback function.
                              var soundData = new Float32Array(available);
                              readFn(soundData);

                              // Writting the data.
                              written = audio.mozWriteAudio(soundData);
                              if(written < soundData.length) {
                                // Not all the data was written, saving the tail.
                                tail = soundData.slice(written);
                              }
                              currentWritePosition += written;
                            }
                          }, 100);
                      }

                      // Control and generate the sound.

                      var frequency = 0, currentSoundSample;
                      var sampleRate = 44100;

                      function requestSoundData(soundData) {
                        if (!frequency) {
                          return; // no sound selected
                        }

                          var k = 2* Math.PI * frequency / sampleRate;
                          for (var i=0, size=soundData.length; i<size; i++) {
                            soundData[i] = Math.sin(k * currentSoundSample++);
                          }
                      }

                      var audioDestination = new AudioDataDestination(sampleRate, requestSoundData);

                      function start() {
                        currentSoundSample = 0;
                        frequency = parseFloat(document.getElementById("freq").value);
                      }

                      function stop() {
                        frequency = 0;
                      }
                  </script>




Montag, 21. Februar 2011
[...]

                     var audio = new Audio();
                     audio.mozSetup(1, sampleRate);

                [...]

                     written = audio.mozWriteAudio(tail);

                [...]




Montag, 21. Februar 2011
https://wiki.mozilla.org/Audio_Data_API#Writing_Audio




Montag, 21. Februar 2011
context = new webkitAudioContext();

                           var jsNode = context.createJavaScriptNode(8192, 0, 2);

                           jsNode.connect(context.destination);

                           jsNode.onaudioprocess = requestSoundData;




Montag, 21. Februar 2011
Anwendungen




Montag, 21. Februar 2011
Musik




Montag, 21. Februar 2011
Spiele




Montag, 21. Februar 2011
(
                Build and they will come
                )


Montag, 21. Februar 2011
Meine kleine Ecke




Montag, 21. Februar 2011
http://webloop.pixelpoke.de




Montag, 21. Februar 2011
http://github.com/halfbyte/soundbridge.js




Montag, 21. Februar 2011
soundbridge = SoundBridge(2, 44100, '..');

                [...]
                  soundbridge.setCallback(calc);
                  soundbridge.play();
                }, 1000);




Montag, 21. Februar 2011

Weitere ähnliche Inhalte

Andere mochten auch

MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)jan_mindmatters
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007jan_mindmatters
 
Railsrumble railscamphh 2010
Railsrumble railscamphh 2010Railsrumble railscamphh 2010
Railsrumble railscamphh 2010jan_mindmatters
 
Mongodb on Ruby And Rails (froscon 2010)
Mongodb on Ruby And Rails (froscon 2010)Mongodb on Ruby And Rails (froscon 2010)
Mongodb on Ruby And Rails (froscon 2010)jan_mindmatters
 
Ruby for Artists and Tinkerers. A non-presentation.
Ruby for Artists and Tinkerers. A non-presentation.Ruby for Artists and Tinkerers. A non-presentation.
Ruby for Artists and Tinkerers. A non-presentation.jan_mindmatters
 
Achterman csla 2011reading_online
Achterman csla 2011reading_onlineAchterman csla 2011reading_online
Achterman csla 2011reading_onlinedachterman
 
Open Source Hardware - Of makers and tinkerers
Open Source Hardware - Of makers and tinkerersOpen Source Hardware - Of makers and tinkerers
Open Source Hardware - Of makers and tinkerersjan_mindmatters
 
YALSA eReading 2012
YALSA eReading 2012YALSA eReading 2012
YALSA eReading 2012jasongkurtz
 
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...TISP Project
 
Digital Divide: Connecting Students to Electronic Text
Digital Divide: Connecting Students to Electronic TextDigital Divide: Connecting Students to Electronic Text
Digital Divide: Connecting Students to Electronic TextDavid Cain
 
Ebooks in the Academy: Impacts on Learning and Pedagogy
Ebooks in the Academy: Impacts on Learning and PedagogyEbooks in the Academy: Impacts on Learning and Pedagogy
Ebooks in the Academy: Impacts on Learning and PedagogyBeth Transue
 

Andere mochten auch (13)

MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Mongodb railscamphh
Mongodb railscamphhMongodb railscamphh
Mongodb railscamphh
 
Railsrumble railscamphh 2010
Railsrumble railscamphh 2010Railsrumble railscamphh 2010
Railsrumble railscamphh 2010
 
Mongodb on Ruby And Rails (froscon 2010)
Mongodb on Ruby And Rails (froscon 2010)Mongodb on Ruby And Rails (froscon 2010)
Mongodb on Ruby And Rails (froscon 2010)
 
Ruby for Artists and Tinkerers. A non-presentation.
Ruby for Artists and Tinkerers. A non-presentation.Ruby for Artists and Tinkerers. A non-presentation.
Ruby for Artists and Tinkerers. A non-presentation.
 
Achterman csla 2011reading_online
Achterman csla 2011reading_onlineAchterman csla 2011reading_online
Achterman csla 2011reading_online
 
Open Source Hardware - Of makers and tinkerers
Open Source Hardware - Of makers and tinkerersOpen Source Hardware - Of makers and tinkerers
Open Source Hardware - Of makers and tinkerers
 
Manila seminar
Manila seminarManila seminar
Manila seminar
 
YALSA eReading 2012
YALSA eReading 2012YALSA eReading 2012
YALSA eReading 2012
 
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...
E. A. Draffan (University of Southampton), Accessibility of etext, ebooks and...
 
Digital Divide: Connecting Students to Electronic Text
Digital Divide: Connecting Students to Electronic TextDigital Divide: Connecting Students to Electronic Text
Digital Divide: Connecting Students to Electronic Text
 
Ebooks in the Academy: Impacts on Learning and Pedagogy
Ebooks in the Academy: Impacts on Learning and PedagogyEbooks in the Academy: Impacts on Learning and Pedagogy
Ebooks in the Academy: Impacts on Learning and Pedagogy
 

Mehr von jan_mindmatters

10 fun projects to improve your coding skills
10 fun projects to improve your coding skills10 fun projects to improve your coding skills
10 fun projects to improve your coding skillsjan_mindmatters
 
MongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 realMongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 realjan_mindmatters
 
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & lessLiebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & lessjan_mindmatters
 
Facebook mit Rails und Facebooker
Facebook mit Rails und FacebookerFacebook mit Rails und Facebooker
Facebook mit Rails und Facebookerjan_mindmatters
 
Show the frontend some love - HAML, SASS and COMPASS
Show the frontend some love - HAML, SASS and COMPASSShow the frontend some love - HAML, SASS and COMPASS
Show the frontend some love - HAML, SASS and COMPASSjan_mindmatters
 
Lehmanns Rails Erweitern
Lehmanns Rails ErweiternLehmanns Rails Erweitern
Lehmanns Rails Erweiternjan_mindmatters
 

Mehr von jan_mindmatters (8)

10 fun projects to improve your coding skills
10 fun projects to improve your coding skills10 fun projects to improve your coding skills
10 fun projects to improve your coding skills
 
MongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 realMongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 real
 
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & lessLiebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
 
Facebook mit Rails und Facebooker
Facebook mit Rails und FacebookerFacebook mit Rails und Facebooker
Facebook mit Rails und Facebooker
 
Show the frontend some love - HAML, SASS and COMPASS
Show the frontend some love - HAML, SASS and COMPASSShow the frontend some love - HAML, SASS and COMPASS
Show the frontend some love - HAML, SASS and COMPASS
 
HAML / SASS and COMPASS
HAML / SASS and COMPASSHAML / SASS and COMPASS
HAML / SASS and COMPASS
 
Merb. Rails in anders.
Merb. Rails in anders.Merb. Rails in anders.
Merb. Rails in anders.
 
Lehmanns Rails Erweitern
Lehmanns Rails ErweiternLehmanns Rails Erweitern
Lehmanns Rails Erweitern
 

realtime audio on ze web @ hhjs