Hey,

I want to make my dream come true - want to make a interactive audio feature (pure data) in my website.
It will includes ~dac, bang, inline etc.
I know Pure Data but I really don't know how to embed it in html.
I own domain and host server.
I made the step by step https://github.com/sebpiq/WebPd#step-by-step-guide but I stopped at number 6. Python.
I need a more detail guide, help me please,
Michael

@Michael All the steps are pretty clearly detailed in #6. Which part are you having difficulty with? Have you verified you have python installed on your computer and which version it is? Do you know how to navigate to the folder you created for the project? Are the version-dependent python http-server commands unclear/not working?

All of step 6 is just to run a little web server on your computer so you can test things out before putting it on your internet-facing web server. You could just as easily upload all of the files to your remote server and test it if you don't mind others being able to see it.

There have been changed since HTML 5 and the "step by step" manual is outdated.

The "script" balise now needs a "type" argument.

@Il-pleut webpd.js:3 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

Works fine on firefox and safari, and on my cellphone "internet" browser. But not for Chrome who wants a user gesture. Very nice but it means someone will have to put some kind of button for chrome. Thank you @EEight . And Chrome is by far the most popular browser nowaday.

And there the simpliest webpd site I could come up with.

The site full code :
Site.zip

You can use it for yourself. Put your image and your patch and your done.

Take some time to read the step-by-step guide nonetheless, it will help you greatly.

By defining areas on the image, you can, in conjonction with onclick and Pd.send() function, create an interactive patch. Note that, not only images, but any part of the site, can be made interactive.

Don't forget that webpd doesn"t feature all pure data objects, only a (large) selection. If your patch doesn't behave as expected, check the list of objects.

@Il-pleut hey Leonis thanks for the info and cool webpage!! I want to make something similar but also make the possibility so that anyone who joins in the webpage could essentially play through some knobs/sliders themselves. My knowledge of PD is awful, I really can't find any other simple way to do this rather than PD, would you recommend any?

Hello

If you want to add inputs to the patch, you can use Html buttons and the function "onclick".
Something like that:

<button onclick="pd.send ( ' receive01 ' , ' 1 ' )"> 1 <button>
<button onclick="pd.send ( 'receive01 ' , ' 2 ' )"> 2 <button>
<button onclick="pd.send ( 'receive01' , ' 3 ' )"> 3 <button>

Maybe the syntaxe is not exact. See there for more info.

@Il-pleut Site's offline now?

Yes. The code though is still valide.