- 8
- 11 907
JUCE
United Kingdom
เข้าร่วมเมื่อ 2 ส.ค. 2023
JUCE is the leading framework for creating multi-platform audio applications targeting desktop, mobile and embedded systems and the JUCE team operate the Audio Developer Conference.
JUCE website: juce.com
Forum: forum.juce.com
ADC website: audio.dev
JUCE website: juce.com
Forum: forum.juce.com
ADC website: audio.dev
JUCE C++: Create Toggle Button/Checkbox in WebView | GUI Tutorial
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial
👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/
🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE
💬 Share your thoughts on the JUCE forum: forum.juce.com/
Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with a WebView GUI.
This episode explains how to set up a toggle button (also referred to as a checkbox) controlling an audio parameter in real time. In the tutorial, the underlying parameter controls the bypass value: false means that the plugin is operating as usual and true means that gain application and output level measurement are skipped.
In the video tutorial:
✅ How to create an AudioParameterBool to control a true/false parameter
✅ How to use the AudioParameterValueTreeState to store your parameter
✅ How to set up a traditional C++ JUCE ToggleButton controlling an audio parameter
✅ How to set up a WebView-based toggle button controlling the same audio parameter
✅ Web slider classes explained: WebToggleButtonParameterAttachment, WebToggleButtonRelay, WebBrowserComponent, ToggleState
🔗 Check out the project repository and start using WebViews in you plugins today: github.com/JanWilczek/juce-webview-tutorial
📅 Video Release Date: 13.01.2025
ERRATUM: Check the newest state of the project on GitHub to see a way to avoid dynamic_casts mentioned in the tutorial.
ABOUT JUCE 8
The JUCE team is delighted to announce the release of JUCE 8, representing a significant advancement in audio application and plug-in development. This release showcases highly anticipated updates, including substantial low-level improvements to text rendering, lightning-fast Direct2D rendering on Windows, and the introduction of a new animation framework. In addition to bolstering traditional UI capabilities, JUCE pioneers a new era in audio software interfaces by unlocking the potential of WebViews, offering developers a modern foundation for next-generation applications.
An introduction to the main features of JUCE 8 can be found here: th-cam.com/video/mjp4Xu1QA0w/w-d-xo.htmlsi=mWHDjQYUx_9xsf5b
#JUCE #Cpp #JavaScript #AudioProgramming #WebViewGUIs #SoftwareDevelopment #AudioPlugins #JUCE8
TIMESTAMPS
00:00 Introduction
02:41 Boolean parameter-related classes explained
05:58 Creating an audio parameter controlling the bypass
11:08 Creating a C++ UI toggle button to toggle the bypass
16:11 Creating a WebView toggle button (C++ backend)
19:43 Creating a WebView toggle button (HTML/JS frontend)
24:00 Testing the plugin
25:15 Recap
👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/
🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE
💬 Share your thoughts on the JUCE forum: forum.juce.com/
Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with a WebView GUI.
This episode explains how to set up a toggle button (also referred to as a checkbox) controlling an audio parameter in real time. In the tutorial, the underlying parameter controls the bypass value: false means that the plugin is operating as usual and true means that gain application and output level measurement are skipped.
In the video tutorial:
✅ How to create an AudioParameterBool to control a true/false parameter
✅ How to use the AudioParameterValueTreeState to store your parameter
✅ How to set up a traditional C++ JUCE ToggleButton controlling an audio parameter
✅ How to set up a WebView-based toggle button controlling the same audio parameter
✅ Web slider classes explained: WebToggleButtonParameterAttachment, WebToggleButtonRelay, WebBrowserComponent, ToggleState
🔗 Check out the project repository and start using WebViews in you plugins today: github.com/JanWilczek/juce-webview-tutorial
📅 Video Release Date: 13.01.2025
ERRATUM: Check the newest state of the project on GitHub to see a way to avoid dynamic_casts mentioned in the tutorial.
ABOUT JUCE 8
The JUCE team is delighted to announce the release of JUCE 8, representing a significant advancement in audio application and plug-in development. This release showcases highly anticipated updates, including substantial low-level improvements to text rendering, lightning-fast Direct2D rendering on Windows, and the introduction of a new animation framework. In addition to bolstering traditional UI capabilities, JUCE pioneers a new era in audio software interfaces by unlocking the potential of WebViews, offering developers a modern foundation for next-generation applications.
An introduction to the main features of JUCE 8 can be found here: th-cam.com/video/mjp4Xu1QA0w/w-d-xo.htmlsi=mWHDjQYUx_9xsf5b
#JUCE #Cpp #JavaScript #AudioProgramming #WebViewGUIs #SoftwareDevelopment #AudioPlugins #JUCE8
TIMESTAMPS
00:00 Introduction
02:41 Boolean parameter-related classes explained
05:58 Creating an audio parameter controlling the bypass
11:08 Creating a C++ UI toggle button to toggle the bypass
16:11 Creating a WebView toggle button (C++ backend)
19:43 Creating a WebView toggle button (HTML/JS frontend)
24:00 Testing the plugin
25:15 Recap
มุมมอง: 106
วีดีโอ
Creating an Audio Gain Slider in Web UI | JUCE 8 WebViews Tutorial
มุมมอง 298หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the JUCE forum: forum.juce.com/ Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with a WebView GUI...
Visualising Audio Data in WebView | JUCE 8 WebViews Tutorial
มุมมอง 8294 หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the JUCE forum: forum.juce.com/ Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with a WebView GUI...
Hot Reloading Audio Plugin UIs Using Local Server | JUCE 8 WebViews Tutorial
มุมมอง 5825 หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the update on the JUCE forum: forum.juce.com/ Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with...
Communicating from JavaScript Frontend to C++ Backend | JUCE 8 WebViews Tutorial
มุมมอง 8665 หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the update on the JUCE forum: forum.juce.com/ Jan Wilczek, the founder of @WolfSoundAudio blog and TH-cam channel, presents how to build an audio plugin in JUCE with...
Communicating from C++ Backend to JavaScript Frontend | JUCE 8 WebViews Tutorial
มุมมอง 1.6K6 หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the update on the JUCE forum: forum.juce.com/ Jan Wilczek, founder of @WolfSoundAudio blog and TH-cam channel, presents how to set up a C project using JUCE to inclu...
Set Up WebViews in Your Audio Plugin UI | JUCE 8 WebViews Tutorial
มุมมอง 2.7K6 หลายเดือนก่อน
👉 PROJECT REPOSITORY: github.com/JanWilczek/juce-webview-tutorial 👀 JUCE 8 WebViews feature description: juce.com/blog/juce-8-feature-overview-webview-uis/ 🔗 JUCE 8 on GitHub: github.com/juce-framework/JUCE 💬 Share your thoughts on the update on the JUCE forum: forum.juce.com/ Jan Wilczek, founder of @WolfSoundAudio blog and TH-cam channel, presents how to set up a C project using JUCE to inclu...
Dive Into JUCE 8: WebViews, Animations, Emoji and More! 🧃🎉
มุมมอง 4.9K7 หลายเดือนก่อน
The JUCE 8 preview branch has been released! Watch this video for an overview of all the new features and major changes in one of the most loved C frameworks! 🔗 Check out the juce8 preview branch on GitHub: github.com/juce-framework/JUCE/tree/juce8 💬 Share your thoughts on the update on the JUCE forum: forum.juce.com/t/the-juce-8-preview-branch-is-available-now/ 👀 For more information, visit ju...
Excellent tutorial, thank you so much!
Glad you enjoyed it!
Im sorry, but all these new features, great as they may be, are not worth the deprecation of Windows 7, 8 and 8.1. Bring support back or I am never "upgrading". That deprecation costs actual real-world resources such as "computers" that cannot be upgraded. If I want to bring my product into those machines as well, it should not be up to you.
Your tutorial was very helpful and made it much easier for me to set up my first WebView plugin. Thank you so much for that! I have one question though: At the moment, the Normalisable Ranges for the SliderAttachments are calculated in JavaScript. This makes it uncomfortable to use custom Normalisable Ranges defined in the backend (works only with the help of e.g. Native Function). Are there any plans to change this in the future? Having full access to these parameters would be a big advantage.
Thanks for the question, Daniel. There are currently no plans for this kind of integration because the WebView runs in a separate thread from the C++ backend. The asynchronous nature of this setup would result in latency that could be problematic for certain projects.
@@JUCElibrary Thank you for your response. It would then be useful from my perspective to have a NormalisableRange class in JavaScript as well, configurable for a specific SliderState object.
@@daniel-bark Thank you for your feedback, it has been passed on to the team.
Thanks for this great tutorial! I’m having some issues with the Web Attachments working together with the Undo Manager. While parameter changes are saved in the Undo Manager, they’re not recorded as individual transactions. Instead, all changes are grouped into a single transaction. This also applies to the comboboxes, which don’t seem to require the sliderDragStarted and sliderDragEnded functions.
I had to use ${CMAKE_SOURCE_DIR}/libs/juce/modules/juce_gui_extra/native/javascript/ instead of ${CMAKE_CURRENT_SOURCE_DIR}/../libs/juce/modules/juce_gui_extra/native/javascript/ in order to copy the files. Otherwise, I'd get the "No such file or directory." error.
I think I just had the Aha where this will be really useful. Any time I hit a situation where I want to make something in the UI that is either not possible or very cumbersome in JUCE I should be able to toss on a webview ALONGSIDE my JUCE ui and build out that part of the plugin’s ui there. Very cool. I hadn’t been thinking of the webview being something you would mix with the classic cpp based uis.
This was massively insightful. I appreciated that you explained concepts as you went... it was a useful appendix to the JUCE example. Can't wait to try this out. 🔥🔥🔥
I hate this guy's face
These tutorials are great! I'm doing my own plumbing in my own template project, with vite and React and zip asset based delivery for release, and these videos are so helpful for setting that up!
what happend to all the old juce videos?
Great intro, thanks 😁 Having the full frontend power of React and WebGL with the full processing power of JUCE combined ... that'll be neat 🥰
Just to know, can't you simply sent the outputLevel value in the js event you are triggering from c++ instead of making an event that then request a resource with that data from js?
Yes you can. That would be the cleaner and simpler way of doing this. I'm not sure why Jan did this method which added complexity for no benefit.
The point of this tutorial seems to be to get things to play together. The level display is more of an excuse for showing "you can send events with timers that trigger things happening that can involve requesting resources from the backend, and also here's how you get processor and editor to play together." I appreciate that 😁
@@cybergwenyou are probably right but this wasn’t a good use case for that architecture.
Thanks for the question! The idea is to demonstrate that you can use getResource() to retrieve larger chunks of data (output level is just an example here). But we still need an event, to which you can subscribe that tells you that you should be calling getResource(). But they are two different mechanisms. Data passed into the event does full String JSON serialisation, deserialisation, while getResource uses binary data passed to the WebView. So two reasons: 1. we don't want to push the data unless someone's listening to it 2. we'd rather not serialise, deserialise to pass this kind of data, hence the getResource
I'm still really not getting why anyone would want to use this webview stuff. Seems like so much work compared to just using existing methods. Seems like it's brittle if the OS installed webview frameworks are changed. Who is realistically going to be replacing their existing UIs with this?
Depends what you’re doing. For more complex standalone apps it opens up lots of possibilities. For a regular plugin it’s probably less compelling.
Does all that custom setup for windows need to be done by the user?
I have this question as well
Same! I would love to see a tutorial on actually building and packaging WebView plugins for release...
No, what's shown in the tutorial is only needed on the developer machine. However, to distribute your app or plugin with WebViews on Windows, you need to distribute the WebView2 Runtime with your installer. Here's Microsoft's documentation on this topic: learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/deployment-distribution There is a video on packaging JUCE WebView plugins for distribution in the works so stay tuned!
Great series, learning a lot. Have a question, is it possible to serve WebUI from a DEV server and also do the fetch calls from the UI app t C++ backend. I can see that it is possible to serve the UI files with zip method, but it seems that it will require building of the UI code on every UI change. Thanks
Actually, with the help of your next video was able to figure it out. I did not know that getResource is still called even when we serve the UI app files with the DEV server. Thanks.
Really appreciate this content, thank you so much!
This is so fun, thank you!
THANK YOU 💯🔥 i learn sooo much from these videos it is literally insane! I had never programmed anything in my life before, now you set me up with these awesome tutorials and im on my way to creating my first plugin. My goal is to create sample based instruments, similar to Kontakt but less complex and a more user friendly interface
Jan!! Nice to see you on the official JUCE channel.
I was able to get the web app I've been developing over the last year running in a JUCE web component today, and it all works! I cannot express how grateful I am to the folks at JUCE and to you Jan for this great tutorial! This opens up so many possibilities for me!
Awesome, great to hear!
Great job, Jan! Looking forward to the next one!
Coming soon!
Can I use cmake in juce 8 out of the box? With previous versions you have to use third-party repositories to be able to work with cmake. And for some reason, compilation for Linux with cmake, in this case, turns out to be quite long. (If I make small changes to the code, it causes everything to be recompiled). You had a video on how to use juce with cmake. Is this relevant for version 8?
Yes, you can use JUCE with CMake since JUCE version 6.
Thanks a lot!!!
You're welcome!
Thanks ! On Mac, I don't get the right-click web inspector on the standalone... is there a debug flag or something that needs to be set?
I am having the same issue! Did you find a solution to this?
That's weird. Works fine for me. I don't believe I'm doing anything special.
Fantastic , thanks Jan !
Thanks a lot for this tutorials. Waiting for more!
More to come!
Thanks
Excited to start using this, thanks for uploading!
Great, thanks!
Very good. Just need to shift yourself a bit further left (or make the files panel wider) because you're covering up the logs appearing in the Terminal.
Thanks, yes, that'll be corrected in the future episodes 🙂
Awesome! Are there any plans to support Wasm plugins?
Did you guys just kill HISE? "You may not create, make available as a service, nor distribute software that creates software that contains JUCE. This encompasses all projects and products that provide the ability to generate plug-ins and standalone software that uses JUCE."
If they use a previous version of JUCE, then the previous license agreement may apply to them, I suppose. Idk.
So the animator class / easings are just like Macromedia Flash from 20 years ago - easy enough!
JUCE just became interesting to me. Web view has been a long time coming, I’m happy to see you’ve noticed the trend
So cool to see this Jan collab on the main channel
Still no CLAP? Sheesh.
Why would i need clap again?
@@INeedsMoneys If you can't google it and understand the information that's presented to you, then I won't be able to explain it to you either.
@@1b2m alright
CLAP support is planned for JUCE 9. See the official roadmap here: juce.com/blog/juce-roadmap-update-q3-2024/
Amazing!
Yay! Thank you!
💬 Share your thoughts on the update with the JUCE team on the forum! forum.juce.com/t/the-juce-8-preview-branch-is-available-now/