[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"CI2qfq1gL3iX9A5aQRPCL6FNYJp-d6sdVnw5hvPLdn8":75,"CEtAr4xYwg6-io87lr_crm1ygaZKXiw7Kpyxn-2urJ8":190,"_apollo:default":232},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":142,"postWpBody":156,"wpHeaderImage":160,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":173,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":159,"wpYoastHead":183,"author":184},"NodeWpPost","742","Interaktiver Sound im Web mit RNBO",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1674566678,"UTC","+00:00","2023-01-24T13:24:38+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1673420925,"2023-01-11T07:08:45+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/interaktiver-sound-im-web-mit-rnbo",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Interaktiver Sound im Web mit RNBO | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/interaktiver-sound-im-web-mit-rnbo","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2023/01/BLOG_RNBO_v01_SHARING-1204x630px.jpg?h=3ecc83bb&itok=cyOFdPAn",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":124,"processed":125,"format":126},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[143,148,152],{"__typename":144,"id":145,"name":146,"path":147,"weight":122},"TermTags","597","Howto","/tag/howto",{"__typename":144,"id":149,"name":150,"path":151,"weight":122},"780","Max","/tag/max",{"__typename":144,"id":153,"name":154,"path":155,"weight":122},"1212","Sound","/tag/sound",{"__typename":157,"processed":158,"format":126,"summary":159},"TextSummary","\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Cycling ‘74 hat vor nicht allzu langer Zeit eine neue Technologie herausgebracht, über die ich heute ein bisschen schreiben möchte: RNBO. Es handelt sich dabei um ein Tool zur Entwicklung von interaktiver Software mit besonderem Fokus auf Sound. \u003Cbr>Die Technologie ist für uns als UX-Agentur vor allem von Interesse, weil RNBO es unter anderem ermöglicht, diese interaktiven Sound-Anwendungen in das Web zu exportieren. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wenn ihr sehen wollt, wie so etwas in der Praxis aussehen kann, möchte ich euch die \u003Ca href=\"https://learningsynths.ableton.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Learning Synths\u003C/a>-Seiten von Ableton sehr ans Herz legen, welche Cycling ‘74 zufolge mit RNBO entwickelt wurden. Man sieht dort denke ich sehr gut, wie viel Potential in dieser Technologie steckt und dass ihre Möglichkeiten jene von einschlägigen JS-Libraries wie Tone.js deutlich übersteigen. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Das Ziel dieses Beitrags soll eine kleine Einführung in RNBO sein, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren. Doch bevor ich auf RNBO eingehen werde, möchte ich noch kurz auf Max/MSP zu sprechen kommen, da RNBO damit sehr eng verknüpft bzw. verwandt sind und es somit aus meiner Sicht sehr wichtig ist Max zu kennen um verstehen können was RNBO eigentlich ist und wo es herkommt.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>Max/MSP\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Max/MSP(kurz Max) ist eine visuelle Entwicklungsumgebung für Multimedia. Es wurde in den 80ern von Miller Puckette entwickelt und findet seither weite Verbreitung z.B. in der elektronischen Musik, oder bei Videokünstler:innen. Das Grundkonzept ist inspiriert von modularen Synthesizern: analog zu einem physischen Patch-Kabel lassen sich in Max Objekte mit jeweils verschiedenen Funktionen visuell miteinander verbinden. Die Objekte haben dabei verschiedene Patch-Points, die entweder in Echtzeit verschiedene Signale liefern, oder eben die andere Seite darstellen, welche diese Signale entgegennimmt und weiterverarbeitet. Die Eingänge sind dabei immer oben und die Ausgänge unten.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Ein einfaches Beispiel für eine Anwendung wäre z.B. die Lautstärke eines Tones. Möchte man die Lautstärke eines Tones im Zeitverlauf verändern, braucht man drei Komponenten: eine Klangquelle, einen regelbaren Verstärker, sowie ein Objekt, welches den Verlauf der Lautstärke abbildet. Das Signal der Klangquelle wird an das Verstärker-Modul gesendet und dieses erhält als zweiten Input das Signal des Lautstärkeverlaufs und kann nun als Output ein Signal des veränderten Tons ausgeben. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>In Max würde das dann so aussehen:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"8a1483c2-1ec4-48b8-99b8-5cfd7565692d\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=laLc8vl_ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=3wynMyCg 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"247\" height=\"144\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=NnBD5j5l 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=6cFsFDAo 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"247\" height=\"144\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=DnVl7mLk 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=4Y3ru_o8 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"247\" height=\"144\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=3T0bmHxO 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=nGUo2hMO 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"247\" height=\"144\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=v2jnpBaB 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp?itok=Cm50j2ec 2x\" type=\"image/webp\" width=\"247\" height=\"144\">\n                  \u003Cimg loading=\"lazy\" width=\"247\" height=\"144\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ.webp.jpg?itok=Cm50j2ec\" alt=\"MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ\" title=\"MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Das \u003Cem>cycle~-\u003C/em>Objekt liefert dabei beständig einen simplen Sinuston mit 440 Hz, während das \u003Cem>line~\u003C/em>-Objekt eine \u003Cem>Message\u003C/em> bekommt, welche besagt “Gehe von 0 auf 0.5 in 2000 ms, danach auf 0 in 100 ms”. Daraus macht line~ ein Signal, welches dem \u003Cem>*~\u003C/em>-Objekt zu jedem Zeitpunkt sagt auf welche Lautstärke, das Signal von cycle~ verstärkt, bzw. (digital gesehen) multipliziert werden soll. Immer wenn nun die Message an line~ übergeben wird, bekommen wir am unteren Patch-Point von *~ einen Ton, der in 2 Sekunden auf die halbe Lautstärke anwächst und dann in 100 ms wieder auf 0 abfällt. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>RNBO Basics\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Nachdem ihr nun hoffentlich ein vage Idee von Max gewinnen konntet, möchte ich auch schon zu RNBO übergehen. Das schöne dabei ist, dass, obwohl RNBO unter der Haube eine eigenständige Technologie ist, die Entwicklung von RNBO-Patches eigentlich sehr ähnlich zu der in Max sind. RNBO wird nämlich verkauft als ein Add-On für Max und es wird daher in demselben visuellen Environment gearbeitet. Das heißt auch, dass man dafür sowohl eine Lizenz für Max, wie auch für RNBO braucht. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Um nun mit der Entwicklung von RNBO starten zu können, legt ihr in einem Max-Patcher ein \u003Cem>rnbo~\u003C/em>-Objekt an und sogleich öffnet sich ein neues Fenster, in welchem ihr alle in RNBO verfügbaren Objekte verwenden könnt, anstelle der Max-Objekte. \u003Cbr>Wichtig ist dabei zu verstehen, dass dieses rnbo~-Objekt in einem Max-Patcher läuft, um also während der Entwicklung des RNBO-Patches etwas zu hören, müsst ihr den Output des Signals also auch in dem Max-Patcher hörbar machen(etwa über das \u003Cem>dac~\u003C/em>-Objekt).\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Unser vorheriges Beispiel mit der Lautstärke in Max könnte in RNBO in etwa so aussehen:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"4c027c2c-40f1-49b6-b9ff-a84b140f0d2e\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=KIg7G9Xn 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=PxBGA7eJ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"464\" height=\"320\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=s2dk3xGi 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=a3UqXwwA 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"464\" height=\"320\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=_n-rWWjv 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=GICmaGQA 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"464\" height=\"320\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=QrO-AQCV 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=fdNV5zuI 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"464\" height=\"320\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=FYGLhmSh 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp?itok=BmP7E0rq 2x\" type=\"image/webp\" width=\"464\" height=\"320\">\n                  \u003Cimg loading=\"lazy\" width=\"464\" height=\"320\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA.webp.jpg?itok=BmP7E0rq\" alt=\"YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA\" title=\"YzgoHSl2YTiOOs3PgfGCAFxT0aZqLMZT3Av0rGj6EuSNGh5crJkumz1eDCxaxlQnPwgcHTJdSqU8a9kfBwbeZfvb15IVuOEgmkp8pfjDSyD7EvENY3FENaaVEDL2jacGHjxDGnakAP5UJKkrVlG8jtsxfAu-GTBb-7AfDSboa9hPPp3pNR77IonXBuR7XA\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wir sehen, dass wir die aus Max bekannten Objekte cycle~, *~ und line~ alle in RNBO wiederfinden. Da RNBO mit Messages aber etwas anders umgeht, müssen wir das line~-Objekt etwas anders triggern, als in Max. \u003Cbr>Außerdem hab ich das RNBO-Patch noch über das \u003Cem>param\u003C/em>-Objekt um einen Parameter erweitert, mit dem wir die Zeit zum Anschwellen des Tons von außerhalb, also in unserem Fall von dem übergeordneten Max-Patcher, an das RNBO-Patch übergeben können. Immer wenn dieser Parameter geändert wird, wird nun die Zeit über den oberen rechten Eingang im line~-Objekt gesetzt und eine Message mit dem Zielwert 0.5 an den linken Eingang gesendet. Hat line~ den Zielwert erreicht, so stößt es über den unteren rechten Ausgang die Message mit dem Wert 0 an, welche line~ anschließend noch einmal in derselben Zeit wieder zu null zurückkehren lässt. \u003Cbr>Das resultierende Audiosignal wird über das \u003Cem>out~\u003C/em>-Objekt in den Kanälen 1 und 2 an das übergeordnete Patch zurückgeschickt. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"a9dd8068-bed6-4953-8e9d-b68a6e7bac32\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=R065STLK 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=YiouprxY 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"315\" height=\"212\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=kGQ9Lg7L 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=Ak3u5fR2 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"315\" height=\"212\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=cbF8A-Dv 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=dQ1WUf1K 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"315\" height=\"212\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=P0FKTarS 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=1nHeko40 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"315\" height=\"212\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=NaQk3flZ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp?itok=kehFK878 2x\" type=\"image/webp\" width=\"315\" height=\"212\">\n                  \u003Cimg loading=\"lazy\" width=\"315\" height=\"212\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw.webp.jpg?itok=kehFK878\" alt=\"Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw\" title=\"Fl4nOpnPc_9wldBx58d1v7DRWiqG3k7MW7-tE8cGwGRwthWi77TuNJLComeiTDW2Kj2_WGU54FkXqdxU0AOL32wIbY6dLSaHrP9nZNM_-FJcC9AZl-SS0DeM-7OIfGLBcD3BTw743Jp6h3PmVtF7LTRT41RqRj9e7l5Xe88P24hpqaIKd1OYD9zernY5Uw\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>In unserem Max-Patcher sieht das ganze nun so aus:\u003Cbr>\u003Cbr>Über dac~ können wir, wie bereits erwähnt, das Ergebnis der beiden Kanäle links und rechts hören und über das \u003Cem>attrui\u003C/em>-Objekt können wir den Parameter unseres RNBO-Patches verändern. Super, wir haben nun unser erstes simples RNBO-Patch fertig, jetzt können wir uns endlich daran machen, es im Browser hörbar zu machen!\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>RNBO im Browser\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Um das RNBO in das Web zu bekommen, wird im Patcher-Fenster innerhalb des rnbo~-Objekts eine Export-Funktion bereitgestellt. Hier kann man “Web Export” auswählen und bekommt so ein JSON-File, welches nun in jedes Web-Projekt eingebaut werden kann. Um das JSON-Objekt zu verarbeiten, wird die @rnbo/js library bereitgestellt, mit welcher das RNBO Patch in einen \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletNode\" target=\"_blank\" rel=\"noreferrer noopener\">AudioWorkletNode\u003C/a>, einer Komponente der \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API?retiredLocale=de\" target=\"_blank\" rel=\"noreferrer noopener\">Web Audio API\u003C/a>, verwandelt wird. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Wie ihr diese Komponente genau verwendet, hängt natürlich sehr von dem jeweiligen Projekt ab und eine Schritt-für-Schritt-Anleitung würde den Rahmen dieses Blogs wohl etwas sprengen, deshalb möchte ich euch an dieser Stelle empfehlen, einen Blick in das \u003Ca href=\"https://github.com/Cycling74/rnbo.example.webpage\" target=\"_blank\" rel=\"noreferrer noopener\">offizielle Example-Projekt\u003C/a> zu werfen, damit ihr sehen könnt wie das in der Praxis aussehen könnte. Wenn ihr in diesem Projekt das exportierte JSON-File einfach in dem /export-Folder ablegt, solltet ihr bereits ein lauffähige App als Ausgangsbasis haben. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Weitere Infos findet ihr auch in der \u003Ca href=\"https://rnbo.cycling74.com/learn/getting-the-rnbojs-library\" target=\"_blank\" rel=\"noreferrer noopener\">Working with JavaScript\u003C/a>-Serie von Cycling 74’. Wenn ihr noch neu in der Entwicklung in der JS-Entwicklung seid, werft gern auch einmal einen Blick in unseren \u003Ca href=\"/know-how?knowhowpage=1&search=javascript\" target=\"_blank\" rel=\"noreferrer noopener\">Blog\u003C/a>, hier finden sich viele spannende und einführende Beiträge in das Thema.\u003Cbr>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>Fazit\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Ich hoffe ihr seid nach dieser kleinen Einführung ebenso begeistert von RNBO wie ich und nun in der Lage eure ersten Schritte damit zu machen. Wenn ihr noch tiefer in die Materie eintauchen wollt, seht euch unbedingt die \u003Ca href=\"https://rnbo.cycling74.com/learn\" target=\"_blank\" rel=\"noreferrer noopener\">offizielle Dokumentation\u003C/a> an, hier sind alle Grundlagen sehr gut beschrieben. Wie bei Max sind auch in RNBO die Help-Funktionen, die für jedes Objekt direkt im Patcher verfügbar sind, extrem hilfreich, da sie immer lauffähige Beispiele enthalten, anhand deren man sofort versteht, wie ein Objekt funktioniert. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>Zu guter Letzt möchte ich noch die Frage in den Raum stellen, ob RNBO in einem professionellen Umfeld auch zu einer verbesserten UX auf Webseiten und Apps verhelfen kann, oder ob die Sache doch eher was für Künstler, oder einfach ein Gimmick ist. Was meint ihr? Habt ihr Ideen für Projekte, in denen RNBO Sinn macht?\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n","Wir zeigen euch, wie man interaktive Sounds im Browser schafft. Eine Einführung in RNBO, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren.\r\n",{"__typename":161,"id":162,"excludeFromScreenreader":13,"mediaImage":163,"name":169,"path":172,"status":20},"MediaImage","410",{"__typename":164,"url":165,"width":166,"height":167,"alt":168,"title":169,"size":170,"mime":171},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/01/BLOG_LK_INTERAKTIVERSOUND_RNBOv01_TITEL-2880x1300px-scaled.jpg",2560,1156,"Titelbild zum Blogpost","BLOG_LK_INTERAKTIVERSOUND_RNBOv01_TITEL-2880x1300px",647961,"image/jpeg","/media/410/edit",{"__typename":161,"id":174,"excludeFromScreenreader":13,"mediaImage":175,"name":180,"path":182,"status":20},"409",{"__typename":164,"url":176,"width":177,"height":178,"alt":179,"title":180,"size":181,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2023/01/BLOG_RNBO_v01_SHARING-1204x630px.jpg",1204,630,"Sharebild","BLOG_RNBO_v01_SHARING-1204x630px",648066,"/media/409/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Wir zeigen euch, wie man interaktive Sounds im Browser schafft. Eine Einführung in RNBO, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren.\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Interaktiver Sound im Web mit RNBO\" />\n\u003Cmeta property=\"og:description\" content=\"Wir zeigen euch, wie man interaktive Sounds im Browser schafft. Eine Einführung in RNBO, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2023-01-11T08:08:45+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2023-01-24T14:24:38+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://lh3.googleusercontent.com/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"6 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://lh3.googleusercontent.com/MGWSdtYBdbDGKyOhejoVf6vx-A29vCAeVVIWGQI_lR5MQtzyNELhrGoQpAEGG_Lu5zlphx-9gkDsIH_2Xit6o7dJNgbQc2JNXBWpyTG3F3p6otCs2VM8Vtq2jktzoEcqB9HPgnI8h5wn4Hi4YOeRNPK8mYH6oMJsk0cjXg3h40wG35DQOvlCyxs9pKxWxQ\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/\",\"name\":\"Interaktiver Sound im Web mit RNBO\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/#primaryimage\"},\"datePublished\":\"2023-01-11T08:08:45+00:00\",\"dateModified\":\"2023-01-24T14:24:38+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6dfb3439b4a9b40be74f4265cc2bf3b0\"},\"description\":\"Wir zeigen euch, wie man interaktive Sounds im Browser schafft. Eine Einf\\u00fchrung in RNBO, die euch hoffentlich Lust macht, das Ganze selbst auszuprobieren.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/interaktiver-sound-im-web-mit-rnbo/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6dfb3439b4a9b40be74f4265cc2bf3b0\",\"name\":\"Fabian Schiel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/eb6a4e1a97469169c51e2e0f93be1ff6?s=96&d=mm&r=g\",\"caption\":\"Fabian Schiel\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":185,"id":186,"myRole":187,"name":188,"nickname":189},"User","6","Backend-Dev","f-schiel","Fabian Schiel",{"latestKnowhow":191},[192,207,220],{"__typename":79,"id":193,"title":194,"path":195,"wpTeaserText":196,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":161,"id":198,"excludeFromScreenreader":13,"mediaImage":199,"name":205,"path":206,"status":20},"3364",{"__typename":164,"url":200,"width":201,"height":202,"alt":203,"title":13,"size":204,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":208,"title":209,"path":210,"wpTeaserText":211,"wpPromotedTeaserImage":13,"wpHeaderImage":212},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":161,"id":213,"excludeFromScreenreader":13,"mediaImage":214,"name":218,"path":219,"status":20},"3355",{"__typename":164,"url":215,"width":201,"height":202,"alt":216,"title":13,"size":217,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":221,"title":222,"path":223,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":224},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":161,"id":225,"excludeFromScreenreader":21,"mediaImage":226,"name":230,"path":231,"status":20},"3303",{"__typename":164,"url":227,"width":201,"height":202,"alt":228,"title":13,"size":229,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":233,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":234,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":238,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":241,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":244,"Menu:footer":247,"ROOT_QUERY":257,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":273,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":276,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":279,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":282,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":285,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":288,"Menu:nuxt-main-menu":291,"TermCategories:7":305,"TermTags:597":316,"TermTags:780":317,"TermTags:1212":318,"MediaImage:410":319,"MediaImage:409":321,"User:6":323,"NodeWpPost:742":324,"MediaImage:3364":353,"NodeWpPost:1619":355,"MediaImage:3355":358,"NodeWpPost:1616":360,"MediaImage:3303":363,"NodeWpPost:1606":365},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",235,"internal",20,"expanded",21,"attributes",237],{"__ref":236},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",239,"internal",20,"expanded",21,"attributes",240],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",242,"internal",20,"expanded",21,"attributes",243],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",245,"internal",21,"expanded",21,"attributes",246],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",248],[249,251,253,255],{"__ref":250},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":252},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":254},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":256},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",258,"menu({\"name\":\"FOOTER\"})",259,"menu({\"name\":\"NUXT_MAIN_MENU\"})",261,"route({\"path\":\"/blog/interaktiver-sound-im-web-mit-rnbo\"})",263,"latestKnowhow({\"excludeId\":\"742\",\"limit\":3})",266],"Query",{"__ref":260},"Menu:footer",{"__ref":262},"Menu:nuxt-main-menu",["null","__typename",77,"entity",264],{"__ref":265},"NodeWpPost:742",[267,269,271],{"__ref":268},"NodeWpPost:1619",{"__ref":270},"NodeWpPost:1616",{"__ref":272},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",277,"internal",20,"expanded",21,"attributes",278],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",280,"internal",20,"expanded",21,"attributes",281],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",283,"internal",20,"expanded",21,"attributes",284],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",286,"internal",20,"expanded",21,"attributes",287],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",289,"internal",20,"expanded",21,"attributes",290],{"__ref":236},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",292],[293,295,297,299,301,303],{"__ref":294},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":296},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":298},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":300},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":302},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":304},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",306,"langcode",307,"changed",308,"metatag",309],["null","__typename",124,"processed",125,"format",126],{"__ref":236},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[310,312,314],["null","__typename",95,"tag",96,"attributes",311],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",313],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",315],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",144,"id",145,"name",146,"path",147,"weight",122],["null","__typename",144,"id",149,"name",150,"path",151,"weight",122],["null","__typename",144,"id",153,"name",154,"path",155,"weight",122],["null","__typename",161,"id",162,"excludeFromScreenreader",13,"mediaImage",320,"name",169,"path",172,"status",20],["null","__typename",164,"url",165,"width",166,"height",167,"alt",168,"title",169,"size",170,"mime",171],["null","__typename",161,"id",174,"excludeFromScreenreader",13,"mediaImage",322,"name",180,"path",182,"status",20],["null","__typename",164,"url",176,"width",177,"height",178,"alt",179,"title",180,"size",181,"mime",171],["null","__typename",185,"id",186,"myRole",187,"name",188,"nickname",189],["null","__typename",79,"id",80,"title",81,"changed",325,"created",326,"langcode",327,"path",92,"promote",21,"status",20,"sticky",21,"metatag",328,"category",337,"contentElements",13,"evergreen",13,"tags",339,"wpBody",346,"wpHeaderImage",347,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",349,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",159,"wpYoastHead",183,"author",351],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":236},[329,331,333,335],["null","__typename",95,"tag",96,"attributes",330],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",332],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",334],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",336],["null","__typename",111,"property",115,"content",116],{"__ref":338},"TermCategories:7",[340,342,344],{"__ref":341},"TermTags:597",{"__ref":343},"TermTags:780",{"__ref":345},"TermTags:1212",["null","__typename",157,"processed",158,"format",126,"summary",159],{"__ref":348},"MediaImage:410",{"__ref":350},"MediaImage:409",{"__ref":352},"User:6",["null","__typename",161,"id",198,"excludeFromScreenreader",13,"mediaImage",354,"name",205,"path",206,"status",20],["null","__typename",164,"url",200,"width",201,"height",202,"alt",203,"title",13,"size",204,"mime",171],["null","__typename",79,"id",193,"title",194,"path",195,"wpTeaserText",196,"wpPromotedTeaserImage",13,"wpHeaderImage",356],{"__ref":357},"MediaImage:3364",["null","__typename",161,"id",213,"excludeFromScreenreader",13,"mediaImage",359,"name",218,"path",219,"status",20],["null","__typename",164,"url",215,"width",201,"height",202,"alt",216,"title",13,"size",217,"mime",171],["null","__typename",79,"id",208,"title",209,"path",210,"wpTeaserText",211,"wpPromotedTeaserImage",13,"wpHeaderImage",361],{"__ref":362},"MediaImage:3355",["null","__typename",161,"id",225,"excludeFromScreenreader",21,"mediaImage",364,"name",230,"path",231,"status",20],["null","__typename",164,"url",227,"width",201,"height",202,"alt",228,"title",13,"size",229,"mime",171],["null","__typename",79,"id",221,"title",222,"path",223,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",366],{"__ref":367},"MediaImage:3303"]