[Csnd] Csound on the web audio input
Date | 2020-12-05 19:32 |
From | Tarmo Johannes |
Subject | [Csnd] Csound on the web audio input |
Hi, I need some help (looking first towards Steven or Hlödever :) ) wit using microphone on the web - I try to use audio input in a React based Csound web app. I guess I need to use CsoundObj.enableAudioInput for that but I failed to figure out how. What I tried: --- const [csound, setCsound] = useState(null); --- Unhandled Rejection (TypeError): Q is undefined from line cs.enableAudioInput( (res) => { Please point me to some example or explain how should I handle it? Thanks! tarmo |
Date | 2020-12-06 21:51 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
And another question - I would really appreciate some help! Can you guess why this gives always "undefined" (both value and value2) const getChannel = () => { let value2 = csound.requestControlChannel("ratio", (value) => console.log("Ratio1: ", value)); console.log("Value2", value2); }; Kontakt Tarmo Johannes (<trmjhnns@gmail.com>) kirjutas kuupäeval L, 5. detsember 2020 kell 21:32:
|
Date | 2020-12-07 02:24 |
From | Steven Yi |
Subject | Re: [Csnd] Csound on the web audio input |
Hi Tarmo, I've used the enableAudioInput() before, but the message about Q is odd; I'm not really sure what is happening there. For requestControlChannel, you should be getting a value for value but value2 would be undefined. Is there source code you could point me to to test? (If it's a private project you can email me off list.) Could you mention what OS and browser versions you are using? Thanks! Steven On Sun, Dec 6, 2020 at 4:51 PM Tarmo Johannes |
Date | 2020-12-07 10:25 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
Hi! It is a small test project, based on your learn-synthesis examples. So probably it is enough if I attach the file of the component and you can easily hook it into your project to test with? I made the test on openSuse Linux, Firefox 78, tried also on Chrome 85, same result. I am using @kunstmusik/csound module in the project. Thanks! tarmo Kontakt Steven Yi (<stevenyi@gmail.com>) kirjutas kuupäeval E, 7. detsember 2020 kell 04:24: Hi Tarmo, |
Date | 2020-12-07 15:20 |
From | Steven Yi |
Subject | Re: [Csnd] Csound on the web audio input |
I can test that, can you send me the file of the component? On Mon, Dec 7, 2020 at 5:25 AM Tarmo Johannes |
Date | 2020-12-07 16:19 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
Oh, Forgot the attachment. Or rather- Now I found out that the js file was discarded for the security reasons. Now uploaded to: Thanks! tarmo Kontakt Steven Yi (<stevenyi@gmail.com>) kirjutas kuupäeval E, 7. detsember 2020 kell 17:20: I can test that, can you send me the file of the component? |
Date | 2020-12-09 21:18 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
Hi, Steven, Have you had chance to check why requestControlChannel and enableAudioInput did not work in my test app with @kunstmusik/csound? Thanks! tarmo Kontakt Tarmo Johannes (<trmjhnns@gmail.com>) kirjutas kuupäeval E, 7. detsember 2020 kell 18:19:
|
Date | 2020-12-09 23:45 |
From | Steven Yi |
Subject | Re: [Csnd] Csound on the web audio input |
Sorry, I have not had a chance to yet (end of term with lots of grading at the moment!). I'll try to take a look at this later tonight. On Wed, Dec 9, 2020 at 4:18 PM Tarmo Johannes |
Date | 2020-12-10 13:24 |
From | Steven Yi |
Subject | Re: [Csnd] Csound on the web audio input |
I ran things here and I had to use this code to get the control channel value: const getChannel = () => { csound.requestControlChannel("ratio", () => console.log("Ratio1: ", csound.getControlChannel("ratio"))); }; I don't remember the design decision behind this but the callback does not accept arguments in the current implementation. I was also able to uncomment your code for audio input and got the OK option here once I permitted microphone access on my browser for the page. Just a note, I was working with Hlodver on a redesigned WebAudio Csound that merges designs between what he has done in csound-wasm and what we have in the current WebAudio Csound. I think some API methods will change but largely for the better (e.g., most API methods will be promise-based). That work stalled with the end of term here for me but should resume next week. If all goes well we'll open it up for testing while we iron out examples and documentation. On Wed, Dec 9, 2020 at 6:45 PM Steven Yi |
Date | 2020-12-10 18:43 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
Hi, Steven, Thanks a lot for taking time from your busy scheduler! I understood now how to get channel values and it works as supposed. And it is very good news that you are joining your forces with Hlödver! I was just in contact with him and tried also csound-wasm npm module but had other problems. I will do some digging about enableAudioInput - it probably needs another parameter, I try to figure it out. Best! tarmo Kontakt Steven Yi (<stevenyi@gmail.com>) kirjutas kuupäeval N, 10. detsember 2020 kell 15:25: I ran things here and I had to use this code to get the control channel value: |
Date | 2020-12-11 11:10 |
From | Tarmo Johannes |
Subject | Re: [Csnd] Csound on the web audio input |
Hi, Ok, I found the reason for enableAudioInput not to work - it took quite some time to dug out, maybe it is helpful for others, too: the problem was that I was running the test session of the test react app with npm start and that sets the host name from environment HOST variable and started the web page on http://tarmo-laptop:3000 In CsoundObj.js the enableAudioInput has lines:
Finally I found out that if the page is served from non secure connection (ie http, not https), then getUserMedia (and navigator.mediaDevice) are accessable, ie always undefined: from https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia Note: If the current document isn't loaded securely, navigator.mediaDevices will be undefined , and you cannot use getUserMedia() . See Security for more information on this and other security issues related to using getUserMedia() localhost is considered secure connection, but any other alisa, although it is de facto localhost, not. So I needed to change my startup command to: export HOST=localhost ; npm start and then everything worked as expected. Huhh, I can move on now. Take care! tarmo Kontakt Tarmo Johannes (<trmjhnns@gmail.com>) kirjutas kuupäeval N, 10. detsember 2020 kell 20:43:
|
Date | 2020-12-18 15:31 |
From | Steven Yi |
Subject | Re: [Csnd] Csound on the web audio input |
Hi Tarmo, FYI: I added this issue to the issue tracker so that this information gets added to the next WebAudio csound release: https://github.com/csound/csound/issues/1417 All best! Steven On Fri, Dec 11, 2020 at 6:10 AM Tarmo Johannes |